:root {
  color-scheme: dark;
  --bg: #08050c;
  --bg-soft: #120916;
  --panel: rgba(34, 18, 39, 0.72);
  --panel-strong: rgba(54, 20, 47, 0.84);
  --text: #f6edf0;
  --muted: #cbbac5;
  --gold: #d9ad62;
  --gold-soft: #f0d79a;
  --wine: #5c1538;
  --violet: #2b1746;
  --line: rgba(240, 215, 154, 0.18);
  --line-bright: rgba(240, 215, 154, 0.34);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
  --shadow-gold: 0 24px 70px rgba(217, 173, 98, 0.16);
  --glass: rgba(22, 10, 26, 0.62);
  --section-padding-y: 42px;
  --section-gap-sm: 16px;
  --section-gap-md: 34px;
  --section-gap-lg: 54px;
  --section-gap-xl: 70px;
  --section-heading-gap: 30px;
  --cluster-gap: 20px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(92, 21, 56, 0.62), transparent 38rem),
    radial-gradient(circle at 82% 10%, rgba(75, 37, 112, 0.58), transparent 34rem),
    radial-gradient(circle at 78% 36%, rgba(217, 173, 98, 0.12), transparent 30rem),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.045), transparent 42rem),
    linear-gradient(180deg, #09050d 0%, #140817 45%, #08050c 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image:
    radial-gradient(circle, rgba(240, 215, 154, 0.18) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.5px);
  background-position: 0 0, 34px 42px;
  background-size: 118px 118px, 164px 164px;
  opacity: 0.28;
}

.ambient-particles {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 25vh;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
  isolation: isolate;
}

.ambient-particles::before {
  position: absolute;
  left: 50%;
  bottom: -8vh;
  width: min(112vw, 1640px);
  height: 23vh;
  content: "";
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(240, 215, 154, 0.22), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(92, 21, 56, 0.22), transparent 72%),
    radial-gradient(ellipse at 50% 100%, rgba(217, 173, 98, 0.13), transparent 42%);
  filter: blur(24px);
  opacity: 0.86;
  transform: translateX(-50%);
}

.particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
}

.ambient-particles span {
  display: none;
}

.ambient-particles span:nth-child(1) { --left: 3%; --size: 6px; --duration: 9s; --delay: -1s; --particle-rgb: 240, 215, 154; --alpha: 0.34; }
.ambient-particles span:nth-child(2) { --left: 6%; --size: 3px; --duration: 8s; --delay: -5s; --particle-rgb: 217, 173, 98; --alpha: 0.28; }
.ambient-particles span:nth-child(3) { --left: 9%; --size: 5px; --duration: 11s; --delay: -7s; --particle-rgb: 194, 149, 92; --alpha: 0.24; }
.ambient-particles span:nth-child(4) { --left: 13%; --size: 2px; --duration: 7s; --delay: -3s; --particle-rgb: 240, 215, 154; --alpha: 0.2; }
.ambient-particles span:nth-child(5) { --left: 17%; --size: 4px; --duration: 10s; --delay: -8s; --particle-rgb: 180, 118, 156; --alpha: 0.18; }
.ambient-particles span:nth-child(6) { --left: 21%; --size: 3px; --duration: 8s; --delay: -4s; --particle-rgb: 240, 215, 154; --alpha: 0.22; }
.ambient-particles span:nth-child(7) { --left: 25%; --size: 7px; --duration: 12s; --delay: -9s; --particle-rgb: 217, 173, 98; --alpha: 0.28; }
.ambient-particles span:nth-child(8) { --left: 29%; --size: 3px; --duration: 7s; --delay: -2s; --particle-rgb: 194, 149, 92; --alpha: 0.2; }
.ambient-particles span:nth-child(9) { --left: 33%; --size: 5px; --duration: 11s; --delay: -6s; --particle-rgb: 240, 215, 154; --alpha: 0.24; }
.ambient-particles span:nth-child(10) { --left: 37%; --size: 2px; --duration: 8s; --delay: -5s; --particle-rgb: 217, 173, 98; --alpha: 0.18; }
.ambient-particles span:nth-child(11) { --left: 41%; --size: 4px; --duration: 10s; --delay: -9s; --particle-rgb: 240, 215, 154; --alpha: 0.2; }
.ambient-particles span:nth-child(12) { --left: 45%; --size: 6px; --duration: 13s; --delay: -11s; --particle-rgb: 180, 118, 156; --alpha: 0.2; }
.ambient-particles span:nth-child(13) { --left: 49%; --size: 3px; --duration: 8s; --delay: -4s; --particle-rgb: 217, 173, 98; --alpha: 0.18; }
.ambient-particles span:nth-child(14) { --left: 53%; --size: 5px; --duration: 11s; --delay: -7s; --particle-rgb: 240, 215, 154; --alpha: 0.24; }
.ambient-particles span:nth-child(15) { --left: 57%; --size: 2px; --duration: 7s; --delay: -2s; --particle-rgb: 194, 149, 92; --alpha: 0.16; }
.ambient-particles span:nth-child(16) { --left: 61%; --size: 4px; --duration: 9s; --delay: -8s; --particle-rgb: 240, 215, 154; --alpha: 0.2; }
.ambient-particles span:nth-child(17) { --left: 65%; --size: 6px; --duration: 12s; --delay: -10s; --particle-rgb: 217, 173, 98; --alpha: 0.22; }
.ambient-particles span:nth-child(18) { --left: 69%; --size: 3px; --duration: 8s; --delay: -5s; --particle-rgb: 180, 118, 156; --alpha: 0.16; }
.ambient-particles span:nth-child(19) { --left: 73%; --size: 5px; --duration: 10s; --delay: -7s; --particle-rgb: 240, 215, 154; --alpha: 0.22; }
.ambient-particles span:nth-child(20) { --left: 77%; --size: 2px; --duration: 7s; --delay: -3s; --particle-rgb: 217, 173, 98; --alpha: 0.16; }
.ambient-particles span:nth-child(21) { --left: 80%; --size: 4px; --duration: 9s; --delay: -6s; --particle-rgb: 240, 215, 154; --alpha: 0.18; }
.ambient-particles span:nth-child(22) { --left: 83%; --size: 7px; --duration: 13s; --delay: -12s; --particle-rgb: 194, 149, 92; --alpha: 0.2; }
.ambient-particles span:nth-child(23) { --left: 86%; --size: 3px; --duration: 8s; --delay: -4s; --particle-rgb: 217, 173, 98; --alpha: 0.18; }
.ambient-particles span:nth-child(24) { --left: 88%; --size: 5px; --duration: 11s; --delay: -9s; --particle-rgb: 240, 215, 154; --alpha: 0.22; }
.ambient-particles span:nth-child(25) { --left: 90%; --size: 2px; --duration: 7s; --delay: -2s; --particle-rgb: 180, 118, 156; --alpha: 0.14; }
.ambient-particles span:nth-child(26) { --left: 92%; --size: 4px; --duration: 10s; --delay: -8s; --particle-rgb: 240, 215, 154; --alpha: 0.18; }
.ambient-particles span:nth-child(27) { --left: 94%; --size: 6px; --duration: 12s; --delay: -11s; --particle-rgb: 217, 173, 98; --alpha: 0.2; }
.ambient-particles span:nth-child(28) { --left: 96%; --size: 3px; --duration: 8s; --delay: -5s; --particle-rgb: 194, 149, 92; --alpha: 0.16; }
.ambient-particles span:nth-child(29) { --left: 2%; --size: 4px; --duration: 9s; --delay: -6s; --particle-rgb: 240, 215, 154; --alpha: 0.18; }
.ambient-particles span:nth-child(30) { --left: 19%; --size: 5px; --duration: 12s; --delay: -10s; --particle-rgb: 217, 173, 98; --alpha: 0.2; }
.ambient-particles span:nth-child(31) { --left: 47%; --size: 3px; --duration: 7s; --delay: -3s; --particle-rgb: 240, 215, 154; --alpha: 0.16; }
.ambient-particles span:nth-child(32) { --left: 74%; --size: 4px; --duration: 10s; --delay: -8s; --particle-rgb: 180, 118, 156; --alpha: 0.16; }

.ambient-particles span:nth-child(3n + 1) {
  animation-name: ambient-rise-center;
}

.ambient-particles span:nth-child(3n + 2) {
  animation-name: ambient-rise-left;
}

.ambient-particles span:nth-child(3n) {
  animation-name: ambient-rise-right;
}

@keyframes ambient-rise-center {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.68);
  }
  12% {
    opacity: var(--alpha);
  }
  55% {
    opacity: calc(var(--alpha) * 0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -22vh, 0) scale(1.16);
  }
}

@keyframes ambient-rise-left {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.68);
  }
  14% {
    opacity: var(--alpha);
  }
  55% {
    opacity: calc(var(--alpha) * 0.8);
  }
  100% {
    opacity: 0;
    transform: translate3d(-18px, -21vh, 0) scale(1.16);
  }
}

@keyframes ambient-rise-right {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.68);
  }
  14% {
    opacity: var(--alpha);
  }
  55% {
    opacity: calc(var(--alpha) * 0.8);
  }
  100% {
    opacity: 0;
    transform: translate3d(18px, -21vh, 0) scale(1.16);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

main,
.site-footer {
  position: relative;
  z-index: 20;
}

.site-header,
.section,
.site-footer {
  width: min(1320px, calc(100% - 32px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 82px;
  margin-top: 10px;
  padding: 13px 20px;
  border: 1px solid rgba(240, 215, 154, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(135deg, rgba(20, 9, 24, 0.8), rgba(12, 6, 14, 0.56));
  box-shadow: 0 20px 76px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(22px);
}

.brand,
.header-action,
.main-nav a,
.button {
  min-height: 50px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-mark {
  width: 28px;
  aspect-ratio: 1;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold-soft) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(217, 173, 98, 0.34), rgba(92, 21, 56, 0.4));
  box-shadow: 0 0 28px rgba(217, 173, 98, 0.28);
}

.main-nav {
  display: none;
  color: var(--muted);
  font-size: 17px;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  transition: color 180ms ease, background-color 180ms ease;
}

.main-nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.main-nav a:focus-visible,
.footer-nav a:focus-visible,
.button:focus-visible,
.header-action:focus-visible {
  outline: 2px solid rgba(240, 215, 154, 0.58);
  outline-offset: 3px;
}

.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid rgba(240, 215, 154, 0.56);
  border-radius: 999px;
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 16px 44px rgba(217, 173, 98, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-size: 17px;
  font-weight: 700;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.header-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 54px rgba(217, 173, 98, 0.32);
}

.section {
  position: relative;
  padding: var(--section-padding-y) 0;
}

.section + .section {
  margin-top: var(--section-gap-md);
}

.hero + .section {
  margin-top: var(--section-gap-sm);
}

.preview.section,
.audience.section,
#steps.section {
  margin-top: var(--section-gap-lg);
}

#topics.section,
.trust.section,
.faq.section,
.final-cta.section {
  margin-top: var(--section-gap-xl);
}

#topics::before,
.trust::before {
  position: absolute;
  left: 50%;
  top: calc(var(--section-gap-xl) * -0.45);
  width: min(840px, 72vw);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(240, 215, 154, 0.28), rgba(92, 21, 56, 0.22), transparent);
  box-shadow: 0 0 34px rgba(217, 173, 98, 0.08);
  opacity: 0.8;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero {
  position: relative;
  display: grid;
  gap: 28px;
  min-height: calc(100svh - 88px);
  align-items: center;
  padding-top: 22px;
  padding-bottom: 14px;
}

.hero::before {
  position: absolute;
  inset: 8% 32% auto -8%;
  z-index: -1;
  height: 380px;
  content: "";
  background: radial-gradient(circle, rgba(92, 21, 56, 0.42), transparent 68%);
  filter: blur(18px);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.05;
}

h1 {
  max-width: 790px;
  margin-bottom: 18px;
  font-size: clamp(43px, 10.5vw, 86px);
  font-weight: 760;
  text-wrap: balance;
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 8vw, 52px);
}

h3 {
  margin-bottom: 0;
  font-size: 20px;
}

p {
  color: var(--muted);
  line-height: 1.7;
}

.hero-text {
  max-width: 680px;
  margin-bottom: 30px;
  color: #dfd0d9;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.hero-actions .button {
  min-height: 56px;
}

.hero-note {
  max-width: 560px;
  margin: 20px 0 0;
  color: rgba(246, 237, 240, 0.82);
  font-size: 16px;
  line-height: 1.6;
}

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

.button-primary {
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 16px 44px rgba(217, 173, 98, 0.26);
}

.button-primary:hover {
  box-shadow: 0 20px 54px rgba(217, 173, 98, 0.32);
}

.button-secondary {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.button-secondary:hover {
  border-color: var(--line-bright);
  background: rgba(255, 255, 255, 0.075);
}

.hero-art {
  position: relative;
  min-height: 460px;
  isolation: isolate;
}

.hero-art-badge {
  position: absolute;
  left: 7%;
  bottom: 12%;
  z-index: 4;
  display: grid;
  gap: 4px;
  max-width: min(320px, 78%);
  padding: 14px 16px;
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 18px;
  color: rgba(246, 237, 240, 0.88);
  background: rgba(12, 6, 16, 0.58);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.34), 0 0 32px rgba(217, 173, 98, 0.1);
  backdrop-filter: blur(16px);
}

.hero-art-badge span:first-child {
  color: var(--gold-soft);
  font-size: 13px;
  font-weight: 760;
}

.hero-art-badge span:last-child {
  font-size: 12px;
  line-height: 1.45;
}

.hero-art::before,
.hero-art::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.hero-art::before {
  inset: 5% 1% 1%;
  z-index: -2;
  border-radius: 44px;
  background:
    radial-gradient(circle at 52% 45%, rgba(217, 173, 98, 0.28), transparent 23rem),
    radial-gradient(circle at 48% 55%, rgba(92, 21, 56, 0.62), transparent 30rem);
  filter: blur(22px);
}

.hero-art::after {
  inset: 8% 7%;
  z-index: 1;
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 46%, transparent 38%, rgba(8, 5, 12, 0.16) 66%, rgba(8, 5, 12, 0.46) 100%);
}

/*
  Future hero image slot:
  Add a real illustration/photo inside .hero-art, or set a background on a dedicated child.
  Recommended source ratio: 4:5 or 1:1, at least 1200px wide for desktop.
  Do not reference an image URL until the file exists in assets/images/.
*/
.hero-art-fallback {
  position: relative;
  min-height: 460px;
  border: 0;
  border-radius: 40px;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 45%, rgba(240, 215, 154, 0.14), transparent 12rem),
    radial-gradient(circle at 49% 58%, rgba(92, 21, 56, 0.38), transparent 19rem),
    radial-gradient(circle at 72% 20%, rgba(86, 43, 129, 0.18), transparent 14rem);
  box-shadow: none;
  isolation: isolate;
  opacity: 0.52;
}

.hero-art-image {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: block;
  width: min(94%, 590px);
  max-width: none;
  height: min(94%, 590px);
  border-radius: 48px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 64px rgba(217, 173, 98, 0.24));
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 5%, #000 15%, #000 85%, rgba(0, 0, 0, 0.35) 95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 5%, #000 15%, #000 85%, rgba(0, 0, 0, 0.35) 95%, transparent 100%);
  mask-composite: intersect;
  transform: translate(-50%, -50%);
}

.hero-art-fallback::before,
.hero-art-fallback::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.hero-art-fallback::before {
  inset: 9% 6%;
  z-index: -1;
  border: 0;
  border-radius: 38px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 34%),
    rgba(12, 6, 16, 0.08);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.hero-art-fallback::after {
  inset: auto -20% -30% 12%;
  z-index: -2;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 173, 98, 0.26), transparent 70%);
  filter: blur(24px);
}

.glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 215, 154, 0.44), rgba(92, 21, 56, 0.14) 56%, transparent 72%);
  filter: blur(3px);
  transform: translate(-50%, -50%);
}

.orbit {
  position: absolute;
  inset: 38px;
  border: 1px solid rgba(240, 215, 154, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(217, 173, 98, 0.08);
  opacity: 0.46;
}

.orbit-two {
  inset: 90px 28px;
  transform: rotate(-16deg);
}

.orbit-one {
  transform: rotate(12deg);
}

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 146px;
  height: 226px;
  border: 1px solid rgba(240, 215, 154, 0.5);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(217, 173, 98, 0.22), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(72, 25, 78, 0.98), rgba(18, 7, 22, 0.98));
  box-shadow:
    0 40px 70px rgba(0, 0, 0, 0.52),
    0 0 56px rgba(217, 173, 98, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card::before {
  position: absolute;
  inset: 12px;
  content: "";
  border: 1px solid rgba(240, 215, 154, 0.24);
  border-radius: 10px;
}

.card::after {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 34px;
  height: 1px;
  content: "";
  background: rgba(240, 215, 154, 0.45);
  box-shadow: 0 134px 0 rgba(240, 215, 154, 0.24);
  transform: translateX(-50%);
}

.card span {
  position: absolute;
  inset: 54px 34px;
  border: 1px solid rgba(240, 215, 154, 0.5);
  border-radius: 50%;
}

.card i {
  position: absolute;
  inset: 88px 61px;
  display: block;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 26px rgba(240, 215, 154, 0.44);
}

.card-main {
  z-index: 2;
  transform: translate(-50%, -50%) scale(1.13);
}

.card-left {
  z-index: 1;
  transform: translate(-116%, -44%) rotate(-14deg);
}

.card-right {
  z-index: 1;
  transform: translate(16%, -44%) rotate(14deg);
}

.star {
  position: absolute;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 22px rgba(240, 215, 154, 0.7);
}

.symbol {
  position: absolute;
  border-color: rgba(240, 215, 154, 0.48);
}

.symbol-moon {
  right: 17%;
  top: 17%;
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset -10px 0 0 rgba(240, 215, 154, 0.76), 0 0 24px rgba(217, 173, 98, 0.12);
}

.star-one {
  top: 17%;
  left: 24%;
}

.star-two {
  top: 25%;
  right: 19%;
}

.star-three {
  right: 28%;
  bottom: 18%;
}

.star-four {
  left: 20%;
  bottom: 28%;
}

.section-heading {
  max-width: 760px;
  margin-bottom: var(--section-heading-gap);
}

.section-heading p:not(.eyebrow) {
  max-width: 680px;
  margin-bottom: 0;
  font-size: 17px;
}

.benefit-grid,
.steps,
.audience-grid,
.trust-grid {
  display: grid;
  gap: var(--cluster-gap);
}

.panel,
.step,
.audience-item,
.preview-card,
.trust-content,
.final-cta {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 38%),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.panel,
.step {
  position: relative;
  overflow: hidden;
}

.panel {
  display: grid;
  align-content: start;
}

.panel-image {
  position: relative;
  width: 100%;
  max-width: none;
  height: 196px;
  margin-bottom: 24px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(217, 173, 98, 0.24), transparent 11rem),
    radial-gradient(circle at 50% 78%, rgba(92, 21, 56, 0.26), transparent 12rem),
    rgba(8, 5, 12, 0.22);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.32), 0 0 44px rgba(217, 173, 98, 0.12);
}

.panel-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 50%, transparent 44%, rgba(8, 5, 12, 0.12) 78%, rgba(8, 5, 12, 0.28) 100%),
    linear-gradient(180deg, transparent 50%, rgba(8, 5, 12, 0.2));
  pointer-events: none;
  z-index: 1;
}

.panel-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
  filter: saturate(0.9) contrast(0.98);
}

.panel p,
.step p,
.trust-grid p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
}

.panel::before,
.step::before,
.trust-content::before {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(240, 215, 154, 0.34), transparent);
}

.panel,
.step {
  min-height: 154px;
  padding: 26px;
  border-radius: 20px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.panel-featured {
  min-height: 154px;
  background:
    radial-gradient(circle at 18% 0%, rgba(217, 173, 98, 0.12), transparent 13rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 38%),
    var(--panel);
}

.benefit-grid .panel:not(.panel-featured) {
  margin-top: 0;
}

.panel:hover,
.step:hover {
  transform: translateY(-1px);
  border-color: var(--line-bright);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.38), 0 0 28px rgba(217, 173, 98, 0.06);
}

.panel-number,
.step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  aspect-ratio: 1;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgba(217, 173, 98, 0.08);
  font-size: 13px;
  font-weight: 700;
}

.panel-image .panel-number {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  width: 42px;
  margin-bottom: 0;
  border-color: rgba(240, 215, 154, 0.48);
  color: var(--gold-soft);
  background: rgba(12, 6, 16, 0.62);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), 0 0 22px rgba(217, 173, 98, 0.12);
  backdrop-filter: blur(12px);
}

.step {
  border-radius: 28px 18px 28px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 44%),
    rgba(18, 9, 22, 0.56);
}

.step-accent {
  border-color: rgba(240, 215, 154, 0.36);
  background:
    radial-gradient(circle at 18% 0%, rgba(217, 173, 98, 0.16), transparent 12rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 44%),
    rgba(28, 12, 27, 0.68);
  box-shadow: 0 30px 78px rgba(0, 0, 0, 0.42), 0 0 36px rgba(217, 173, 98, 0.1);
}

.step-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  margin-bottom: 18px;
  border: 1px solid rgba(240, 215, 154, 0.3);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(217, 173, 98, 0.1);
  box-shadow: 0 0 24px rgba(217, 173, 98, 0.08);
  font-size: 13px;
  line-height: 1;
}

.step:nth-child(2) {
  margin-top: 18px;
}

.step:nth-child(3) {
  margin-top: 36px;
}

.step span {
  border-radius: 12px;
}

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

.audience-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 24px;
  border-radius: 22px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 650;
  overflow: hidden;
}

.audience-item > span {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
}

.audience-item::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 46%);
  pointer-events: none;
}

.audience-item::before {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 14px;
  margin-top: 4px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(240, 215, 154, 0.62);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft) 0 3px, rgba(217, 173, 98, 0.1) 4px, transparent 70%);
  box-shadow: 0 0 26px rgba(240, 215, 154, 0.34);
}

.preview-card {
  position: relative;
  padding: 30px;
  border-color: rgba(240, 215, 154, 0.28);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(217, 173, 98, 0.16), transparent 18rem),
    radial-gradient(circle at 6% 88%, rgba(92, 21, 56, 0.28), transparent 18rem),
    linear-gradient(135deg, rgba(50, 18, 56, 0.86), rgba(14, 7, 18, 0.9));
}

.preview-card .section-heading {
  max-width: 820px;
  margin-bottom: calc(var(--section-heading-gap) - 8px);
}

.preview-card::after {
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 280px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 173, 98, 0.23), transparent 68%);
}

.preview-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: calc(var(--cluster-gap) + 6px);
  align-items: start;
}

.preview-copy {
  min-width: 0;
  max-width: 820px;
}

.preview-text {
  position: relative;
  z-index: 1;
  max-width: none;
  padding: 22px 24px;
  margin-bottom: 12px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 20px;
  background: rgba(8, 5, 12, 0.28);
}

.preview-text p {
  max-width: 720px;
  color: rgba(246, 237, 240, 0.86);
  font-size: 20px;
  line-height: 1.84;
}

.preview-lock {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(240, 215, 154, 0.2);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(217, 173, 98, 0.08);
  font-size: 13px;
  font-weight: 700;
}

.blurred-copy {
  position: relative;
  max-height: 82px;
  margin-bottom: 0;
  overflow: hidden;
  filter: blur(2.7px);
  opacity: 0.44;
  user-select: none;
  mask-image: linear-gradient(180deg, #000 18%, rgba(0, 0, 0, 0.72) 70%, transparent 96%);
}

.preview-note {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 0 12px;
  color: rgba(246, 237, 240, 0.84);
  font-size: 17px;
}

.preview-closed {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  margin-top: 16px;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 999px;
  color: rgba(246, 237, 240, 0.78);
  background: rgba(255, 255, 255, 0.045);
  font-size: 13px;
  font-weight: 650;
}

.preview-visual {
  position: relative;
  display: grid;
  align-self: start;
  align-content: start;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 16px 16px;
  border: 1px solid rgba(240, 215, 154, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 26%, rgba(217, 173, 98, 0.12), transparent 15rem),
    rgba(8, 5, 12, 0.16);
}

.preview-visual::before {
  position: absolute;
  inset: 10% 8%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 173, 98, 0.14), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.preview-card-image {
  position: relative;
  z-index: 1;
  width: min(100%, 350px);
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.42), 0 0 34px rgba(217, 173, 98, 0.13);
}

.preview-card-image img {
  display: block;
  width: 100%;
  height: auto;
}

.preview-card-caption {
  position: relative;
  z-index: 1;
  width: min(100%, 330px);
  padding: 13px 14px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 18px;
  background: rgba(12, 6, 16, 0.46);
  backdrop-filter: blur(14px);
}

.preview-card-caption span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.preview-card-caption h3 {
  margin-bottom: 8px;
}

.preview-card-caption p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.6;
}

.preview-card-caption small {
  display: block;
  margin-top: 10px;
  color: rgba(246, 237, 240, 0.58);
  font-size: 12px;
  line-height: 1.5;
}

.topic-layout {
  display: grid;
  gap: calc(var(--cluster-gap) + 4px);
  align-items: stretch;
}

.topic-controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.topic-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.topic-list li {
  min-height: 0;
}

.topic-form {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.topic-email-label {
  color: rgba(246, 237, 240, 0.74);
  font-size: 14px;
  line-height: 1.5;
}

.topic-email-input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(240, 215, 154, 0.2);
  border-radius: 999px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 46%),
    rgba(8, 5, 12, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font: inherit;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.topic-email-input::placeholder {
  color: rgba(246, 237, 240, 0.48);
}

.topic-email-input:focus {
  border-color: rgba(240, 215, 154, 0.62);
  background-color: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 4px rgba(217, 173, 98, 0.11), 0 18px 46px rgba(0, 0, 0, 0.22);
}

.topic-email-input.is-invalid {
  border-color: rgba(255, 120, 120, 0.72);
  box-shadow: 0 0 0 4px rgba(255, 120, 120, 0.1);
}

.topic-email-error,
.topic-success {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.topic-email-error {
  color: #ffaaa4;
}

.topic-success {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 18px;
  color: rgba(246, 237, 240, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 54%),
    rgba(217, 173, 98, 0.08);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.topic-success[hidden] {
  display: none;
}

.topic-success p {
  margin: 0;
  color: rgba(246, 237, 240, 0.88);
}

.topic-success-button {
  width: 100%;
  min-height: 52px;
}

.topic-button {
  width: 100%;
  min-height: 62px;
  padding: 19px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 42%),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 16px;
  font-weight: 650;
  font-family: inherit;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.topic-button:hover,
.topic-button:focus-visible,
.topic-button.is-active {
  border-color: rgba(240, 215, 154, 0.58);
  color: #fff8e6;
  background:
    radial-gradient(circle at 18% 20%, rgba(217, 173, 98, 0.26), transparent 8rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), transparent 42%),
    rgba(217, 173, 98, 0.12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32), 0 0 46px rgba(217, 173, 98, 0.2);
}

.topic-button.is-active {
  box-shadow: 0 24px 66px rgba(0, 0, 0, 0.34), 0 0 48px rgba(217, 173, 98, 0.22);
}

.topic-button:hover {
  transform: translateY(-2px);
}

.topic-button:focus-visible {
  outline: 2px solid rgba(240, 215, 154, 0.58);
  outline-offset: 3px;
}

.topic-preview {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 26% 18%, rgba(217, 173, 98, 0.16), transparent 13rem),
    radial-gradient(circle at 86% 80%, rgba(92, 21, 56, 0.26), transparent 15rem),
    rgba(18, 9, 22, 0.62);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.topic-preview::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 44%);
  pointer-events: none;
}

.topic-preview > * {
  position: relative;
  z-index: 1;
}

.topic-preview-visual {
  height: 430px;
  min-height: 0;
  border: 0;
  border-radius: 30px 30px 0 0;
  position: relative;
  overflow: hidden;
  background: rgba(8, 5, 12, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 54px rgba(0, 0, 0, 0.26), 0 0 34px rgba(217, 173, 98, 0.08);
}

.topic-preview-visual::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(180deg, rgba(8, 5, 12, 0.08), rgba(8, 5, 12, 0.12) 42%, rgba(8, 5, 12, 0.5)),
    radial-gradient(circle at 50% 38%, transparent 42%, rgba(8, 5, 12, 0.18) 100%);
  pointer-events: none;
}

.topic-preview-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(0.98);
}

.landing-page .topic-preview-visual img {
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
  will-change: opacity, transform;
}

.landing-page .topic-preview.is-loading .topic-preview-visual img {
  opacity: 0.88;
  transform: scale(0.992);
  filter: saturate(0.88) contrast(0.98);
}

.landing-page .topic-preview.is-ready .topic-preview-visual img {
  animation: topicImageReveal 220ms ease-out both;
}

.topic-preview-content span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.topic-preview-content {
  padding: 24px;
}

.landing-page .topic-preview-content {
  transition: opacity 180ms ease, transform 180ms ease;
}

.landing-page .topic-preview.is-updating .topic-preview-content {
  opacity: 0.92;
  transform: translateY(3px);
}

.topic-preview-content h3 {
  margin-bottom: 10px;
}

.topic-preview-content p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.6;
}

.topic-cta {
  appearance: none;
  width: 100%;
  min-height: 52px;
  margin-top: auto;
  padding-inline: 24px;
  box-shadow: 0 22px 60px rgba(217, 173, 98, 0.28);
  cursor: pointer;
  font-family: inherit;
}

.topic-cta.is-emphasized {
  transform: translateY(-1px);
  box-shadow: 0 24px 68px rgba(217, 173, 98, 0.38);
}

@keyframes topicImageReveal {
  from {
    opacity: 0.9;
    transform: scale(0.986);
    filter: saturate(0.92) contrast(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
    filter: saturate(0.92) contrast(0.98);
  }
}

.trust-content {
  position: relative;
  overflow: hidden;
  max-width: none;
  padding: 34px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(217, 173, 98, 0.16), transparent 14rem),
    linear-gradient(135deg, var(--panel-strong), rgba(18, 9, 22, 0.78));
}

.trust-content::after {
  position: absolute;
  right: 30px;
  top: 24px;
  content: "";
  width: 66px;
  height: 48px;
  border-top: 1px solid rgba(240, 215, 154, 0.26);
  border-bottom: 1px solid rgba(240, 215, 154, 0.16);
  opacity: 0.8;
}

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

.trust-grid article {
  position: relative;
  padding: 22px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 20px;
  background: rgba(8, 5, 12, 0.22);
}

.trust-disclaimer {
  max-width: 900px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 18px;
  color: rgba(246, 237, 240, 0.78);
  background: rgba(255, 255, 255, 0.04);
  font-size: 15px;
}

.trust-content p,
.final-cta p {
  margin-bottom: 0;
}

.final-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  align-items: center;
  gap: 28px;
  margin-bottom: 28px;
  padding: 42px;
  overflow: hidden;
  border-color: rgba(240, 215, 154, 0.3);
  border-radius: 30px;
  background:
    radial-gradient(circle at 86% 28%, rgba(217, 173, 98, 0.18), transparent 16rem),
    radial-gradient(circle at 12% 70%, rgba(92, 21, 56, 0.42), transparent 20rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.88), rgba(13, 6, 16, 0.94));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
}

.final-cta::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(240, 215, 154, 0.12), transparent),
    radial-gradient(circle at 92% 50%, rgba(217, 173, 98, 0.18), transparent 12rem);
}

.final-cta-copy {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.final-cta > * {
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  max-width: 780px;
  text-wrap: balance;
}

.final-cta p:not(.eyebrow) {
  max-width: 700px;
}

.final-cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.final-cta-trust li {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(246, 237, 240, 0.82);
  font-size: 14px;
  line-height: 1.2;
}

.final-cta-button {
  width: fit-content;
  min-width: 270px;
  min-height: 58px;
  padding-inline: 28px;
}

.final-cta-visual {
  position: relative;
  min-height: 320px;
  isolation: isolate;
  pointer-events: none;
}

.final-cta-visual::before {
  position: absolute;
  inset: 8% 12% 12% 14%;
  content: "";
  border-radius: 32px;
  background: radial-gradient(circle, rgba(217, 173, 98, 0.24), transparent 70%);
  filter: blur(10px);
  opacity: 0.9;
}

.final-cta-visual::after {
  position: absolute;
  inset: 16px 20px 20px 16px;
  content: "";
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 34px;
  opacity: 0.55;
}

.final-cta-card {
  position: absolute;
  inset: auto 0 0 auto;
  width: min(100%, 300px);
  height: 200px;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 36%),
    rgba(12, 7, 16, 0.82);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
}

.final-cta-card-back {
  transform: translate(-44px, 22px) rotate(-8deg);
  opacity: 0.32;
}

.final-cta-card-mid {
  transform: translate(-22px, 10px) rotate(-4deg);
  opacity: 0.62;
}

.final-cta-card-front {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-color: rgba(240, 215, 154, 0.28);
  background:
    radial-gradient(circle at 72% 24%, rgba(217, 173, 98, 0.18), transparent 40%),
    linear-gradient(135deg, rgba(72, 25, 61, 0.94), rgba(15, 8, 18, 0.94));
}

.final-cta-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgba(240, 215, 154, 0.24);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.final-cta-lines {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.final-cta-lines i {
  display: block;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240, 215, 154, 0.82), rgba(240, 215, 154, 0.18) 64%, transparent 100%);
}

.final-cta-lines i:nth-child(2) {
  width: 88%;
}

.final-cta-lines i:nth-child(3) {
  width: 74%;
}

.final-cta-lines i:nth-child(4) {
  width: 58%;
}

.faq-list {
  display: grid;
  gap: var(--cluster-gap);
}

.faq-list article {
  padding: 22px 24px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 42%),
    rgba(18, 9, 22, 0.58);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
}

.faq-list h3 {
  margin-bottom: 10px;
}

.faq-list p {
  margin-bottom: 0;
  font-size: 16px;
}

.site-footer {
  position: relative;
  display: grid;
  gap: 28px;
  margin-top: var(--section-gap-lg);
  padding: 32px 0 44px;
  color: var(--muted);
  font-size: 16px;
}

.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(240, 215, 154, 0.24), rgba(92, 21, 56, 0.26), transparent);
  box-shadow: 0 0 34px rgba(217, 173, 98, 0.08);
}

.footer-main {
  display: grid;
  gap: 28px;
}

.footer-brand {
  max-width: 440px;
}

.footer-brand span {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 20px;
  font-weight: 760;
}

.footer-brand p,
.footer-disclaimer {
  margin-bottom: 0;
  font-size: 16px;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.footer-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(246, 237, 240, 0.82);
  font-size: 13px;
  line-height: 1.2;
}

.footer-column {
  display: grid;
  gap: 14px;
}

.footer-heading {
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-nav {
  display: grid;
  gap: 12px;
}

.footer-nav a {
  position: relative;
  display: inline-flex;
  width: fit-content;
  padding-left: 14px;
  color: rgba(246, 237, 240, 0.78);
}

.footer-nav a::before {
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: rgba(240, 215, 154, 0.66);
  box-shadow: 0 0 14px rgba(240, 215, 154, 0.16);
  transform: translateY(-50%);
}

.footer-nav a:hover {
  color: var(--gold-soft);
}

.footer-disclaimer {
  max-width: 860px;
  padding-top: 18px;
  border-top: 1px solid rgba(240, 215, 154, 0.1);
  color: rgba(246, 237, 240, 0.74);
  line-height: 1.65;
}

.cabinet-page .site-header,
.cabinet-page .section,
.cabinet-page .site-footer {
  width: min(1320px, calc(100% - 32px));
}

.cabinet-header {
  border-radius: 28px;
}

.cabinet-nav {
  font-size: 18px;
  font-weight: 650;
}

.cabinet-nav a {
  padding-inline: 16px;
}

.cabinet-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cabinet-user-email {
  display: none;
  color: rgba(246, 237, 240, 0.9);
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}

.cabinet-access-badge,
.cabinet-status,
.cabinet-premium-badge,
.cabinet-premium-label,
.cabinet-date,
.cabinet-topic {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(246, 237, 240, 0.82);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}

.cabinet-access-badge,
.cabinet-status-free {
  border-color: rgba(240, 215, 154, 0.34);
  color: var(--gold-soft);
  background:
    linear-gradient(135deg, rgba(217, 173, 98, 0.12), transparent 64%),
    rgba(217, 173, 98, 0.08);
}

.cabinet-status-premium,
.cabinet-premium-badge,
.cabinet-premium-label {
  border-color: rgba(240, 215, 154, 0.34);
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 12px 34px rgba(217, 173, 98, 0.14);
}

.cabinet-header-action {
  min-height: 48px;
  padding-inline: 19px;
  font-size: 15px;
  box-shadow: 0 18px 52px rgba(217, 173, 98, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

.cabinet-main {
  padding-top: 18px;
}

.cabinet-premium-hero {
  position: relative;
  display: grid;
  gap: 22px;
  align-items: stretch;
  margin-top: 22px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(240, 215, 154, 0.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 24%, rgba(217, 173, 98, 0.18), transparent 16rem),
    radial-gradient(circle at 12% 72%, rgba(92, 21, 56, 0.42), transparent 22rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.88), rgba(13, 6, 16, 0.94));
  box-shadow: var(--shadow);
}

.cabinet-premium-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent, rgba(240, 215, 154, 0.11), transparent 62%),
    radial-gradient(circle at 80% 42%, rgba(217, 173, 98, 0.16), transparent 13rem);
}

.cabinet-premium-hero > * {
  position: relative;
  z-index: 1;
}

.cabinet-premium-copy {
  display: grid;
  gap: 16px;
  align-content: center;
  max-width: 790px;
}

.cabinet-tariff-note {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 8px 13px;
  border: 1px solid rgba(240, 215, 154, 0.2);
  border-radius: 999px;
  color: rgba(246, 237, 240, 0.86);
  background: rgba(8, 5, 12, 0.28);
  font-size: 14px;
  font-weight: 760;
}

.cabinet-premium-copy h1 {
  margin-bottom: 0;
  font-size: clamp(38px, 8vw, 68px);
}

.cabinet-premium-copy p:not(.eyebrow) {
  max-width: 720px;
  margin-bottom: 0;
  color: #dfd0d9;
  font-size: clamp(17px, 1.35vw, 20px);
}

.cabinet-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.cabinet-hero-actions .button,
.cabinet-bottom-cta .button,
.cabinet-card-button {
  min-height: 52px;
}

.cabinet-premium-card {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 280px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(240, 215, 154, 0.3);
  border-radius: 26px;
  background:
    radial-gradient(circle at 70% 24%, rgba(217, 173, 98, 0.24), transparent 10rem),
    radial-gradient(circle at 18% 88%, rgba(92, 21, 56, 0.26), transparent 11rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 38%),
    rgba(8, 5, 12, 0.34);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), 0 0 54px rgba(217, 173, 98, 0.09);
  backdrop-filter: blur(16px);
}

.cabinet-premium-card::after {
  position: absolute;
  right: -40px;
  bottom: -46px;
  width: 180px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 50%;
  box-shadow: inset 0 0 44px rgba(217, 173, 98, 0.12), 0 0 56px rgba(217, 173, 98, 0.1);
}

.cabinet-premium-card ul,
.cabinet-card-head,
.cabinet-material-grid,
.cabinet-benefit-grid,
.cabinet-locked-grid {
  display: grid;
  gap: var(--cluster-gap);
}

.cabinet-premium-card h2 {
  margin: 2px 0 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.08;
}

.cabinet-premium-card p {
  margin-bottom: 4px;
  color: rgba(246, 237, 240, 0.78);
  font-size: 15px;
  line-height: 1.62;
}

.cabinet-premium-card ul {
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cabinet-premium-card li {
  position: relative;
  padding-left: 22px;
  color: rgba(246, 237, 240, 0.9);
  font-size: 17px;
  line-height: 1.45;
}

.cabinet-premium-card li::before {
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 18px rgba(240, 215, 154, 0.28);
  transform: translateY(-50%);
}

.cabinet-material-card,
.cabinet-benefit-card,
.cabinet-locked-card,
.cabinet-profile,
.cabinet-bottom-cta {
  border: 1px solid rgba(240, 215, 154, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 42%),
    rgba(18, 9, 22, 0.58);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.cabinet-material-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px;
  border-radius: 24px;
}

.cabinet-card-head {
  grid-template-columns: 1fr;
  gap: 10px;
}

.cabinet-topic {
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
}

.cabinet-date {
  min-height: 26px;
  color: rgba(246, 237, 240, 0.62);
  background: transparent;
  border-color: rgba(240, 215, 154, 0.1);
}

.cabinet-status-free {
  min-height: 34px;
  font-size: 14px;
}

.cabinet-status-premium,
.cabinet-premium-badge {
  min-height: 32px;
  font-size: 14px;
}

.cabinet-material-card p,
.cabinet-benefit-card p,
.cabinet-bottom-cta p,
.cabinet-profile p {
  margin-bottom: 0;
}

.cabinet-material-card > p {
  color: rgba(246, 237, 240, 0.82);
  font-size: 16px;
}

.cabinet-card-button {
  width: 100%;
  margin-top: 2px;
}

.cabinet-material-card > .button-secondary {
  border-color: rgba(240, 215, 154, 0.28);
  color: rgba(246, 237, 240, 0.94);
  background: rgba(255, 255, 255, 0.055);
}

.cabinet-premium-lock {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 18px;
  border: 1px solid rgba(240, 215, 154, 0.26);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8, 5, 12, 0.12), rgba(8, 5, 12, 0.34)),
    radial-gradient(circle at 88% 16%, rgba(217, 173, 98, 0.18), transparent 7rem),
    rgba(8, 5, 12, 0.34);
}

.cabinet-premium-lock strong {
  color: var(--text);
  font-size: 16px;
}

.cabinet-inline-lock {
  position: relative;
  width: 30px;
  height: 25px;
  border: 1px solid rgba(240, 215, 154, 0.42);
  border-radius: 9px;
  background: rgba(217, 173, 98, 0.08);
  box-shadow: 0 0 24px rgba(217, 173, 98, 0.1);
}

.cabinet-inline-lock::before {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 16px;
  height: 13px;
  content: "";
  border: 2px solid rgba(240, 215, 154, 0.55);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  transform: translateX(-50%);
}

.cabinet-material-card-locked {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 42%),
    radial-gradient(circle at 85% 20%, rgba(217, 173, 98, 0.12), transparent 10rem),
    rgba(15, 8, 18, 0.76);
}

.cabinet-benefit-grid {
  grid-template-columns: 1fr;
}

.cabinet-benefit-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  min-height: 190px;
  padding: 22px;
  border-radius: 22px;
}

.cabinet-benefit-card::before {
  display: block;
  width: 38px;
  aspect-ratio: 1;
  margin-bottom: 22px;
  content: "";
  border: 1px solid rgba(240, 215, 154, 0.36);
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 42%, rgba(240, 215, 154, 0.5) 42% 54%, transparent 55%),
    radial-gradient(circle, var(--gold-soft) 0 3px, transparent 4px),
    rgba(217, 173, 98, 0.08);
  box-shadow: 0 0 28px rgba(217, 173, 98, 0.14);
}

.cabinet-benefit-card:nth-child(2)::before {
  border-radius: 13px;
}

.cabinet-benefit-card:nth-child(3)::before {
  background:
    linear-gradient(90deg, rgba(240, 215, 154, 0.5) 0 2px, transparent 2px 8px),
    radial-gradient(circle, var(--gold-soft) 0 3px, transparent 4px),
    rgba(217, 173, 98, 0.08);
}

.cabinet-benefit-card:nth-child(4)::before {
  background:
    radial-gradient(circle at 50% 28%, var(--gold-soft) 0 3px, transparent 4px),
    radial-gradient(circle at 34% 62%, rgba(240, 215, 154, 0.58) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 62%, rgba(240, 215, 154, 0.58) 0 2px, transparent 3px),
    rgba(217, 173, 98, 0.08);
}

.cabinet-benefit-card h3,
.cabinet-locked-card h3 {
  margin-bottom: 10px;
}

.cabinet-benefit-card h3 {
  color: #fff8e6;
  font-size: 22px;
}

.cabinet-benefit-card p {
  color: rgba(246, 237, 240, 0.78);
  font-size: 16px;
}

.cabinet-locked-grid {
  grid-template-columns: 1fr;
}

.cabinet-locked-card {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 250px;
  padding: 22px;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(8, 5, 12, 0.18), rgba(8, 5, 12, 0.76)),
    radial-gradient(circle at 72% 18%, rgba(217, 173, 98, 0.18), transparent 9rem),
    rgba(18, 9, 22, 0.72);
}

.cabinet-locked-card .cabinet-card-button {
  align-self: end;
  margin-top: auto;
}

.cabinet-locked-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 40%);
  pointer-events: none;
}

.cabinet-lock-icon {
  position: relative;
  width: 46px;
  height: 38px;
  margin-top: 6px;
  border: 1px solid rgba(240, 215, 154, 0.46);
  border-radius: 12px;
  background: rgba(217, 173, 98, 0.08);
  box-shadow: 0 0 36px rgba(217, 173, 98, 0.16);
}

.cabinet-lock-icon::before {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 24px;
  height: 20px;
  content: "";
  border: 2px solid rgba(240, 215, 154, 0.5);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  transform: translateX(-50%);
}

.cabinet-bottom-cta {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  padding: 28px;
  border-color: rgba(240, 215, 154, 0.26);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 26%, rgba(217, 173, 98, 0.16), transparent 13rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.86), rgba(13, 6, 16, 0.92));
}

.cabinet-bottom-cta h2 {
  margin-bottom: 12px;
}

.cabinet-cta-list,
.cabinet-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.cabinet-cta-list li,
.cabinet-check-list li {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px 8px 30px;
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 999px;
  color: rgba(246, 237, 240, 0.84);
  background: rgba(255, 255, 255, 0.045);
  font-size: 14px;
  font-weight: 650;
}

.cabinet-cta-list li::before,
.cabinet-check-list li::before {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 16px rgba(240, 215, 154, 0.2);
  transform: translateY(-50%);
}

.cabinet-profile {
  display: grid;
  gap: 22px;
  padding: 26px;
  border-radius: 24px;
}

.cabinet-profile-head {
  display: grid;
  gap: 12px;
  align-content: start;
}

.cabinet-profile-head .eyebrow,
.cabinet-profile-head h2 {
  margin-bottom: 0;
}

.cabinet-user-email-card {
  color: rgba(246, 237, 240, 0.92);
  font-size: 18px;
  font-weight: 760;
}

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

.cabinet-access-grid h3 {
  margin-bottom: 12px;
  color: #fff8e6;
}

.cabinet-check-list {
  display: grid;
  gap: 9px;
  margin-top: 0;
}

.cabinet-check-list li {
  width: fit-content;
  border-radius: 16px;
}

.cabinet-check-list-premium li {
  border-color: rgba(240, 215, 154, 0.24);
  background: rgba(217, 173, 98, 0.08);
}

.cabinet-profile-button {
  width: 100%;
  min-height: 52px;
}

.cabinet-footer .footer-main {
  grid-template-columns: 1fr;
}

.material-main {
  padding-top: 18px;
}

.material-hero {
  position: relative;
  display: grid;
  gap: 22px;
  align-items: center;
  margin-top: 22px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 24%, rgba(217, 173, 98, 0.18), transparent 16rem),
    radial-gradient(circle at 14% 68%, rgba(92, 21, 56, 0.42), transparent 22rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.86), rgba(13, 6, 16, 0.94));
  box-shadow: var(--shadow);
}

.material-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent, rgba(240, 215, 154, 0.1), transparent 62%),
    radial-gradient(circle at 72% 48%, rgba(217, 173, 98, 0.14), transparent 13rem);
}

.material-hero > * {
  position: relative;
  z-index: 1;
}

.material-hero-copy {
  display: grid;
  gap: 16px;
  max-width: 820px;
}

.material-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.material-hero h1 {
  margin-bottom: 0;
  font-size: clamp(38px, 8vw, 68px);
}

.material-hero p {
  max-width: 700px;
  margin-bottom: 0;
  color: #dfd0d9;
  font-size: clamp(17px, 1.35vw, 20px);
}

.material-cover {
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 42%, rgba(217, 173, 98, 0.18), transparent 11rem),
    rgba(8, 5, 12, 0.28);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}

.material-cover-card {
  position: relative;
  width: min(70%, 210px);
  aspect-ratio: 0.68;
  border: 1px solid rgba(240, 215, 154, 0.5);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(240, 215, 154, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(72, 25, 78, 0.95), rgba(18, 7, 22, 0.96));
  box-shadow:
    0 36px 78px rgba(0, 0, 0, 0.48),
    0 0 54px rgba(217, 173, 98, 0.16);
}

.material-cover-card::before {
  position: absolute;
  inset: 14px;
  content: "";
  border: 1px solid rgba(240, 215, 154, 0.24);
  border-radius: 15px;
}

.material-cover-card span {
  position: absolute;
  inset: 28% 28%;
  border: 1px solid rgba(240, 215, 154, 0.48);
  border-radius: 50%;
}

.material-cover-card i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 28px rgba(240, 215, 154, 0.44);
  transform: translate(-50%, -50%);
}

.material-cover-card b {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 42px;
  height: 1px;
  background: rgba(240, 215, 154, 0.48);
  box-shadow: 0 182px 0 rgba(240, 215, 154, 0.24);
  transform: translateX(-50%);
}

.material-layout {
  display: grid;
  gap: 22px;
  align-items: start;
  overflow: visible;
}

.material-reader,
.material-fragment,
.material-premium-block,
.material-aside,
.material-related-card,
.material-bottom-cta {
  border: 1px solid rgba(240, 215, 154, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 42%),
    rgba(18, 9, 22, 0.58);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.material-reader {
  display: grid;
  gap: 20px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.material-fragment,
.material-premium-block {
  padding: 24px;
  border-radius: 24px;
}

.material-fragment {
  display: grid;
  gap: 18px;
}

.material-fragment h2,
.material-premium-block h2,
.material-aside h2 {
  margin-bottom: 0;
}

.material-fragment p:not(.eyebrow),
.material-premium-block > p,
.material-related-card p,
.material-bottom-cta p {
  color: rgba(246, 237, 240, 0.84);
  font-size: 17px;
  line-height: 1.86;
}

.material-fragment p:not(.eyebrow) {
  max-width: 860px;
  margin-bottom: 0;
}

.material-fragment p:last-child,
.material-premium-block > p,
.material-related-card p,
.material-bottom-cta p {
  margin-bottom: 0;
}

.material-premium-block {
  position: relative;
  overflow: hidden;
  border-color: rgba(240, 215, 154, 0.26);
  background:
    radial-gradient(circle at 90% 18%, rgba(217, 173, 98, 0.2), transparent 11rem),
    radial-gradient(circle at 4% 100%, rgba(92, 21, 56, 0.28), transparent 14rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.76), rgba(13, 6, 16, 0.9));
  box-shadow: 0 26px 74px rgba(0, 0, 0, 0.34), 0 0 48px rgba(217, 173, 98, 0.08);
}

.material-premium-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.material-premium-head .cabinet-premium-badge {
  min-height: 36px;
  padding-inline: 14px;
}

.material-premium-head .cabinet-inline-lock {
  width: 34px;
  height: 28px;
}

.material-premium-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 22px 0;
  list-style: none;
}

.material-premium-list li {
  position: relative;
  min-height: 48px;
  padding: 12px 14px 12px 36px;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 16px;
  color: rgba(246, 237, 240, 0.9);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 56%),
    rgba(255, 255, 255, 0.045);
  font-weight: 650;
  line-height: 1.35;
}

.material-premium-list li::before {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 8px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 16px rgba(240, 215, 154, 0.18);
  transform: translateY(-50%);
}

.material-locked-preview {
  position: relative;
  min-height: 142px;
  margin-top: 20px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 18%, rgba(217, 173, 98, 0.12), transparent 10rem),
    rgba(8, 5, 12, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.material-locked-preview::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(8, 5, 12, 0.1), rgba(8, 5, 12, 0.82)),
    radial-gradient(circle at 50% 36%, transparent, rgba(8, 5, 12, 0.42));
  backdrop-filter: blur(4px);
}

.material-locked-preview p {
  margin-bottom: 0;
  color: rgba(246, 237, 240, 0.66);
  font-size: 16px;
  line-height: 1.75;
  filter: blur(1.8px);
  user-select: none;
}

.material-premium-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.material-premium-actions .button,
.material-bottom-cta .button,
.material-aside .button {
  min-height: 52px;
}

.material-aside {
  display: grid;
  gap: 18px;
  align-self: start;
  height: max-content;
  overflow: visible;
  padding: 22px;
  border-radius: 24px;
  z-index: 2;
}

.material-aside dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.material-aside dl div {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(255, 255, 255, 0.035);
}

.material-aside dt {
  color: rgba(246, 237, 240, 0.58);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.material-aside dd {
  margin: 0;
  color: rgba(246, 237, 240, 0.9);
  font-weight: 760;
}

.material-related-grid {
  display: grid;
  gap: var(--cluster-gap);
  align-items: stretch;
}

.material-related-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  align-content: start;
  min-height: 230px;
  padding: 22px;
  border-radius: 24px;
}

.material-related-card h3 {
  color: #fff8e6;
  line-height: 1.12;
}

.material-related-card .cabinet-card-button {
  align-self: end;
  margin-top: auto;
}

.material-bottom-cta {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  padding: 28px;
  border-color: rgba(240, 215, 154, 0.26);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 26%, rgba(217, 173, 98, 0.16), transparent 13rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.86), rgba(13, 6, 16, 0.92));
}

.material-bottom-cta h2 {
  margin-bottom: 12px;
}

.premium-main {
  padding-top: 18px;
}

.premium-hero,
.premium-waitlist,
.premium-bottom-cta,
.premium-plan-card,
.premium-compare-card,
.premium-feature-card,
.premium-faq-grid article {
  border: 1px solid rgba(240, 215, 154, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 42%),
    rgba(18, 9, 22, 0.58);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.premium-hero {
  display: grid;
  gap: 22px;
  overflow: hidden;
  margin-top: 24px;
  padding: 30px 24px;
  border-color: rgba(240, 215, 154, 0.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 20%, rgba(217, 173, 98, 0.18), transparent 15rem),
    radial-gradient(circle at 4% 100%, rgba(92, 21, 56, 0.34), transparent 18rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.84), rgba(13, 6, 16, 0.9));
}

.premium-hero::before {
  position: absolute;
  inset: -28% -10% auto auto;
  width: 360px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 215, 154, 0.22), transparent 66%);
  filter: blur(12px);
  pointer-events: none;
}

.premium-hero > * {
  position: relative;
  z-index: 1;
}

.premium-hero-copy {
  display: grid;
  gap: 18px;
  align-content: center;
}

.premium-hero-copy h1 {
  margin-bottom: 0;
  font-size: clamp(38px, 8vw, 68px);
}

.premium-hero-copy p:not(.eyebrow) {
  max-width: 720px;
  margin-bottom: 0;
  color: rgba(246, 237, 240, 0.86);
  font-size: clamp(17px, 1.35vw, 20px);
}

.premium-hero-actions,
.premium-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.premium-hero-actions .button,
.premium-bottom-actions .button,
.premium-card-button,
.premium-plan-button,
.premium-waitlist-button {
  min-height: 52px;
}

.premium-hero-card {
  position: relative;
  display: grid;
  gap: 18px;
  min-height: 300px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(240, 215, 154, 0.24);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 20%, rgba(240, 215, 154, 0.2), transparent 12rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
    rgba(10, 5, 13, 0.62);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.34), 0 0 54px rgba(217, 173, 98, 0.1);
}

.premium-hero-card::after {
  position: absolute;
  right: -52px;
  bottom: -84px;
  width: 230px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(217, 173, 98, 0.1), 0 0 46px rgba(217, 173, 98, 0.12);
}

.premium-card-label,
.premium-plan-kicker,
.premium-recommend-badge,
.premium-soon-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(240, 215, 154, 0.28);
  border-radius: 999px;
  color: #fff4cf;
  background: rgba(217, 173, 98, 0.12);
  font-size: 13px;
  font-weight: 760;
}

.premium-hero-card h2,
.premium-plan-card h3,
.premium-compare-card h3,
.premium-feature-card h3,
.premium-faq-grid h3 {
  color: #fff8e6;
}

.premium-feature-list,
.premium-check-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.premium-feature-list li,
.premium-check-list li {
  position: relative;
  min-height: 44px;
  padding: 11px 13px 11px 36px;
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 15px;
  color: rgba(246, 237, 240, 0.9);
  background: rgba(255, 255, 255, 0.045);
  font-weight: 650;
  line-height: 1.35;
}

.premium-feature-list li::before,
.premium-check-list li::before {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 8px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 16px rgba(240, 215, 154, 0.2);
  transform: translateY(-50%);
}

.premium-feature-grid,
.premium-compare-grid,
.premium-faq-grid {
  display: grid;
  gap: var(--cluster-gap);
}

.premium-feature-card,
.premium-compare-card,
.premium-faq-grid article {
  padding: 22px;
  border-radius: 24px;
}

.premium-feature-card {
  display: grid;
  gap: 12px;
  min-height: 190px;
}

.premium-feature-card p,
.premium-compare-card p,
.premium-plan-card p,
.premium-waitlist p,
.premium-faq-grid p,
.premium-bottom-cta p {
  margin-bottom: 0;
  color: rgba(246, 237, 240, 0.82);
}

.premium-compare-card {
  display: grid;
  gap: 18px;
  align-content: start;
}

.premium-compare-card-featured {
  position: relative;
  overflow: hidden;
  border-color: rgba(240, 215, 154, 0.34);
  background:
    radial-gradient(circle at 92% 12%, rgba(217, 173, 98, 0.24), transparent 12rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.78), rgba(13, 6, 16, 0.92));
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.34), 0 0 58px rgba(217, 173, 98, 0.1);
}

.premium-recommend-badge {
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.premium-card-button {
  width: 100%;
  margin-top: auto;
}

.premium-plans .section-heading {
  margin-bottom: 24px;
}

.premium-plan-card {
  display: grid;
  gap: 18px;
  max-width: 760px;
  padding: 26px;
  border-color: rgba(240, 215, 154, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 22%, rgba(217, 173, 98, 0.18), transparent 13rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.76), rgba(13, 6, 16, 0.9));
}

.premium-plan-list {
  margin-top: 2px;
}

.premium-price-placeholder {
  display: block;
  padding: 14px 16px;
  border: 1px solid rgba(240, 215, 154, 0.2);
  border-radius: 16px;
  color: rgba(246, 237, 240, 0.9);
  background: rgba(255, 255, 255, 0.045);
  line-height: 1.45;
}

.premium-plan-button {
  width: 100%;
}

.premium-waitlist {
  display: grid;
  gap: 22px;
  padding: 26px;
  border-color: rgba(240, 215, 154, 0.22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 18%, rgba(217, 173, 98, 0.15), transparent 12rem),
    rgba(18, 9, 22, 0.58);
}

.premium-waitlist-copy {
  display: grid;
  gap: 12px;
}

.premium-waitlist-copy h2 {
  margin-bottom: 0;
}

.premium-waitlist-form {
  display: grid;
  gap: 10px;
}

.premium-waitlist-label {
  color: rgba(246, 237, 240, 0.74);
  font-size: 14px;
  font-weight: 650;
}

.premium-waitlist-input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(240, 215, 154, 0.2);
  border-radius: 16px;
  color: var(--text);
  background: rgba(8, 5, 12, 0.5);
  font: inherit;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.premium-waitlist-input::placeholder {
  color: rgba(246, 237, 240, 0.42);
}

.premium-waitlist-input:focus {
  border-color: rgba(240, 215, 154, 0.48);
  background: rgba(8, 5, 12, 0.66);
  box-shadow: 0 0 0 4px rgba(217, 173, 98, 0.1);
}

.premium-waitlist-input.is-invalid {
  border-color: rgba(255, 170, 164, 0.72);
  box-shadow: 0 0 0 4px rgba(255, 120, 120, 0.1);
}

.premium-waitlist-error,
.premium-waitlist-success {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.premium-waitlist-error {
  color: #ffaaa4;
}

.premium-waitlist-success {
  padding: 14px 16px;
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 16px;
  color: rgba(246, 237, 240, 0.88);
  background: rgba(217, 173, 98, 0.08);
}

.premium-faq-grid article {
  display: grid;
  gap: 12px;
}

.premium-bottom-cta {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  padding: 28px;
  border-color: rgba(240, 215, 154, 0.26);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 26%, rgba(217, 173, 98, 0.16), transparent 13rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.86), rgba(13, 6, 16, 0.92));
}

.premium-bottom-cta h2 {
  margin-bottom: 12px;
}

.profile-main {
  padding-top: 18px;
}

.profile-hero,
.profile-summary-card,
.profile-access-card,
.profile-channel-card,
.profile-settings-card,
.profile-bottom-cta {
  border: 1px solid rgba(240, 215, 154, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 42%),
    rgba(18, 9, 22, 0.58);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.profile-hero {
  display: grid;
  gap: 22px;
  overflow: hidden;
  margin-top: 24px;
  padding: 30px 24px;
  border-color: rgba(240, 215, 154, 0.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 86% 18%, rgba(217, 173, 98, 0.16), transparent 14rem),
    radial-gradient(circle at 4% 100%, rgba(92, 21, 56, 0.3), transparent 18rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.78), rgba(13, 6, 16, 0.9));
}

.profile-hero::before {
  position: absolute;
  right: -120px;
  top: -120px;
  width: 300px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 215, 154, 0.22), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.profile-hero > * {
  position: relative;
  z-index: 1;
}

.profile-hero-copy {
  display: grid;
  gap: 18px;
  align-content: center;
}

.profile-hero-copy h1 {
  margin-bottom: 0;
  font-size: clamp(38px, 8vw, 68px);
}

.profile-hero-copy p:not(.eyebrow) {
  max-width: 700px;
  margin-bottom: 0;
  color: rgba(246, 237, 240, 0.86);
  font-size: clamp(17px, 1.35vw, 20px);
}

.profile-summary-card {
  display: grid;
  gap: 18px;
  align-self: stretch;
  padding: 24px;
  border-color: rgba(240, 215, 154, 0.22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 12%, rgba(217, 173, 98, 0.16), transparent 11rem),
    rgba(10, 5, 13, 0.54);
}

.profile-summary-card h2,
.profile-access-card h3,
.profile-channel-card h3,
.profile-settings-card h2,
.profile-bottom-cta h2 {
  color: #fff8e6;
}

.profile-summary-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.profile-summary-list div {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-summary-list dt {
  color: rgba(246, 237, 240, 0.58);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-summary-list dd {
  margin: 0;
  color: rgba(246, 237, 240, 0.9);
  font-weight: 760;
}

.profile-access-card {
  display: grid;
  gap: 22px;
  padding: 24px;
  border-radius: 26px;
}

.profile-access-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.profile-access-head .button,
.profile-bottom-cta .button,
.profile-security-actions .button {
  min-height: 52px;
}

.profile-access-grid,
.profile-settings-layout,
.profile-channel-grid {
  display: grid;
  gap: var(--cluster-gap);
}

.profile-check-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}

.profile-check-list li {
  position: relative;
  min-height: 42px;
  padding: 10px 12px 10px 34px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 14px;
  color: rgba(246, 237, 240, 0.88);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 650;
  line-height: 1.35;
}

.profile-check-list li::before {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: rgba(240, 215, 154, 0.75);
  transform: translateY(-50%);
}

.profile-check-list-premium li::before {
  background: var(--gold-soft);
  box-shadow: 0 0 16px rgba(240, 215, 154, 0.2);
}

.profile-channel-card {
  display: grid;
  gap: 12px;
  min-height: 178px;
  padding: 22px;
  border-radius: 24px;
}

.profile-channel-card-active {
  border-color: rgba(240, 215, 154, 0.34);
  background:
    radial-gradient(circle at 92% 12%, rgba(217, 173, 98, 0.2), transparent 10rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.72), rgba(13, 6, 16, 0.9));
}

.profile-channel-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(240, 215, 154, 0.28);
  border-radius: 999px;
  color: #fff4cf;
  background: rgba(217, 173, 98, 0.12);
  font-size: 13px;
  font-weight: 760;
}

.profile-channel-status-soon {
  color: rgba(246, 237, 240, 0.74);
  background: rgba(255, 255, 255, 0.05);
}

.profile-channel-card p,
.profile-settings-card p,
.profile-bottom-cta p {
  margin-bottom: 0;
  color: rgba(246, 237, 240, 0.82);
}

.profile-settings-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 26px;
}

.profile-checkbox-list {
  display: grid;
  gap: 12px;
}

.profile-checkbox-list label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 215, 154, 0.14);
  border-radius: 16px;
  color: rgba(246, 237, 240, 0.88);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 650;
}

.profile-checkbox-list input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.profile-note {
  font-size: 14px;
}

.profile-security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-security-actions .button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.profile-bottom-cta {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  padding: 28px;
  border-color: rgba(240, 215, 154, 0.26);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 26%, rgba(217, 173, 98, 0.16), transparent 13rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.86), rgba(13, 6, 16, 0.92));
}

@media (min-width: 720px) {
  :root {
    --section-padding-y: 54px;
    --section-gap-sm: 20px;
    --section-gap-md: 44px;
    --section-gap-lg: 72px;
    --section-gap-xl: 92px;
    --section-heading-gap: 36px;
    --cluster-gap: 22px;
  }

  .main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .section {
    padding: var(--section-padding-y) 0;
  }

  .hero {
    grid-template-columns: minmax(0, 0.98fr) minmax(400px, 1.02fr);
    gap: 34px;
    padding-bottom: 8px;
  }

  .benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-featured {
    grid-column: span 1;
  }

  .steps {
    grid-template-columns: 0.95fr 1.05fr 1.16fr;
  }

  .topic-layout {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    align-items: stretch;
  }

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

  .topic-preview {
    order: 1;
  }

  .topic-controls {
    order: 2;
  }

  #topics {
    padding-bottom: 34px;
  }

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

  .preview-body {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.48fr);
    align-items: start;
  }

  .preview-visual {
    position: relative;
    top: -72px;
  }

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

  .final-cta {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
    align-items: center;
    padding: 44px;
    column-gap: 30px;
  }

  .final-cta-copy {
    gap: 18px;
  }

  .final-cta-trust {
    max-width: 720px;
  }

  .final-cta-visual {
    justify-self: end;
    width: min(100%, 420px);
  }

  .final-cta-button {
    justify-self: start;
  }

  .footer-main {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 0.72fr) minmax(0, 0.72fr);
    align-items: start;
    gap: 28px 40px;
  }

  .cabinet-premium-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.64fr);
    padding: 38px;
  }

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

  .cabinet-benefit-grid,
  .cabinet-locked-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabinet-card-head {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .cabinet-bottom-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 34px;
  }

  .cabinet-bottom-cta .button {
    min-width: 230px;
  }

  .cabinet-footer .footer-main {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 0.62fr);
  }

  .cabinet-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabinet-profile {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-items: start;
  }

  .cabinet-profile-button {
    grid-column: 1 / -1;
    width: fit-content;
    min-width: 230px;
  }

  .material-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.58fr);
    padding: 38px;
  }

  .material-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
  }

  .material-aside {
    position: sticky;
    top: 120px;
  }

  .material-premium-list,
  .material-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-bottom-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 34px;
  }

  .material-bottom-cta .button {
    min-width: 230px;
  }

  .premium-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.64fr);
    padding: 38px;
  }

  .premium-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .premium-compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .premium-waitlist {
    grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.64fr);
    align-items: center;
    padding: 34px;
  }

  .premium-bottom-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 34px;
  }

  .premium-bottom-actions {
    justify-content: flex-end;
  }

  .premium-bottom-actions .button {
    min-width: 210px;
  }

  .profile-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.64fr);
    padding: 38px;
  }

  .profile-access-grid,
  .profile-settings-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-bottom-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 34px;
  }

  .profile-bottom-cta .button {
    min-width: 230px;
  }
}

@media (min-width: 720px) and (max-width: 1119px) {
  .cabinet-header .cabinet-access-badge {
    display: none;
  }

  .cabinet-header-action {
    padding-inline: 18px;
  }
}

@media (min-width: 1120px) {
  :root {
    --section-padding-y: 60px;
    --section-gap-sm: 24px;
    --section-gap-md: 54px;
    --section-gap-lg: 84px;
    --section-gap-xl: 108px;
    --section-heading-gap: 40px;
    --cluster-gap: 24px;
  }

  .site-header,
  .section,
  .site-footer {
    width: min(1440px, calc(100% - 64px));
  }

  .hero {
    grid-template-columns: minmax(520px, 0.98fr) minmax(520px, 1.02fr);
  }

  .hero-art,
  .hero-art-fallback {
    min-height: 620px;
  }

  .hero-art-image {
    width: min(96%, 690px);
    height: min(96%, 690px);
  }

  .hero-art {
    margin-right: -6px;
  }

  .card {
    width: 178px;
    height: 276px;
    border-radius: 22px;
  }

  .card span {
    inset: 70px 45px;
  }

  .card i {
    inset: 116px 81px;
  }

  .glow {
    width: 460px;
  }

  .orbit {
    inset: 54px;
  }

  .orbit-two {
    inset: 116px 36px;
  }

  .benefit-grid,
  .steps {
    gap: 20px;
  }

  .panel-featured {
    transform: none;
  }

  .preview-card {
    padding: 38px 38px 30px;
  }

  .preview-text {
    max-width: 850px;
  }

  .preview-card-image {
    width: min(100%, 390px);
  }

  .cabinet-page .site-header,
  .cabinet-page .section,
  .cabinet-page .site-footer {
    width: min(1440px, calc(100% - 64px));
  }

  .cabinet-user-email {
    display: inline-flex;
  }

  .cabinet-profile {
    grid-template-columns: minmax(280px, 0.48fr) minmax(0, 1fr) auto;
    align-items: center;
  }

  .cabinet-profile-button {
    grid-column: auto;
    width: max-content;
  }

  .material-layout {
    grid-template-columns: minmax(0, 0.72fr) minmax(300px, 0.28fr);
  }

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

  .cabinet-benefit-grid,
  .cabinet-locked-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .premium-plan-card {
    margin-inline: auto;
  }

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

@media (max-width: 430px) {
  :root {
    --section-padding-y: 36px;
    --section-gap-sm: 8px;
    --section-gap-md: 18px;
    --section-gap-lg: 30px;
    --section-gap-xl: 38px;
    --section-heading-gap: 24px;
    --cluster-gap: 14px;
  }

  .site-header,
  .section,
  .site-footer {
    width: min(100% - 20px, 1320px);
  }

  .site-header {
    min-height: 64px;
    padding: 8px 10px;
    border-radius: 20px;
    margin-top: 8px;
  }

  .brand {
    gap: 8px;
    font-size: 16px;
  }

  .brand-mark {
    width: 24px;
  }

  .header-action {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 14px;
  }

  .section {
    padding: var(--section-padding-y) 0;
  }

  .hero {
    min-height: auto;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 4px;
  }

  h1 {
    margin-bottom: 16px;
    font-size: clamp(36px, 10.5vw, 42px);
    line-height: 1.04;
  }

  h2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .hero-text {
    margin-bottom: 24px;
    font-size: 17px;
    line-height: 1.65;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 54px;
    padding-inline: 18px;
  }

  .hero-note {
    margin-top: 14px;
    font-size: 14px;
  }

  .hero-art,
  .hero-art-fallback {
    min-height: 360px;
    overflow: hidden;
  }

  .hero-art-image {
    width: min(108%, 410px);
    height: min(108%, 410px);
  }

  .hero-art-badge {
    left: 5%;
    bottom: 8%;
    max-width: 86%;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .hero-art-badge span:first-child {
    font-size: 12px;
  }

  .hero-art-badge span:last-child {
    font-size: 11px;
  }

  .card {
    width: 106px;
    height: 166px;
  }

  .card span {
    inset: 42px 27px;
  }

  .card i {
    inset: 69px 47px;
  }

  .benefit-grid,
  .steps {
    gap: 12px;
  }

  .benefit-grid .panel:not(.panel-featured),
  .step:nth-child(2),
  .step:nth-child(3),
  .panel-featured {
    margin-top: 0;
    transform: none;
  }

  .panel,
  .step {
    min-height: 128px;
    padding: 20px;
    border-radius: 18px;
  }

  .panel-image {
    height: 132px;
    margin-bottom: 16px;
    border-radius: 16px;
  }

  .panel-image .panel-number {
    left: 10px;
    top: 10px;
    width: 36px;
    font-size: 12px;
  }

  .panel-featured {
    min-height: 132px;
  }

  .panel-number,
  .step span {
    width: 34px;
    margin-bottom: 20px;
  }

  .panel p,
  .step p,
  .trust-grid p {
    font-size: 15px;
    line-height: 1.58;
  }

  .audience-item {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 12px;
    padding: 18px;
    border-radius: 18px;
    font-size: 15px;
  }

  .audience-item::before {
    width: 12px;
    margin-top: 4px;
  }

  .step-badge {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .preview-card,
  .trust-content {
    padding: 22px;
    border-radius: 22px;
  }

  .preview-text {
    padding: 18px;
  }

  .preview-text p {
    font-size: 16px;
    line-height: 1.68;
  }

  .preview-note {
    font-size: 15px;
  }

  .preview-closed {
    min-height: 32px;
    font-size: 12px;
  }

  .preview-body {
    gap: 16px;
  }

  .preview-visual {
    top: auto;
    padding: 14px;
    border-radius: 20px;
  }

  .preview-card-image {
    width: min(82%, 258px);
    border-radius: 20px;
  }

  .preview-card-caption {
    width: 100%;
    padding: 14px;
  }

  .preview-card-caption p {
    font-size: 14px;
  }

  .topic-button {
    min-height: 56px;
    padding: 16px 18px;
  }

  .topic-preview {
    order: 2;
    gap: 14px;
    padding: 0;
    border-radius: 22px;
  }

  .topic-preview-visual {
    height: 240px;
    min-height: 0;
    border-radius: 22px 22px 0 0;
  }

  .topic-preview-content {
    padding: 18px;
  }

  .topic-list {
    order: initial;
  }

  .topic-controls {
    order: 1;
  }

  .topic-preview-content p {
    margin-bottom: 14px;
    font-size: 15px;
  }

  .topic-cta {
    width: 100%;
    margin-top: 0;
  }

  .ambient-particles {
    height: 22vh;
  }

  .ambient-particles::before {
    bottom: -9vh;
    width: 118vw;
    height: 20vh;
    opacity: 0.58;
  }

  .particles-canvas {
    opacity: 0.48;
  }

  .trust-grid article {
    padding: 18px;
  }

  .trust-disclaimer {
    padding: 16px;
    font-size: 14px;
  }

  .faq-list article {
    padding: 18px;
  }

  .faq-list p {
    font-size: 15px;
  }

  .final-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    padding: 26px 24px 32px;
    border-radius: 24px;
  }

  .final-cta-copy {
    gap: 14px;
  }

  .final-cta-trust {
    gap: 8px;
  }

  .final-cta-trust li {
    min-height: 32px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .final-cta-button {
    width: 100%;
    min-height: 54px;
    min-width: 0;
  }

  .final-cta-visual {
    min-height: 212px;
    width: min(100%, 300px);
    justify-self: center;
  }

  .final-cta-card {
    width: min(100%, 244px);
    height: 162px;
  }

  .final-cta-card-back {
    transform: translate(-34px, 16px) rotate(-8deg);
  }

  .final-cta-card-mid {
    transform: translate(-16px, 8px) rotate(-4deg);
  }

  .final-cta-card-front {
    padding: 16px;
  }

  .final-cta-tag {
    min-height: 28px;
    font-size: 12px;
  }

  .site-footer {
    gap: 18px;
    padding: 28px 0 34px;
    font-size: 15px;
  }

  .footer-main {
    gap: 18px;
  }

  .footer-brand {
    max-width: none;
  }

  .footer-badges {
    gap: 8px;
    margin-top: 14px;
  }

  .footer-badges span {
    min-height: 32px;
    font-size: 12px;
  }

  .footer-column {
    gap: 12px;
  }

  .footer-heading {
    font-size: 13px;
  }

  .footer-nav {
    gap: 12px;
  }

  .footer-nav a {
    padding-left: 13px;
  }

  .footer-nav a::before {
    width: 5px;
    height: 5px;
  }

  .footer-brand p,
  .footer-disclaimer {
    font-size: 15px;
  }

  .footer-disclaimer {
    padding-top: 16px;
  }

  .cabinet-header {
    align-items: stretch;
    border-radius: 22px;
  }

  .cabinet-header .brand {
    align-self: center;
  }

  .cabinet-user {
    justify-content: flex-end;
    gap: 8px;
  }

  .cabinet-access-badge {
    display: none;
  }

  .cabinet-header-action {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .cabinet-main {
    padding-top: 8px;
  }

  .cabinet-premium-hero {
    gap: 18px;
    margin-top: 16px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .cabinet-premium-copy {
    gap: 14px;
  }

  .cabinet-premium-copy h1 {
    font-size: clamp(34px, 10vw, 40px);
  }

  .cabinet-hero-actions .button,
  .cabinet-bottom-cta .button,
  .cabinet-card-button {
    width: 100%;
    min-height: 52px;
  }

  .cabinet-premium-card,
  .cabinet-material-card,
  .cabinet-benefit-card,
  .cabinet-locked-card,
  .cabinet-profile {
    border-radius: 20px;
  }

  .cabinet-premium-card {
    min-height: 230px;
    padding: 20px;
  }

  .cabinet-material-card,
  .cabinet-benefit-card,
  .cabinet-locked-card {
    padding: 18px;
  }

  .cabinet-card-head {
    gap: 8px;
  }

  .cabinet-bottom-cta {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .material-main {
    padding-top: 8px;
  }

  .material-hero {
    gap: 18px;
    margin-top: 16px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .material-hero h1 {
    font-size: clamp(34px, 10vw, 40px);
  }

  .material-cover {
    min-height: 230px;
    border-radius: 20px;
  }

  .material-cover-card {
    width: min(64%, 170px);
  }

  .material-fragment,
  .material-premium-block,
  .material-aside,
  .material-related-card {
    padding: 18px;
    border-radius: 20px;
  }

  .material-fragment p:not(.eyebrow),
  .material-premium-block > p,
  .material-related-card p,
  .material-bottom-cta p {
    font-size: 16px;
    line-height: 1.7;
  }

  .material-premium-actions .button,
  .material-bottom-cta .button,
  .material-aside .button {
    width: 100%;
    min-height: 52px;
  }

  .material-bottom-cta {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .cabinet-cta-list,
  .cabinet-check-list {
    gap: 8px;
  }

  .cabinet-cta-list li,
  .cabinet-check-list li {
    min-height: 34px;
    font-size: 13px;
  }

  .premium-main {
    padding-top: 8px;
  }

  .premium-hero {
    gap: 18px;
    margin-top: 16px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .premium-hero-copy {
    gap: 14px;
  }

  .premium-hero-copy h1 {
    font-size: clamp(34px, 10vw, 40px);
  }

  .premium-hero-actions .button,
  .premium-bottom-actions .button,
  .premium-card-button,
  .premium-plan-button,
  .premium-waitlist-button {
    width: 100%;
    min-height: 52px;
  }

  .premium-hero-card,
  .premium-feature-card,
  .premium-compare-card,
  .premium-plan-card,
  .premium-waitlist,
  .premium-faq-grid article {
    padding: 18px;
    border-radius: 20px;
  }

  .premium-hero-card {
    min-height: 250px;
  }

  .premium-feature-list li,
  .premium-check-list li {
    min-height: 42px;
    font-size: 14px;
  }

  .premium-bottom-cta {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .profile-main {
    padding-top: 8px;
  }

  .profile-hero {
    gap: 18px;
    margin-top: 16px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .profile-hero-copy {
    gap: 14px;
  }

  .profile-hero-copy h1 {
    font-size: clamp(34px, 10vw, 40px);
  }

  .profile-summary-card,
  .profile-access-card,
  .profile-channel-card,
  .profile-settings-card {
    padding: 18px;
    border-radius: 20px;
  }

  .profile-access-head .button,
  .profile-bottom-cta .button,
  .profile-security-actions .button {
    width: 100%;
    min-height: 52px;
  }

  .profile-check-list li,
  .profile-checkbox-list label {
    font-size: 14px;
  }

  .profile-bottom-cta {
    padding: 24px 20px;
    border-radius: 24px;
  }
}

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

  .ambient-particles span {
    display: none;
  }

  .ambient-particles::before {
    opacity: 0.45;
  }

  .landing-page .topic-preview-visual img,
  .landing-page .topic-preview-content {
    transition: none;
    animation: none;
    transform: none;
  }
}

/* Cabinet dashboard redesign */
.cabinet-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 4%, rgba(92, 21, 56, 0.42), transparent 34rem),
    radial-gradient(circle at 86% 16%, rgba(43, 23, 70, 0.46), transparent 32rem),
    radial-gradient(circle at 58% 72%, rgba(217, 173, 98, 0.08), transparent 32rem),
    linear-gradient(180deg, #07040b 0%, #120716 48%, #07040b 100%);
}

.cabinet-page .particles-canvas {
  opacity: 0.34;
}

.cabinet-page .ambient-particles {
  z-index: 0;
}

.cabinet-shell {
  position: relative;
  z-index: 20;
  display: grid;
  min-height: 100vh;
  width: 100%;
}

.cabinet-sidebar {
  display: grid;
  gap: 24px;
  align-content: start;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(240, 215, 154, 0.12);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.055), transparent 34%),
    rgba(14, 7, 18, 0.82);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
}

.cabinet-sidebar-head {
  display: grid;
  gap: 10px;
  padding: 6px 2px 18px;
  border-bottom: 1px solid rgba(240, 215, 154, 0.12);
}

.cabinet-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-size: 20px;
  font-weight: 780;
}

.cabinet-brand-mark {
  width: 34px;
  aspect-ratio: 1;
  border: 1px solid rgba(240, 215, 154, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold-soft) 0 3px, transparent 4px),
    linear-gradient(135deg, rgba(217, 173, 98, 0.22), rgba(92, 21, 56, 0.46));
  box-shadow: 0 0 30px rgba(217, 173, 98, 0.2);
}

.cabinet-sidebar-head p,
.cabinet-next-card p,
.cabinet-library-card p,
.cabinet-history-item p {
  margin-bottom: 0;
}

.cabinet-sidebar-head p {
  color: rgba(246, 237, 240, 0.68);
  font-size: 14px;
}

.cabinet-step-badge,
.cabinet-label,
.cabinet-status,
.cabinet-filter,
.cabinet-meta-list span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(240, 215, 154, 0.2);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(217, 173, 98, 0.08);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.1;
}

.cabinet-sidebar-nav,
.cabinet-sidebar-bottom {
  display: grid;
  gap: 8px;
}

.cabinet-nav-link,
.cabinet-premium-link {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgba(246, 237, 240, 0.76);
  font-size: 15px;
  font-weight: 680;
  overflow-wrap: anywhere;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.cabinet-nav-link:hover,
.cabinet-nav-link-active,
.cabinet-premium-link:hover {
  border-color: rgba(240, 215, 154, 0.18);
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
}

.cabinet-premium-link {
  justify-content: center;
  border-color: rgba(240, 215, 154, 0.34);
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 16px 42px rgba(217, 173, 98, 0.16);
}

.cabinet-workspace {
  min-width: 0;
}

.cabinet-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(240, 215, 154, 0.1);
  background: rgba(7, 4, 11, 0.74);
  backdrop-filter: blur(18px);
}

.cabinet-kicker {
  margin: 0 0 7px;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cabinet-topbar h1,
.cabinet-section-head h2,
.cabinet-current-card h2,
.cabinet-next-card h2,
.cabinet-profile-card h2 {
  margin: 0;
  line-height: 1.08;
}

.cabinet-topbar h1 {
  font-size: clamp(26px, 5vw, 42px);
}

.cabinet-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.cabinet-icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 50%;
  cursor: default;
  background: rgba(255, 255, 255, 0.045);
}

.cabinet-icon-button::before,
.cabinet-icon-button::after {
  position: absolute;
  content: "";
}

.cabinet-icon-search::before {
  left: 13px;
  top: 12px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(240, 215, 154, 0.78);
  border-radius: 50%;
}

.cabinet-icon-search::after {
  left: 25px;
  top: 25px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(240, 215, 154, 0.78);
  transform: rotate(45deg);
}

.cabinet-icon-bell::before {
  left: 14px;
  top: 11px;
  width: 13px;
  height: 15px;
  border: 2px solid rgba(240, 215, 154, 0.78);
  border-bottom: 0;
  border-radius: 11px 11px 4px 4px;
}

.cabinet-icon-bell::after {
  left: 18px;
  top: 28px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(240, 215, 154, 0.78);
}

.cabinet-main {
  display: grid;
  gap: 24px;
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: 22px 0 34px;
}

.cabinet-progress-section,
.cabinet-current-card,
.cabinet-next-card,
.cabinet-library-card,
.cabinet-history-list,
.cabinet-profile-card {
  border: 1px solid rgba(240, 215, 154, 0.15);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.052), transparent 42%),
    rgba(18, 9, 22, 0.66);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
}

.cabinet-progress-section,
.cabinet-profile-card {
  padding: 22px;
  border-radius: 24px;
}

.cabinet-section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cabinet-section-head-inline {
  flex-direction: row;
  align-items: end;
  margin-bottom: 18px;
}

.cabinet-section-head h2,
.cabinet-current-card h2,
.cabinet-next-card h2,
.cabinet-profile-card h2 {
  font-size: clamp(26px, 4vw, 38px);
}

.cabinet-section-head-inline > span {
  color: rgba(246, 237, 240, 0.7);
  font-weight: 760;
}

.cabinet-progress-path {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  overflow: hidden;
}

.cabinet-progress-path::before,
.cabinet-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.cabinet-progress-path::before {
  right: 0;
  content: "";
  background: rgba(255, 255, 255, 0.08);
}

.cabinet-progress-fill {
  z-index: 1;
  width: 30%;
  background: linear-gradient(90deg, rgba(217, 173, 98, 0.34), var(--gold-soft));
  box-shadow: 0 0 22px rgba(217, 173, 98, 0.24);
}

.cabinet-progress-dot {
  position: relative;
  z-index: 2;
  width: 14px;
  aspect-ratio: 1;
  border: 3px solid #0b0610;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.cabinet-progress-dot-done,
.cabinet-progress-dot-current {
  background: var(--gold);
  box-shadow: 0 0 18px rgba(217, 173, 98, 0.5);
}

.cabinet-progress-dot-current {
  width: 18px;
  background: var(--gold-soft);
}

.cabinet-dashboard-grid,
.cabinet-library-grid {
  display: grid;
  gap: 18px;
}

.cabinet-current-card {
  position: relative;
  display: grid;
  gap: 22px;
  min-height: 430px;
  padding: 24px;
  overflow: hidden;
  border-color: rgba(240, 215, 154, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 20%, rgba(217, 173, 98, 0.16), transparent 16rem),
    radial-gradient(circle at 12% 80%, rgba(92, 21, 56, 0.46), transparent 22rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.88), rgba(13, 6, 16, 0.94));
}

.cabinet-current-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  align-content: end;
  max-width: 640px;
}

.cabinet-current-card p {
  max-width: 600px;
  margin-bottom: 0;
  color: rgba(246, 237, 240, 0.84);
  font-size: 17px;
}

.cabinet-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cabinet-meta-list span {
  color: rgba(246, 237, 240, 0.82);
  background: rgba(255, 255, 255, 0.055);
}

.cabinet-action {
  width: fit-content;
  min-height: 52px;
}

.cabinet-current-visual {
  position: absolute;
  right: clamp(16px, 5vw, 58px);
  top: 50%;
  width: min(34%, 260px);
  min-width: 150px;
  aspect-ratio: 0.68;
  border: 1px solid rgba(240, 215, 154, 0.42);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 215, 154, 0.24), transparent 28%),
    radial-gradient(circle at 50% 48%, rgba(92, 21, 56, 0.36), transparent 54%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(72, 25, 78, 0.94), rgba(14, 7, 18, 0.96));
  box-shadow: 0 38px 78px rgba(0, 0, 0, 0.46), 0 0 58px rgba(217, 173, 98, 0.14);
  transform: translateY(-50%) rotate(4deg);
}

.cabinet-current-visual::before,
.cabinet-current-visual::after,
.cabinet-current-visual span {
  position: absolute;
  content: "";
}

.cabinet-current-visual::before {
  inset: 16px;
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 16px;
}

.cabinet-current-visual::after {
  left: 50%;
  top: 18%;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid rgba(240, 215, 154, 0.4);
  border-radius: 50%;
  box-shadow: inset -14px 0 0 rgba(240, 215, 154, 0.32);
  transform: translateX(-50%);
}

.cabinet-current-visual span {
  left: 50%;
  bottom: 24%;
  width: 40%;
  height: 1px;
  background: rgba(240, 215, 154, 0.46);
  box-shadow: 0 18px 0 rgba(240, 215, 154, 0.2), 0 36px 0 rgba(240, 215, 154, 0.14);
  transform: translateX(-50%);
}

.cabinet-next-card {
  display: grid;
  gap: 16px;
  align-content: center;
  min-height: 320px;
  padding: 24px;
  border-radius: 24px;
  color: rgba(246, 237, 240, 0.68);
}

.cabinet-label-muted {
  color: rgba(246, 237, 240, 0.6);
  background: rgba(255, 255, 255, 0.045);
}

.cabinet-lock-mark {
  position: relative;
  width: 54px;
  height: 44px;
  margin-top: 8px;
  border: 1px solid rgba(240, 215, 154, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.cabinet-lock-mark::before {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 28px;
  height: 22px;
  content: "";
  border: 2px solid rgba(240, 215, 154, 0.34);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  transform: translateX(-50%);
}

.cabinet-next-card .button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cabinet-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cabinet-filter {
  color: rgba(246, 237, 240, 0.74);
  background: rgba(255, 255, 255, 0.045);
}

.cabinet-filter-active {
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.cabinet-library-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
}

.cabinet-card-art {
  min-height: 150px;
  background:
    radial-gradient(circle at 68% 32%, rgba(240, 215, 154, 0.28), transparent 7rem),
    radial-gradient(circle at 28% 80%, rgba(92, 21, 56, 0.5), transparent 9rem),
    linear-gradient(135deg, rgba(43, 23, 70, 0.76), rgba(14, 7, 18, 0.96));
}

.cabinet-card-art-boundaries {
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(240, 215, 154, 0.18) 28% 30%, transparent 30% 58%, rgba(255, 255, 255, 0.08) 58% 60%, transparent 60%),
    radial-gradient(circle at 74% 28%, rgba(180, 118, 156, 0.24), transparent 8rem),
    linear-gradient(135deg, rgba(43, 23, 70, 0.84), rgba(14, 7, 18, 0.96));
}

.cabinet-card-art-premium {
  filter: saturate(0.8);
  background:
    radial-gradient(circle at 50% 44%, rgba(240, 215, 154, 0.24), transparent 5rem),
    repeating-linear-gradient(45deg, rgba(240, 215, 154, 0.16) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, rgba(92, 21, 56, 0.56), rgba(14, 7, 18, 0.96));
}

.cabinet-library-card-premium {
  border-color: rgba(240, 215, 154, 0.28);
}

.cabinet-library-body {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.cabinet-library-body h3,
.cabinet-history-item h3 {
  margin: 0;
  line-height: 1.2;
}

.cabinet-library-body h3 {
  color: #fff8e6;
  font-size: 22px;
}

.cabinet-status-available {
  border-color: rgba(240, 215, 154, 0.24);
  color: var(--gold-soft);
}

.cabinet-status-premium {
  border-color: rgba(240, 215, 154, 0.34);
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.cabinet-card-link {
  color: var(--gold-soft);
  font-weight: 780;
}

.cabinet-history-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 22px;
}

.cabinet-history-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
}

.cabinet-history-item + .cabinet-history-item {
  border-top: 1px solid rgba(240, 215, 154, 0.1);
}

.cabinet-history-mark {
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle, var(--gold-soft) 0 3px, transparent 4px),
    rgba(217, 173, 98, 0.08);
}

.cabinet-profile-card {
  display: grid;
  gap: 18px;
  align-items: center;
}

.cabinet-profile-data {
  display: grid;
  gap: 12px;
  margin: 0;
}

.cabinet-profile-data div {
  display: grid;
  gap: 4px;
}

.cabinet-profile-data dt {
  color: rgba(246, 237, 240, 0.56);
  font-size: 13px;
}

.cabinet-profile-data dd {
  margin: 0;
  color: rgba(246, 237, 240, 0.92);
  font-weight: 740;
}

.cabinet-profile-button {
  width: fit-content;
}

.cabinet-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: space-between;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 10px 0 26px;
  color: rgba(246, 237, 240, 0.58);
  font-size: 13px;
}

.cabinet-footer span {
  color: var(--gold-soft);
  font-weight: 780;
}

.cabinet-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

@media (min-width: 760px) {
  .cabinet-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .cabinet-sidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
    border-width: 0 1px 0 0;
  }

  .cabinet-sidebar-bottom {
    align-self: end;
    margin-top: min(18vh, 150px);
    padding-top: 16px;
    border-top: 1px solid rgba(240, 215, 154, 0.1);
  }

  .cabinet-main {
    width: min(1180px, calc(100% - 48px));
    padding-top: 28px;
  }

  .cabinet-profile-card {
    grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr) auto;
  }

  .cabinet-profile-data {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cabinet-footer {
    width: min(1180px, calc(100% - 48px));
  }
}

@media (min-width: 1200px) {
  .cabinet-shell {
    grid-template-columns: 276px minmax(0, 1fr);
  }

  .cabinet-topbar {
    padding-inline: 28px;
  }

  .cabinet-main {
    gap: 28px;
    padding-top: 32px;
  }

  .cabinet-dashboard-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.72fr);
  }

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

  .cabinet-current-card {
    min-height: 470px;
    padding: 34px;
  }

  .cabinet-current-card h2 {
    font-size: 50px;
  }
}

@media (max-width: 759px) {
  .cabinet-shell {
    gap: 0;
  }

  .cabinet-sidebar {
    position: relative;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 10px;
    border-radius: 24px;
  }

  .cabinet-sidebar-head {
    padding-bottom: 14px;
  }

  .cabinet-sidebar-nav,
  .cabinet-sidebar-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabinet-nav-link,
  .cabinet-premium-link {
    justify-content: center;
    min-height: 42px;
    padding-inline: 10px;
    text-align: center;
  }

  .cabinet-topbar {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: 16px;
  }

  .cabinet-topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .cabinet-icon-button {
    display: none;
  }

  .cabinet-main {
    width: min(100% - 20px, 1180px);
    gap: 18px;
    padding-top: 14px;
  }

  .cabinet-progress-section,
  .cabinet-current-card,
  .cabinet-next-card,
  .cabinet-profile-card {
    border-radius: 22px;
  }

  .cabinet-current-card {
    min-height: 0;
    padding: 22px;
  }

  .cabinet-current-copy {
    max-width: none;
    padding-top: 150px;
  }

  .cabinet-current-visual {
    left: 50%;
    right: auto;
    top: 96px;
    width: 116px;
    min-width: 116px;
    transform: translateX(-50%) translateY(-50%) rotate(3deg);
  }

  .cabinet-action,
  .cabinet-profile-button {
    width: 100%;
  }

  .cabinet-filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .cabinet-filter {
    flex: 0 0 auto;
  }

  .cabinet-footer {
    width: min(100% - 20px, 1180px);
  }
}

@media (max-width: 600px) {
  .cabinet-sidebar {
    margin-inline: 10px;
    padding: 14px;
  }

  .cabinet-sidebar-nav,
  .cabinet-sidebar-bottom {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .cabinet-nav-link,
  .cabinet-premium-link {
    min-height: 40px;
    font-size: 13px;
  }

  .cabinet-topbar {
    gap: 10px;
  }

  .cabinet-topbar h1 {
    font-size: 27px;
  }

  .cabinet-step-badge-compact {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 12px;
    white-space: nowrap;
  }

  .cabinet-section-head-inline {
    align-items: start;
  }

  .cabinet-progress-section,
  .cabinet-current-card,
  .cabinet-next-card,
  .cabinet-profile-card {
    padding: 18px;
  }

  .cabinet-current-card h2,
  .cabinet-section-head h2,
  .cabinet-next-card h2,
  .cabinet-profile-card h2 {
    font-size: 28px;
  }

  .cabinet-library-body {
    padding: 18px;
  }

  .cabinet-footer {
    padding-bottom: 22px;
  }
}

/* Cabinet second pass: product-led dashboard polish */
.cabinet-sidebar {
  gap: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 34%),
    rgba(13, 7, 17, 0.82);
  box-shadow: 14px 0 52px rgba(0, 0, 0, 0.24);
}

.cabinet-sidebar-head {
  gap: 8px;
  padding-bottom: 22px;
}

.cabinet-brand-mark {
  box-shadow: 0 0 18px rgba(217, 173, 98, 0.16);
}

.cabinet-nav-link {
  position: relative;
  border-color: transparent;
  background: transparent;
}

.cabinet-nav-link-active {
  border-color: rgba(240, 215, 154, 0.12);
  background:
    linear-gradient(90deg, rgba(217, 173, 98, 0.14), rgba(255, 255, 255, 0.035));
}

.cabinet-nav-link-active::before {
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  content: "";
  border-radius: 999px;
  background: var(--gold-soft);
  box-shadow: 0 0 16px rgba(240, 215, 154, 0.22);
}

.cabinet-premium-link {
  min-height: 44px;
  box-shadow: 0 12px 30px rgba(217, 173, 98, 0.12);
}

.cabinet-topbar {
  min-height: 92px;
  border-bottom-color: rgba(240, 215, 154, 0.08);
  background: rgba(7, 4, 11, 0.68);
}

.cabinet-icon-button {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.035);
}

.cabinet-main {
  gap: 30px;
}

.cabinet-progress-section {
  display: grid;
  gap: 14px;
  padding: 4px 22px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.cabinet-progress-title {
  margin: 0;
  color: rgba(246, 237, 240, 0.88);
  font-size: 17px;
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
}

.cabinet-progress-path {
  min-height: 30px;
}

.cabinet-progress-path::before,
.cabinet-progress-fill {
  height: 3px;
}

.cabinet-progress-path::before {
  background: rgba(255, 255, 255, 0.075);
}

.cabinet-progress-fill {
  background: linear-gradient(90deg, rgba(217, 173, 98, 0.42), rgba(240, 215, 154, 0.9));
  box-shadow: 0 0 14px rgba(217, 173, 98, 0.16);
}

.cabinet-progress-dot {
  width: 11px;
  border-width: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.cabinet-progress-dot-current {
  width: 15px;
  box-shadow: 0 0 18px rgba(240, 215, 154, 0.54);
}

.cabinet-current-card {
  min-height: 420px;
  border-color: rgba(240, 215, 154, 0.18);
  background:
    radial-gradient(circle at 78% 28%, rgba(217, 173, 98, 0.1), transparent 14rem),
    radial-gradient(circle at 14% 72%, rgba(92, 21, 56, 0.34), transparent 20rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.78), rgba(13, 6, 16, 0.92));
  box-shadow: 0 22px 68px rgba(0, 0, 0, 0.3);
}

.cabinet-current-copy {
  gap: 15px;
}

.cabinet-label {
  min-height: 28px;
  padding: 6px 11px;
  border-color: rgba(240, 215, 154, 0.18);
  background: rgba(217, 173, 98, 0.07);
  font-size: 12px;
}

.cabinet-current-card p {
  color: rgba(246, 237, 240, 0.88);
}

.cabinet-meta-list {
  gap: 7px;
}

.cabinet-meta-list span,
.cabinet-status,
.cabinet-filter {
  min-height: 28px;
  padding: 6px 10px;
  font-size: 12px;
}

.cabinet-action {
  min-height: 50px;
}

.cabinet-current-visual {
  opacity: 0.78;
  box-shadow: 0 30px 68px rgba(0, 0, 0, 0.38), 0 0 36px rgba(217, 173, 98, 0.08);
}

.cabinet-next-card {
  min-height: 300px;
  border-color: rgba(240, 215, 154, 0.11);
  background:
    radial-gradient(circle at 74% 14%, rgba(217, 173, 98, 0.055), transparent 9rem),
    rgba(18, 9, 22, 0.5);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.cabinet-lock-mark {
  width: 48px;
  height: 39px;
  border-color: rgba(240, 215, 154, 0.2);
}

.cabinet-lock-mark::before {
  bottom: 30px;
  width: 24px;
  height: 19px;
  border-color: rgba(240, 215, 154, 0.26);
}

.cabinet-library-card {
  border-color: rgba(240, 215, 154, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.038), transparent 42%),
    rgba(18, 9, 22, 0.56);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
}

.cabinet-card-art {
  min-height: 132px;
  opacity: 0.82;
}

.cabinet-library-body {
  gap: 11px;
}

.cabinet-status-available {
  border-color: rgba(240, 215, 154, 0.24);
  background: rgba(217, 173, 98, 0.075);
}

.cabinet-library-card-premium {
  background:
    linear-gradient(180deg, rgba(8, 5, 12, 0.08), rgba(8, 5, 12, 0.36)),
    rgba(18, 9, 22, 0.58);
}

.cabinet-library-card-premium .cabinet-card-art,
.cabinet-library-card-premium p {
  opacity: 0.68;
}

.cabinet-filter {
  border-color: rgba(240, 215, 154, 0.12);
  color: rgba(246, 237, 240, 0.68);
}

.cabinet-filter-active {
  border-color: rgba(240, 215, 154, 0.38);
  color: #160b10;
}

.cabinet-history-list {
  border-color: rgba(240, 215, 154, 0.1);
  background: rgba(18, 9, 22, 0.48);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.2);
}

.cabinet-history-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 14px 18px;
}

.cabinet-history-mark {
  width: 32px;
  border-radius: 10px;
}

.cabinet-history-link {
  color: rgba(240, 215, 154, 0.82);
  font-size: 13px;
  font-weight: 760;
}

.cabinet-profile-card {
  border-color: rgba(240, 215, 154, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.028), transparent 48%),
    rgba(18, 9, 22, 0.44);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
}

@media (min-width: 1200px) {
  .cabinet-current-card {
    min-height: 430px;
  }
}

@media (max-width: 759px) {
  .cabinet-topbar {
    min-height: 0;
  }

  .cabinet-progress-section {
    padding-inline: 10px;
  }

  .cabinet-history-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cabinet-history-link {
    grid-column: 2;
    width: fit-content;
  }
}

/* Cabinet v2: experimental dashboard based on cabinet-dashboard-reference.html */
.cabinet-v2-page {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(92, 21, 56, 0.56), transparent 34rem),
    radial-gradient(circle at 86% 10%, rgba(75, 37, 112, 0.46), transparent 32rem),
    radial-gradient(circle at 70% 42%, rgba(217, 173, 98, 0.1), transparent 28rem),
    linear-gradient(180deg, #09050d 0%, #140817 48%, #08050c 100%);
  font-family: inherit;
}

.cabinet-v2-page .particles-canvas,
.cabinet-v2-page .ambient-particles {
  z-index: 1;
}

.cabinet-v2-shell,
.cabinet-v2-workspace,
.cabinet-v2-main,
.cabinet-v2-footer {
  position: relative;
  z-index: 20;
}

.cabinet-v2-shell {
  display: grid;
  min-height: 100vh;
}

.cabinet-v2-sidebar {
  display: grid;
  gap: 22px;
  align-content: start;
  padding: 20px;
  border: 1px solid rgba(240, 215, 154, 0.12);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.045), transparent 34%),
    rgba(13, 7, 17, 0.82);
  box-shadow: 14px 0 52px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(22px);
}

.cabinet-v2-sidebar-head {
  display: grid;
  gap: 9px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(240, 215, 154, 0.1);
}

.cabinet-v2-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff6e6;
  font-size: 19px;
  font-weight: 780;
}

.cabinet-v2-brand-mark {
  position: relative;
  width: 31px;
  aspect-ratio: 1;
  border: 1px solid rgba(240, 215, 154, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold-soft) 0 3px, transparent 4px),
    linear-gradient(135deg, rgba(217, 173, 98, 0.34), rgba(92, 21, 56, 0.44));
  box-shadow: 0 0 24px rgba(217, 173, 98, 0.2);
}

.cabinet-v2-sidebar p,
.cabinet-v2-section-head p,
.cabinet-v2-library-body p,
.cabinet-v2-history-item p,
.cabinet-v2-footer p {
  margin: 0;
}

.cabinet-v2-sidebar-head p,
.cabinet-v2-section-head p,
.cabinet-v2-library-body p,
.cabinet-v2-history-item p,
.cabinet-v2-footer p {
  color: rgba(246, 237, 240, 0.68);
}

.cabinet-v2-nav,
.cabinet-v2-sidebar-bottom {
  display: grid;
  gap: 8px;
}

.cabinet-v2-nav-link,
.cabinet-v2-small-link,
.cabinet-v2-premium-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(246, 237, 240, 0.74);
  font-size: 15px;
  font-weight: 680;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cabinet-v2-nav-link:hover,
.cabinet-v2-small-link:hover {
  color: var(--text);
  border-color: rgba(240, 215, 154, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.cabinet-v2-nav-link span {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(240, 215, 154, 0.3);
  box-shadow: 0 0 12px rgba(217, 173, 98, 0.16);
}

.cabinet-v2-nav-link.is-active {
  color: var(--gold-soft);
  border-color: rgba(240, 215, 154, 0.16);
  background:
    linear-gradient(90deg, rgba(217, 173, 98, 0.14), rgba(255, 255, 255, 0.035));
}

.cabinet-v2-nav-link.is-active span {
  background: var(--gold-soft);
}

.cabinet-v2-sidebar-status {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid rgba(240, 215, 154, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.cabinet-v2-sidebar-status span {
  color: rgba(246, 237, 240, 0.58);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.cabinet-v2-sidebar-status strong {
  color: #fff8e6;
  font-size: 18px;
}

.cabinet-v2-premium-link {
  justify-content: center;
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 14px 34px rgba(217, 173, 98, 0.16);
}

.cabinet-v2-premium-link:hover,
.cabinet-v2-button:hover {
  transform: translateY(-1px);
}

.cabinet-v2-workspace {
  min-width: 0;
}

.cabinet-v2-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 16px;
  border-bottom: 1px solid rgba(240, 215, 154, 0.09);
  background: rgba(7, 4, 11, 0.68);
  backdrop-filter: blur(18px);
}

.cabinet-v2-kicker {
  margin: 0 0 7px;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cabinet-v2-topbar h1,
.cabinet-v2-progress h2,
.cabinet-v2-current h2,
.cabinet-v2-next h2,
.cabinet-v2-section-head h2,
.cabinet-v2-library-body h3,
.cabinet-v2-history-item h3 {
  margin: 0;
  line-height: 1.12;
}

.cabinet-v2-topbar h1 {
  font-size: clamp(28px, 5vw, 46px);
}

.cabinet-v2-top-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.cabinet-v2-icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.cabinet-v2-icon-button::before,
.cabinet-v2-icon-button::after {
  position: absolute;
  content: "";
}

.cabinet-v2-icon-search::before {
  left: 13px;
  top: 12px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(240, 215, 154, 0.78);
  border-radius: 50%;
}

.cabinet-v2-icon-search::after {
  left: 25px;
  top: 25px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(240, 215, 154, 0.78);
  transform: rotate(45deg);
}

.cabinet-v2-icon-bell::before {
  left: 14px;
  top: 11px;
  width: 13px;
  height: 15px;
  border: 2px solid rgba(240, 215, 154, 0.78);
  border-bottom: 0;
  border-radius: 11px 11px 4px 4px;
}

.cabinet-v2-icon-bell::after {
  left: 18px;
  top: 28px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(240, 215, 154, 0.78);
}

.cabinet-v2-main {
  display: grid;
  gap: 30px;
  width: min(100% - 32px, 1160px);
  margin-inline: auto;
  padding: 26px 0 34px;
}

.cabinet-v2-progress {
  display: grid;
  gap: 13px;
  padding-inline: 4px;
}

.cabinet-v2-progress h2 {
  color: rgba(246, 237, 240, 0.9);
  font-size: 17px;
  font-weight: 780;
  text-align: center;
}

.cabinet-v2-progress-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
}

.cabinet-v2-progress-bar::before,
.cabinet-v2-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.cabinet-v2-progress-bar::before {
  right: 0;
  content: "";
  background: rgba(255, 255, 255, 0.075);
}

.cabinet-v2-progress-fill {
  z-index: 1;
  width: 30%;
  background: linear-gradient(90deg, rgba(217, 173, 98, 0.42), rgba(240, 215, 154, 0.92));
  box-shadow: 0 0 16px rgba(217, 173, 98, 0.2);
}

.cabinet-v2-progress-bar i {
  position: relative;
  z-index: 2;
  width: 11px;
  aspect-ratio: 1;
  border: 2px solid #0b0610;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.cabinet-v2-progress-bar i.is-done,
.cabinet-v2-progress-bar i.is-current {
  background: var(--gold);
  box-shadow: 0 0 18px rgba(217, 173, 98, 0.46);
}

.cabinet-v2-progress-bar i.is-current {
  width: 15px;
  background: var(--gold-soft);
}

.cabinet-v2-spotlight,
.cabinet-v2-library-grid {
  display: grid;
  gap: 18px;
}

.cabinet-v2-current,
.cabinet-v2-next,
.cabinet-v2-library-card,
.cabinet-v2-history-list {
  border: 1px solid rgba(240, 215, 154, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.046), transparent 42%),
    rgba(18, 9, 22, 0.62);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.cabinet-v2-current {
  position: relative;
  display: grid;
  min-height: 410px;
  padding: 24px;
  overflow: hidden;
  border-color: rgba(240, 215, 154, 0.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 28%, rgba(217, 173, 98, 0.12), transparent 14rem),
    radial-gradient(circle at 14% 72%, rgba(92, 21, 56, 0.38), transparent 20rem),
    linear-gradient(135deg, rgba(57, 18, 55, 0.82), rgba(13, 6, 16, 0.93));
}

.cabinet-v2-current-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  align-content: end;
  max-width: 620px;
}

.cabinet-v2-label,
.cabinet-v2-status,
.cabinet-v2-tabs a,
.cabinet-v2-tags span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 6px 11px;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(217, 173, 98, 0.07);
  font-size: 12px;
  font-weight: 760;
}

.cabinet-v2-label {
  text-transform: uppercase;
}

.cabinet-v2-current h2 {
  color: #fff8e6;
  font-size: clamp(40px, 7vw, 58px);
}

.cabinet-v2-current p,
.cabinet-v2-next p {
  max-width: 590px;
  margin: 0;
  color: rgba(246, 237, 240, 0.88);
  font-size: 17px;
  line-height: 1.65;
}

.cabinet-v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cabinet-v2-tags span {
  color: rgba(246, 237, 240, 0.82);
  background: rgba(255, 255, 255, 0.052);
}

.cabinet-v2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 780;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.cabinet-v2-button-primary {
  color: #160b10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 16px 44px rgba(217, 173, 98, 0.22);
}

.cabinet-v2-button-secondary {
  color: rgba(246, 237, 240, 0.72);
  border-color: rgba(240, 215, 154, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.cabinet-v2-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.cabinet-v2-card-visual {
  position: absolute;
  right: clamp(16px, 5vw, 58px);
  top: 50%;
  width: min(33%, 252px);
  min-width: 142px;
  aspect-ratio: 0.68;
  border: 1px solid rgba(240, 215, 154, 0.4);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 215, 154, 0.24), transparent 28%),
    radial-gradient(circle at 50% 48%, rgba(92, 21, 56, 0.36), transparent 54%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(72, 25, 78, 0.94), rgba(14, 7, 18, 0.96));
  box-shadow: 0 34px 72px rgba(0, 0, 0, 0.42), 0 0 46px rgba(217, 173, 98, 0.12);
  opacity: 0.8;
  transform: translateY(-50%) rotate(4deg);
}

.cabinet-v2-card-visual::before,
.cabinet-v2-card-visual::after,
.cabinet-v2-card-visual span {
  position: absolute;
  content: "";
}

.cabinet-v2-card-visual::before {
  inset: 16px;
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 16px;
}

.cabinet-v2-card-visual::after {
  left: 50%;
  top: 18%;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid rgba(240, 215, 154, 0.4);
  border-radius: 50%;
  box-shadow: inset -14px 0 0 rgba(240, 215, 154, 0.32);
  transform: translateX(-50%);
}

.cabinet-v2-card-visual span {
  left: 50%;
  bottom: 24%;
  width: 40%;
  height: 1px;
  background: rgba(240, 215, 154, 0.46);
  box-shadow: 0 18px 0 rgba(240, 215, 154, 0.2), 0 36px 0 rgba(240, 215, 154, 0.14);
  transform: translateX(-50%);
}

.cabinet-v2-next {
  display: grid;
  gap: 16px;
  align-content: center;
  min-height: 300px;
  padding: 24px;
  border-radius: 24px;
  color: rgba(246, 237, 240, 0.68);
  background:
    radial-gradient(circle at 74% 14%, rgba(217, 173, 98, 0.07), transparent 9rem),
    rgba(18, 9, 22, 0.52);
}

.cabinet-v2-label-muted {
  color: rgba(246, 237, 240, 0.62);
  background: rgba(255, 255, 255, 0.045);
}

.cabinet-v2-lock {
  position: relative;
  width: 48px;
  height: 39px;
  margin-top: 8px;
  border: 1px solid rgba(240, 215, 154, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.cabinet-v2-lock::before {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 24px;
  height: 19px;
  content: "";
  border: 2px solid rgba(240, 215, 154, 0.28);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  transform: translateX(-50%);
}

.cabinet-v2-next h2,
.cabinet-v2-section-head h2 {
  color: #fff8e6;
  font-size: clamp(28px, 4vw, 38px);
}

.cabinet-v2-section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cabinet-v2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cabinet-v2-tabs a {
  color: rgba(246, 237, 240, 0.68);
  background: rgba(255, 255, 255, 0.045);
}

.cabinet-v2-tabs a.is-active {
  color: #160b10;
  border-color: rgba(240, 215, 154, 0.38);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.cabinet-v2-library-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
}

.cabinet-v2-library-art {
  min-height: 136px;
  opacity: 0.84;
  background:
    radial-gradient(circle at 68% 32%, rgba(240, 215, 154, 0.28), transparent 7rem),
    radial-gradient(circle at 28% 80%, rgba(92, 21, 56, 0.5), transparent 9rem),
    linear-gradient(135deg, rgba(43, 23, 70, 0.76), rgba(14, 7, 18, 0.96));
}

.cabinet-v2-library-art-boundaries {
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(240, 215, 154, 0.18) 28% 30%, transparent 30% 58%, rgba(255, 255, 255, 0.08) 58% 60%, transparent 60%),
    radial-gradient(circle at 74% 28%, rgba(180, 118, 156, 0.24), transparent 8rem),
    linear-gradient(135deg, rgba(43, 23, 70, 0.84), rgba(14, 7, 18, 0.96));
}

.cabinet-v2-library-art-premium {
  background:
    radial-gradient(circle at 50% 44%, rgba(240, 215, 154, 0.24), transparent 5rem),
    repeating-linear-gradient(45deg, rgba(240, 215, 154, 0.16) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, rgba(92, 21, 56, 0.56), rgba(14, 7, 18, 0.96));
}

.cabinet-v2-library-card.is-locked {
  border-color: rgba(240, 215, 154, 0.26);
}

.cabinet-v2-library-card.is-locked .cabinet-v2-library-art,
.cabinet-v2-library-card.is-locked p {
  opacity: 0.68;
}

.cabinet-v2-library-body {
  display: grid;
  gap: 11px;
  padding: 20px;
}

.cabinet-v2-library-body h3 {
  color: #fff8e6;
  font-size: 22px;
}

.cabinet-v2-status.is-available {
  color: var(--gold-soft);
}

.cabinet-v2-status.is-premium {
  color: #160b10;
  border-color: rgba(240, 215, 154, 0.34);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.cabinet-v2-library-body a,
.cabinet-v2-history-item a {
  color: var(--gold-soft);
  font-weight: 780;
}

.cabinet-v2-history-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(18, 9, 22, 0.48);
}

.cabinet-v2-history-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.025);
}

.cabinet-v2-history-item + .cabinet-v2-history-item {
  border-top: 1px solid rgba(240, 215, 154, 0.1);
}

.cabinet-v2-history-item > span {
  width: 34px;
  aspect-ratio: 1;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 11px;
  background:
    radial-gradient(circle, var(--gold-soft) 0 3px, transparent 4px),
    rgba(217, 173, 98, 0.08);
}

.cabinet-v2-history-item h3 {
  color: rgba(246, 237, 240, 0.94);
  font-size: 17px;
}

.cabinet-v2-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 32px, 1160px);
  margin: 0 auto;
  padding: 8px 0 24px;
  color: rgba(246, 237, 240, 0.58);
  font-size: 13px;
}

.cabinet-v2-footer span {
  color: var(--gold-soft);
  font-weight: 780;
}

.cabinet-v2-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

@media (min-width: 760px) {
  .cabinet-v2-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .cabinet-v2-sidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
    border-width: 0 1px 0 0;
  }

  .cabinet-v2-sidebar-bottom {
    align-self: end;
    margin-top: min(18vh, 150px);
    padding-top: 16px;
    border-top: 1px solid rgba(240, 215, 154, 0.1);
  }

  .cabinet-v2-main,
  .cabinet-v2-footer {
    width: min(100% - 48px, 1160px);
  }

  .cabinet-v2-main {
    padding-top: 30px;
  }

  .cabinet-v2-section-head {
    flex-direction: row;
    align-items: end;
  }
}

@media (min-width: 1200px) {
  .cabinet-v2-shell {
    grid-template-columns: 276px minmax(0, 1fr);
  }

  .cabinet-v2-topbar {
    padding-inline: 28px;
  }

  .cabinet-v2-spotlight {
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.72fr);
  }

  .cabinet-v2-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cabinet-v2-current {
    min-height: 438px;
    padding: 34px;
  }
}

@media (max-width: 759px) {
  .cabinet-v2-shell {
    gap: 0;
  }

  .cabinet-v2-sidebar {
    position: relative;
    gap: 14px;
    margin: 10px;
    border-radius: 24px;
  }

  .cabinet-v2-sidebar-head {
    padding-bottom: 14px;
  }

  .cabinet-v2-nav,
  .cabinet-v2-sidebar-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabinet-v2-nav-link,
  .cabinet-v2-small-link,
  .cabinet-v2-premium-link {
    justify-content: center;
    min-height: 42px;
    padding-inline: 10px;
    text-align: center;
  }

  .cabinet-v2-sidebar-status {
    display: none;
  }

  .cabinet-v2-topbar {
    position: relative;
    align-items: flex-start;
    min-height: 0;
  }

  .cabinet-v2-icon-button {
    display: none;
  }

  .cabinet-v2-main {
    width: min(100% - 20px, 1160px);
    gap: 20px;
    padding-top: 16px;
  }

  .cabinet-v2-current {
    min-height: 0;
    padding: 22px;
  }

  .cabinet-v2-current-copy {
    max-width: none;
    padding-top: 148px;
  }

  .cabinet-v2-card-visual {
    left: 50%;
    right: auto;
    top: 94px;
    width: 114px;
    min-width: 114px;
    transform: translateX(-50%) translateY(-50%) rotate(3deg);
  }

  .cabinet-v2-button {
    width: 100%;
  }

  .cabinet-v2-tabs {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .cabinet-v2-tabs a {
    flex: 0 0 auto;
  }

  .cabinet-v2-history-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cabinet-v2-history-item a {
    grid-column: 2;
    width: fit-content;
  }

  .cabinet-v2-footer {
    width: min(100% - 20px, 1160px);
  }
}

@media (max-width: 420px) {
  .cabinet-v2-sidebar {
    margin-inline: 10px;
    padding: 14px;
  }

  .cabinet-v2-nav,
  .cabinet-v2-sidebar-bottom {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .cabinet-v2-nav-link,
  .cabinet-v2-small-link,
  .cabinet-v2-premium-link {
    min-height: 40px;
    font-size: 13px;
  }

  .cabinet-v2-topbar {
    padding-inline: 14px;
  }

  .cabinet-v2-topbar h1 {
    font-size: 27px;
  }

  .cabinet-v2-current,
  .cabinet-v2-next {
    padding: 18px;
    border-radius: 22px;
  }

  .cabinet-v2-current h2,
  .cabinet-v2-next h2,
  .cabinet-v2-section-head h2 {
    font-size: 28px;
  }

  .cabinet-v2-current p,
  .cabinet-v2-next p {
    font-size: 16px;
  }

  .cabinet-v2-library-body {
    padding: 18px;
  }
}

/* Material reading page based on Stitch reference */
.material-reading-page {
  --material-bg: #07040b;
  --material-bg-soft: #100716;
  --material-sidebar: rgba(21, 18, 12, 0.95);
  --material-panel: rgba(24, 12, 32, 0.64);
  --material-panel-strong: rgba(30, 14, 39, 0.78);
  --material-panel-warm: rgba(30, 27, 20, 0.62);
  --material-text: #f5edf5;
  --material-text-warm: #f3e9da;
  --material-muted: #cbbecb;
  --material-muted-soft: rgba(203, 190, 204, 0.62);
  --material-primary: #ffe195;
  --material-primary-dim: #e5c369;
  --material-gold-muted: #b99a4f;
  --material-wine: #3a1738;
  --material-line: rgba(229, 195, 105, 0.12);
  --material-line-strong: rgba(229, 195, 105, 0.32);
  --material-sidebar-width: 256px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--material-text);
  background:
    radial-gradient(circle at 86% 14%, rgba(58, 23, 56, 0.2), transparent 30rem),
    radial-gradient(circle at 26% 72%, rgba(185, 154, 79, 0.1), transparent 24rem),
    linear-gradient(180deg, #07040b 0%, #060309 100%);
  font-family: inherit;
}

.material-reading-page::before {
  background-image:
    radial-gradient(circle, rgba(229, 195, 105, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 1px, transparent 1.5px);
  background-position: 0 0, 46px 34px;
  background-size: 128px 128px, 176px 176px;
  opacity: 0.14;
}

.material-reading-page a {
  color: inherit;
}

.material-reading-page svg {
  display: block;
}

.material-reading-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.material-reading-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--material-sidebar-width);
  height: 100vh;
  min-height: 0;
  padding: 30px 16px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.055);
  background: var(--material-sidebar);
  box-shadow: 20px 0 40px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(40px);
}

.material-reading-sidebar-head {
  display: grid;
  gap: 8px;
  padding: 0 8px 38px;
}

.material-reading-brand {
  width: fit-content;
  color: var(--material-primary);
  font-size: 20px;
  font-weight: 760;
  line-height: 1.2;
}

.material-reading-sidebar-head p {
  margin: 0;
  color: rgba(233, 225, 215, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.material-reading-nav {
  display: grid;
  gap: 10px;
}

.material-reading-nav a,
.material-reading-small-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(243, 233, 218, 0.82);
  font-size: 15px;
  line-height: 1.3;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.material-reading-nav a:hover,
.material-reading-small-link:hover {
  color: var(--material-text-warm);
  border-color: rgba(229, 195, 105, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.material-reading-nav a.is-active {
  color: var(--material-primary);
  border-right: 4px solid var(--material-primary);
  background: rgba(255, 225, 149, 0.08);
}

.material-reading-sidebar-bottom {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.material-reading-premium-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  color: #3d2e00;
  background: linear-gradient(135deg, #ffe8a7, var(--material-primary));
  box-shadow: 0 16px 32px rgba(229, 195, 105, 0.16);
  font-size: 12px;
  font-weight: 760;
}

.material-reading-small-link {
  min-height: 36px;
  padding-block: 8px;
  color: rgba(233, 225, 215, 0.58);
  font-size: 12px;
}

.material-reading-small-link .material-reading-icon {
  width: 16px;
  height: 16px;
}

.material-reading-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--material-sidebar-width);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(7, 4, 11, 0.66);
  backdrop-filter: blur(18px);
}

.material-reading-step {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--material-text-warm);
}

.material-reading-step span {
  color: var(--material-primary);
  font-size: 22px;
  line-height: 1;
}

.material-reading-step strong {
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  text-transform: uppercase;
}

.material-reading-top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.material-reading-top-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: rgba(243, 233, 218, 0.86);
  transition: color 180ms ease, background-color 180ms ease;
}

.material-reading-top-actions a:hover {
  color: var(--material-primary);
}

.material-reading-main {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  margin-left: var(--material-sidebar-width);
  padding: 96px 40px 26px;
  overflow: hidden;
}

.material-reading-main::before,
.material-reading-main::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.material-reading-main::before {
  top: -16%;
  right: -12%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(58, 23, 56, 0.24), transparent 66%);
  filter: blur(34px);
}

.material-reading-main::after {
  left: -12%;
  bottom: 18%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(185, 154, 79, 0.11), transparent 68%);
  filter: blur(42px);
}

.material-reading-container {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.material-reading-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 26px;
  color: rgba(203, 190, 204, 0.62);
  font-size: 14px;
  line-height: 1.3;
}

.material-reading-breadcrumb a {
  transition: color 180ms ease;
}

.material-reading-breadcrumb a:hover,
.material-reading-breadcrumb span:last-child {
  color: var(--material-text-warm);
}

.material-reading-breadcrumb span[aria-hidden="true"] {
  color: var(--material-primary);
}

.material-reading-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.material-reading-title {
  max-width: none;
  margin: 0 0 8px;
  color: var(--material-primary);
  font-size: 40px;
  font-weight: 680;
  line-height: 1.14;
}

.material-reading-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.material-reading-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 12px;
  border: 1px solid rgba(185, 154, 79, 0.28);
  border-radius: 999px;
  color: var(--material-text);
  background: rgba(58, 23, 56, 0.42);
  font-size: 12px;
  font-weight: 680;
  line-height: 1;
}

.material-reading-badges span:last-child {
  color: var(--material-primary);
  background: rgba(185, 154, 79, 0.1);
}

.material-reading-progress {
  display: grid;
  gap: 8px;
  justify-items: end;
  width: min(100%, 196px);
  color: rgba(233, 225, 215, 0.68);
  font-size: 14px;
}

.material-reading-progress-track {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.material-reading-progress-track i {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: var(--material-primary-dim);
  box-shadow: 0 0 20px rgba(229, 195, 105, 0.34);
}

.material-reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 24px;
  align-items: start;
}

.material-reading-article,
.material-reading-aside {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.material-reading-aside {
  position: sticky;
  top: 88px;
  gap: 24px;
}

.material-reading-card,
.material-reading-side-card {
  border: 1px solid var(--material-line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 44%),
    var(--material-panel);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
}

.material-reading-prose {
  padding: 40px 40px 38px;
  color: var(--material-text);
}

.material-reading-prose p {
  margin: 0;
  color: var(--material-text);
  font-size: 18px;
  line-height: 1.62;
}

.material-reading-prose p + p {
  margin-top: 28px;
}

.material-reading-lead::first-letter {
  float: left;
  margin: 7px 12px 0 0;
  color: var(--material-primary);
  font-size: 50px;
  font-weight: 780;
  line-height: 0.82;
}

.material-reading-prose blockquote {
  margin: 30px 0 28px;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--material-primary-dim);
  color: rgba(255, 225, 149, 0.82);
  font-size: 15px;
  font-style: italic;
  line-height: 1.7;
}

.material-reading-section-title,
.material-reading-side-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--material-primary);
}

.material-reading-section-title h2,
.material-reading-side-title h2,
.material-reading-premium-soon h2 {
  margin: 0;
  color: var(--material-primary);
  font-size: 23px;
  font-weight: 640;
  line-height: 1.25;
}

.material-reading-practice {
  padding: 30px 34px;
  border-color: rgba(229, 195, 105, 0.54);
  border-left-width: 4px;
  background:
    linear-gradient(135deg, rgba(255, 225, 149, 0.035), transparent 42%),
    rgba(24, 12, 32, 0.68);
}

.material-reading-practice-list {
  display: grid;
  gap: 15px;
  margin: 18px 0 0;
  padding: 0;
  color: rgba(245, 237, 245, 0.92);
  counter-reset: practice-step;
  list-style: none;
}

.material-reading-practice-list li {
  position: relative;
  min-height: 26px;
  padding-left: 38px;
  color: rgba(245, 237, 245, 0.9);
  font-size: 15px;
  line-height: 1.58;
  counter-increment: practice-step;
}

.material-reading-practice-list li::before {
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--material-primary);
  background: rgba(255, 225, 149, 0.16);
  content: counter(practice-step);
  font-size: 11px;
  font-weight: 780;
}

.material-reading-takeaway {
  padding: 30px 34px 34px;
  background:
    linear-gradient(135deg, rgba(255, 225, 149, 0.02), transparent 44%),
    var(--material-panel-warm);
}

.material-reading-note {
  position: relative;
  margin-top: 18px;
}

.material-reading-note textarea {
  display: block;
  width: 100%;
  min-height: 118px;
  resize: vertical;
  padding: 17px 50px 17px 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--material-text);
  background: rgba(7, 8, 5, 0.48);
  font: inherit;
  line-height: 1.5;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.material-reading-note textarea::placeholder {
  color: rgba(203, 190, 204, 0.48);
}

.material-reading-note textarea:focus {
  border-color: rgba(255, 225, 149, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 225, 149, 0.08);
}

.material-reading-note-icon {
  position: absolute;
  right: 16px;
  bottom: 15px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(203, 190, 204, 0.34);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  pointer-events: none;
}

.material-reading-arcana {
  position: relative;
  aspect-ratio: 2 / 3;
  padding: 12px;
  border: 2px solid rgba(255, 225, 149, 0.1);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 225, 149, 0.12), transparent 9rem),
    linear-gradient(135deg, rgba(58, 23, 56, 0.9), rgba(7, 4, 11, 0.96) 54%, rgba(16, 7, 22, 0.94));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.material-reading-arcana::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 16% 40%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 22%, rgba(255, 225, 149, 0.1) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 74%, rgba(255, 255, 255, 0.1) 0 1px, transparent 1.5px);
  background-size: 78px 78px, 94px 94px, 112px 112px;
  opacity: 0.28;
}

.material-reading-arcana::after {
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 225, 149, 0.38), rgba(185, 154, 79, 0.18), rgba(58, 23, 56, 0.38));
  content: "";
  filter: blur(7px);
  opacity: 0.78;
}

.material-reading-arcana-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 38px 24px 34px;
  border: 1px solid rgba(255, 225, 149, 0.18);
  border-radius: 8px;
}

.material-reading-arcana-number {
  color: rgba(255, 225, 149, 0.38);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}

.material-reading-arcana-symbol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 126px;
  border: 1px solid rgba(255, 225, 149, 0.2);
  border-radius: 50%;
  color: rgba(255, 225, 149, 0.62);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 30px rgba(230, 196, 106, 0.1);
}

.material-reading-arcana-symbol img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.material-reading-arcana-symbol span {
  font-size: 62px;
  line-height: 1;
  transform: translateY(-2px) rotate(-18deg);
}

.material-reading-arcana-copy {
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.material-reading-arcana-copy h2 {
  margin: 0;
  color: var(--material-primary);
  font-size: 24px;
  font-weight: 540;
  line-height: 1.2;
  text-transform: uppercase;
}

.material-reading-arcana-copy h2::after {
  display: block;
  width: 48px;
  height: 1px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 225, 149, 0.3), transparent);
  content: "";
}

.material-reading-arcana-copy p {
  margin: 0;
  color: rgba(208, 197, 178, 0.62);
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
}

.material-reading-side-card {
  padding: 18px;
}

.material-reading-key-thought {
  background:
    linear-gradient(135deg, rgba(58, 23, 56, 0.5), transparent 70%),
    rgba(24, 12, 32, 0.7);
}

.material-reading-side-title h2,
.material-reading-premium-soon h2 {
  font-size: 14px;
  font-weight: 780;
  line-height: 1.2;
  text-transform: uppercase;
}

.material-reading-key-thought p {
  margin: 12px 0 0;
  color: var(--material-text);
  font-size: 15px;
  font-style: italic;
  line-height: 1.65;
}

.material-reading-premium-soon {
  position: relative;
  overflow: hidden;
  border-color: rgba(58, 23, 56, 0.54);
  background:
    linear-gradient(135deg, rgba(58, 23, 56, 0.38), rgba(7, 4, 11, 0.62)),
    var(--material-panel);
}

.material-reading-premium-soon p {
  max-width: 100%;
  margin: 10px 0 16px;
  color: rgba(208, 197, 178, 0.78);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.material-reading-lock {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 13px;
  height: 10px;
  border: 1px solid rgba(255, 225, 149, 0.32);
  border-radius: 3px;
  opacity: 0.8;
}

.material-reading-lock::before {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 8px;
  height: 7px;
  border: 1px solid rgba(255, 225, 149, 0.32);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  content: "";
  transform: translateX(-50%);
}

.material-reading-soft-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  color: var(--material-text);
  background: rgba(79, 73, 62, 0.82);
  font-size: 14px;
  transition: background-color 180ms ease, color 180ms ease;
}

.material-reading-soft-button:hover {
  color: var(--material-primary);
  background: rgba(88, 77, 60, 0.94);
}

.material-reading-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.material-reading-back,
.material-reading-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 999px;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.material-reading-back {
  gap: 12px;
  min-width: 218px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(243, 233, 218, 0.86);
  background: rgba(255, 255, 255, 0.015);
  font-size: 14px;
}

.material-reading-back span {
  font-size: 22px;
  line-height: 1;
}

.material-reading-back:hover {
  color: var(--material-primary);
  border-color: rgba(255, 225, 149, 0.5);
}

.material-reading-next-wrap {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.material-reading-next {
  min-width: 236px;
  padding: 0 44px;
  color: #3d2e00;
  background: linear-gradient(135deg, #ffe9a8, var(--material-primary));
  box-shadow: 0 8px 26px rgba(255, 225, 149, 0.26), 0 6px 18px rgba(0, 0, 0, 0.42);
  font-size: 16px;
  font-weight: 720;
}

.material-reading-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(255, 225, 149, 0.34), 0 8px 20px rgba(0, 0, 0, 0.42);
}

.material-reading-next-wrap p {
  margin: 0;
  color: rgba(203, 190, 204, 0.48);
  font-size: 13px;
  line-height: 1.4;
}

.material-reading-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-bottom: 2px;
  color: rgba(203, 190, 204, 0.42);
  font-size: 12px;
}

.material-reading-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.material-reading-footer a {
  transition: color 180ms ease;
}

.material-reading-footer a:hover {
  color: var(--material-primary);
}

@media (max-width: 1023px) {
  .material-reading-sidebar {
    position: relative;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 20px 16px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

  .material-reading-sidebar-head {
    padding: 0 4px 16px;
  }

  .material-reading-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .material-reading-nav a {
    justify-content: center;
    min-height: 44px;
    padding: 10px;
    text-align: center;
  }

  .material-reading-nav a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .material-reading-sidebar-bottom {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    margin-top: 14px;
  }

  .material-reading-small-link {
    justify-content: center;
  }

  .material-reading-topbar {
    position: sticky;
    top: 0;
    left: 0;
    height: 58px;
    padding: 0 16px;
  }

  .material-reading-main {
    margin-left: 0;
    padding: 28px 16px 42px;
  }

  .material-reading-main::before,
  .material-reading-main::after {
    display: none;
  }

  .material-reading-container {
    width: min(100%, 760px);
  }

  .material-reading-hero {
    align-items: start;
  }

  .material-reading-layout {
    grid-template-columns: 1fr;
  }

  .material-reading-aside {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }

  .material-reading-arcana {
    width: min(100%, 320px);
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .material-reading-sidebar {
    padding-inline: 12px;
  }

  .material-reading-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-reading-sidebar-bottom {
    grid-template-columns: 1fr;
  }

  .material-reading-top-actions {
    gap: 8px;
  }

  .material-reading-breadcrumb {
    margin-bottom: 20px;
    font-size: 13px;
  }

  .material-reading-hero {
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
  }

  .material-reading-title {
    font-size: 34px;
  }

  .material-reading-progress {
    justify-items: start;
    width: min(100%, 240px);
  }

  .material-reading-prose,
  .material-reading-practice,
  .material-reading-takeaway {
    padding: 24px;
  }

  .material-reading-prose p {
    font-size: 16px;
    line-height: 1.66;
  }

  .material-reading-lead::first-letter {
    margin-top: 6px;
    font-size: 44px;
  }

  .material-reading-section-title h2 {
    font-size: 22px;
  }

  .material-reading-bottom-nav {
    display: grid;
    justify-items: stretch;
    margin-top: 42px;
    padding-top: 26px;
  }

  .material-reading-back,
  .material-reading-next {
    width: 100%;
    min-width: 0;
  }

  .material-reading-next-wrap {
    width: 100%;
  }

  .material-reading-footer {
    display: grid;
    gap: 14px;
    margin-top: 44px;
    text-align: center;
  }

  .material-reading-footer nav {
    justify-content: center;
    gap: 12px 20px;
  }
}

@media (max-width: 420px) {
  .material-reading-nav {
    grid-template-columns: 1fr;
  }

  .material-reading-nav a,
  .material-reading-small-link {
    min-height: 42px;
    font-size: 13px;
  }

  .material-reading-step {
    gap: 8px;
  }

  .material-reading-step strong {
    font-size: 11px;
  }

  .material-reading-top-actions a {
    width: 30px;
    height: 30px;
  }

  .material-reading-main {
    padding-inline: 10px;
  }

  .material-reading-title {
    font-size: 32px;
  }

  .material-reading-badges span {
    max-width: 100%;
  }

  .material-reading-prose,
  .material-reading-practice,
  .material-reading-takeaway,
  .material-reading-side-card {
    padding: 20px;
  }

  .material-reading-practice-list li {
    padding-left: 34px;
  }

  .material-reading-arcana-inner {
    padding: 30px 18px 28px;
  }
}

/* Shared cabinet sidebar treatment for material.html */
.material-reading-page {
  --material-sidebar-width: 16rem;
  --cabinet-v3-background: #17111d;
  --cabinet-v3-surface: #17111d;
  --cabinet-v3-surface-container-high: #2e2735;
  --cabinet-v3-surface-container-highest: #393240;
  --cabinet-v3-primary: #f2ca50;
  --cabinet-v3-primary-container: #d4af37;
  --cabinet-v3-primary-fixed: #ffe088;
  --cabinet-v3-on-primary-container: #554300;
  --cabinet-v3-on-surface: #ebdef1;
  --cabinet-v3-on-surface-variant: #d0c5af;
}

.material-reading-page .cabinet-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-content: normal;
  width: var(--material-sidebar-width);
  height: 100vh;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  color: var(--cabinet-v3-on-surface);
  background: var(--cabinet-v3-surface);
  box-shadow: 20px 0 40px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  font-family: inherit;
}

.material-reading-page .cabinet-sidebar a {
  text-decoration: none;
}

.material-reading-page .cabinet-sidebar .material-symbols-outlined {
  display: inline-block;
  flex: 0 0 auto;
  direction: ltr;
  font-family: "Material Symbols Outlined";
  font-feature-settings: "liga";
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-reading-page .cabinet-v3-sidebar-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.material-reading-page .cabinet-v3-sidebar-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.material-reading-page .cabinet-v3-sidebar-avatar::before {
  position: absolute;
  top: -20%;
  left: -20%;
  z-index: -1;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  content: "";
  pointer-events: none;
}

.material-reading-page .cabinet-v3-sidebar-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-reading-page .cabinet-v3-sidebar-brand {
  margin: 0 0 4px;
  color: var(--cabinet-v3-primary-fixed);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.025em;
}

.material-reading-page .cabinet-v3-sidebar-head p {
  margin: 0;
  color: rgba(208, 197, 175, 0.7);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.material-reading-page .cabinet-v3-sidebar-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 32px 16px;
}

.material-reading-page .cabinet-v3-sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px;
  overflow: hidden;
  border-radius: 8px;
  color: rgba(208, 197, 175, 0.7);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  transition: color 300ms ease, background-color 300ms ease, transform 300ms ease;
}

.material-reading-page .cabinet-v3-sidebar-link > span {
  position: relative;
  z-index: 1;
}

.material-reading-page .cabinet-v3-sidebar-link > span:not(.material-symbols-outlined) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-reading-page .cabinet-v3-sidebar-link:hover {
  color: var(--cabinet-v3-on-surface);
  background: rgba(57, 50, 64, 0.5);
}

.material-reading-page .cabinet-v3-sidebar-link:hover .material-symbols-outlined {
  color: var(--cabinet-v3-primary);
}

.material-reading-page .cabinet-v3-sidebar-link.is-active {
  border-right: 4px solid var(--cabinet-v3-primary);
  border-radius: 8px 0 0 8px;
  color: var(--cabinet-v3-primary-fixed);
  background: rgba(242, 202, 80, 0.05);
  font-weight: 500;
  transform: scale(0.95);
}

.material-reading-page .cabinet-v3-sidebar-link.is-active .material-symbols-outlined {
  color: var(--cabinet-v3-primary);
  transition: transform 300ms ease;
}

.material-reading-page .cabinet-v3-sidebar-link.is-active:hover .material-symbols-outlined {
  transform: scale(1.1);
}

.material-reading-page .cabinet-v3-sidebar-link.is-active i {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(242, 202, 80, 0.1));
  opacity: 0;
  transition: opacity 300ms ease;
}

.material-reading-page .cabinet-v3-sidebar-link.is-active:hover i {
  opacity: 1;
}

.material-reading-page .cabinet-v3-sidebar-bottom {
  margin-top: auto;
  padding: 16px;
}

.material-reading-page .cabinet-v3-sidebar-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 24px;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--cabinet-v3-on-primary-container);
  background: linear-gradient(90deg, var(--cabinet-v3-primary-container), var(--cabinet-v3-primary-fixed));
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: box-shadow 300ms ease;
}

.material-reading-page .cabinet-v3-sidebar-premium:hover {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.material-reading-page .cabinet-v3-sidebar-premium .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.material-reading-page .cabinet-v3-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.material-reading-page .cabinet-v3-sidebar-actions a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 8px;
  color: rgba(208, 197, 175, 0.7);
  font-size: 14px;
  line-height: 1.45;
  transition: color 300ms ease, background-color 300ms ease;
}

.material-reading-page .cabinet-v3-sidebar-actions a:hover {
  color: var(--cabinet-v3-on-surface);
  background: rgba(57, 50, 64, 0.5);
}

.material-reading-page .cabinet-v3-sidebar-actions .material-symbols-outlined {
  font-size: 18px;
}

@media (max-width: 1023px) {
  .material-reading-page .cabinet-sidebar {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }
}

/* App shell */
.app-shell-page {
  --app-sidebar-width: 18rem;
  --app-panel: rgba(24, 12, 32, 0.78);
  --app-panel-strong: rgba(31, 12, 38, 0.9);
  --app-panel-soft: rgba(255, 255, 255, 0.035);
  --app-line: rgba(240, 211, 122, 0.18);
  --app-line-violet: rgba(92, 21, 56, 0.35);
  --app-text: #f5edf5;
  --app-muted: #cbbecb;
  --app-muted-soft: #8f8192;
  --app-gold: #f0d37a;
  --app-gold-muted: #b99a4f;
  --app-wine: #3a1738;
  --app-icon-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l1.8 6.1L20 10l-6.2 1.9L12 22l-1.8-10.1L4 10l6.2-1.9L12 2z'/%3E%3C/svg%3E");
  --app-icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5C5.7 4.7 7.5 4 10 4c1.2 0 2 .3 2 .3v15.2c0-.1-.8-.5-2-.5-2.5 0-4.3.8-6 1.7V5.5zm16 0v15.2c-1.7-.9-3.5-1.7-6-1.7-1.2 0-2 .4-2 .5V4.3s.8-.3 2-.3c2.5 0 4.3.7 6 1.5z'/%3E%3C/svg%3E");
  --app-icon-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 4h3v16H5V4zm5 0h3v16h-3V4zm5.5.5 2.7-.8 3.8 14.8-2.8.7-3.7-14.7z'/%3E%3C/svg%3E");
  --app-icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-2.05-4.95L14 10h7V3l-2.6 2.6A8.96 8.96 0 0 0 12 3zm1 4h-2v6l5 3 1-1.7-4-2.3V7z'/%3E%3C/svg%3E");
  --app-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E");
  --app-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 18h2v-2h-2v2zm1-16a7 7 0 0 0-7 7h2a5 5 0 1 1 8.7 3.35C13.95 14 13 14.9 13 17h-2c0-2.95 1.4-4.2 3.2-5.9A3 3 0 1 0 9 9H7a5 5 0 0 1 5-5z'/%3E%3C/svg%3E");
  --app-icon-access: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l3 5.7 6.4.9-4.7 4.5 1.1 6.4L12 16.5l-5.8 3 1.1-6.4-4.7-4.5 6.4-.9L12 2z'/%3E%3C/svg%3E");
  --app-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22zm7-6v-5a7 7 0 0 0-5-6.7V3a2 2 0 1 0-4 0v1.3A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E");
  --app-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4a6 6 0 1 0 3.7 10.7l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3E%3C/svg%3E");
  --app-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM1 11h3v2H1v-2zm19 0h3v2h-3v-2zM4.2 3.8l2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4zm14.9 14.9 2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4zm0-13.5 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zM3.8 19.1l2.1-2.1 1.4 1.4-2.1 2.1-1.4-1.4z'/%3E%3C/svg%3E");
  --app-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 14.5A8.5 8.5 0 0 1 9.5 3 7.5 7.5 0 1 0 21 14.5z'/%3E%3C/svg%3E");
  --app-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.5-4.4-9.4-9.1C1.2 8.5 3.2 5 6.8 5c2 0 3.4 1.1 4.2 2.2C11.8 6.1 13.2 5 15.2 5c3.6 0 5.6 3.5 4.2 6.9C19.5 16.6 12 21 12 21z'/%3E%3C/svg%3E");
  --app-icon-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 13h-2v-1.2a4.2 4.2 0 0 1-2.5-1.1l1.1-1.5c.7.6 1.5.9 2.4.9.8 0 1.3-.3 1.3-.8 0-.6-.5-.8-1.9-1.2-1.7-.5-2.8-1.1-2.8-2.7 0-1.4 1-2.4 2.4-2.7V4h2v1.1c.9.1 1.7.5 2.4 1l-1 1.5c-.6-.4-1.2-.7-2-.7-.8 0-1.2.3-1.2.8 0 .5.5.7 1.8 1.1 1.8.5 2.9 1.1 2.9 2.8 0 1.4-1 2.5-2.5 2.8V16z'/%3E%3C/svg%3E");
  min-height: 100vh;
  color: var(--app-text);
  font-family: inherit;
}

.app-shell-page .material-symbols-outlined {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  max-width: 1em;
  overflow: hidden;
  color: inherit;
  direction: ltr;
  font-family: inherit;
  font-feature-settings: normal;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: 1;
  text-indent: -9999px;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

.app-shell-page .material-symbols-outlined::before {
  position: absolute;
  inset: 0;
  display: block;
  background: currentColor;
  content: "";
  -webkit-mask: var(--app-icon-mask, var(--app-icon-spark)) center / contain no-repeat;
  mask: var(--app-icon-mask, var(--app-icon-spark)) center / contain no-repeat;
}

.app-shell-page .app-sidebar-link[href$="cabinet.html"] .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-book);
}

.app-shell-page .app-sidebar-link[href$="library.html"] .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-library);
}

.app-shell-page .app-sidebar-link[href$="history.html"] .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-history);
}

.app-shell-page .app-sidebar-link[href$="profile.html"] .material-symbols-outlined,
.app-shell-page .app-icon-button[aria-label="Профиль"] .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-user);
}

.app-shell-page .app-sidebar-link[href$="access.html"] .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-access);
}

.app-shell-page .app-sidebar-link[href$="help.html"] .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-help);
}

.app-shell-page .app-mobile-brand > .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-spark);
}

.app-shell-page .app-icon-button[aria-label="Уведомления"] .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-bell);
}

.app-shell-page .app-search .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-search);
}

.app-shell-page .cabinet-current-visual .material-symbols-outlined,
.app-shell-page .material-arcana-card .material-symbols-outlined,
.app-shell-page .visual-sun .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-sun);
}

.app-shell-page .visual-moon .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-moon);
}

.app-shell-page .visual-heart .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-heart);
}

.app-shell-page .visual-coin .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-coin);
}

.app-shell-page a {
  color: inherit;
  text-decoration: none;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--app-sidebar-width);
  height: 100vh;
  border-right: 1px solid rgba(240, 211, 122, 0.08);
  background: rgba(7, 4, 11, 0.82);
  box-shadow: 22px 0 44px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.app-sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 28px 18px;
}

.app-sidebar-brand {
  margin-bottom: 36px;
  padding: 0 8px;
}

.app-sidebar-brand span {
  display: block;
  color: var(--app-gold);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.app-sidebar-brand p {
  margin: 6px 0 0;
  color: rgba(240, 211, 122, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.app-sidebar-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.app-sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--app-muted-soft);
  font-size: 15px;
  line-height: 1.35;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.app-sidebar-link .material-symbols-outlined {
  color: inherit;
  font-size: 22px;
}

.app-sidebar-link:hover,
.app-sidebar-link:focus-visible {
  color: var(--app-muted);
  background: rgba(255, 255, 255, 0.035);
}

.app-sidebar-link.is-active {
  border-color: rgba(240, 211, 122, 0.58);
  border-right-width: 3px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.1);
  font-weight: 700;
}

.app-sidebar-link.is-active .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.app-sidebar-link.is-active i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(240, 211, 122, 0.08));
  pointer-events: none;
}

.app-sidebar-user {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  padding: 14px;
  border: 1px solid rgba(240, 211, 122, 0.22);
  border-radius: 14px;
  background: rgba(24, 12, 32, 0.72);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.app-sidebar-user-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-sidebar-user-icon {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.18);
  border-radius: 999px;
  color: var(--app-gold);
  background: rgba(58, 23, 56, 0.45);
}

.app-sidebar-user strong,
.app-sidebar-user-main div span,
.app-sidebar-user-badge {
  display: block;
}

.app-sidebar-user strong {
  color: var(--app-text);
  font-size: 13px;
  line-height: 1.25;
}

.app-sidebar-user-main div span {
  margin-top: 2px;
  color: var(--app-gold);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.app-sidebar-user-badge {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(240, 211, 122, 0.28);
  border-radius: 8px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.09);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.app-workspace {
  position: relative;
  z-index: 20;
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--app-sidebar-width);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 12px clamp(18px, 3vw, 40px);
  border-bottom: 1px solid rgba(92, 21, 56, 0.18);
  background: rgba(7, 4, 11, 0.66);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.app-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 420px);
  min-width: 0;
  padding: 9px 16px;
  border: 1px solid rgba(92, 21, 56, 0.32);
  border-radius: 999px;
  background: rgba(30, 20, 31, 0.72);
  color: var(--app-muted-soft);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.app-search:focus-within {
  border-color: rgba(240, 211, 122, 0.46);
  background: rgba(32, 18, 36, 0.88);
}

.app-search .material-symbols-outlined {
  font-size: 20px;
}

.app-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--app-text);
  background: transparent;
  font: inherit;
}

.app-search input::placeholder {
  color: var(--app-muted-soft);
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.app-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--app-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.app-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--app-gold);
  box-shadow: 0 0 14px rgba(240, 211, 122, 0.72);
}

.app-icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--app-muted-soft);
  background: transparent;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.app-icon-button:hover,
.app-icon-button:focus-visible {
  border-color: rgba(240, 211, 122, 0.22);
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.08);
}

/* Help page */
.help-main {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 44px clamp(18px, 3.4vw, 40px) 34px;
}

.help-page-head {
  margin-bottom: 36px;
}

.help-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.help-page h1,
.help-page h2,
.help-page h3,
.help-page p {
  margin-top: 0;
}

.help-page h1 {
  margin-bottom: 0;
  color: var(--app-text);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
}

.help-page-head p {
  margin-bottom: 0;
  color: var(--app-muted-soft);
  font-size: 18px;
  line-height: 1.6;
}

.help-premium-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 6px 12px;
  border: 1px solid rgba(240, 211, 122, 0.3);
  border-radius: 999px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.09);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.help-hero,
.help-topic-card,
.help-faq-item,
.help-side-card {
  border: 1px solid var(--app-line-violet);
  background: linear-gradient(145deg, rgba(24, 12, 32, 0.82), rgba(18, 8, 24, 0.76));
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.help-hero {
  position: relative;
  margin-bottom: 44px;
  overflow: hidden;
  border-color: rgba(240, 211, 122, 0.13);
  border-radius: 30px;
  padding: clamp(30px, 5vw, 54px);
}

.help-hero::before,
.help-hero::after {
  position: absolute;
  content: "";
  border-radius: 999px;
  pointer-events: none;
}

.help-hero::before {
  top: -120px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: rgba(58, 23, 56, 0.34);
  filter: blur(72px);
}

.help-hero::after {
  bottom: -130px;
  left: 24%;
  width: 290px;
  height: 290px;
  background: rgba(240, 211, 122, 0.08);
  filter: blur(72px);
}

.help-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.help-hero h2,
.help-section h2,
.help-bottom-cta h2 {
  color: var(--app-text);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 650;
  line-height: 1.25;
}

.help-hero h2 {
  margin-bottom: 16px;
}

.help-hero p {
  margin-bottom: 28px;
  color: var(--app-muted);
  font-size: 18px;
  line-height: 1.7;
}

.help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.help-button:hover,
.help-button:focus-visible {
  transform: translateY(-1px);
}

.help-button-primary {
  color: #3d2e00;
  background: linear-gradient(135deg, #ffe195, var(--app-gold));
  box-shadow: 0 12px 32px rgba(240, 211, 122, 0.13);
}

.help-button-primary:hover,
.help-button-primary:focus-visible {
  color: #3d2e00;
  background: linear-gradient(135deg, #ffe7a8, #d9ad62);
}

.help-button-secondary {
  border: 1px solid rgba(240, 211, 122, 0.34);
  color: var(--app-gold);
  background: transparent;
}

.help-button-secondary:hover,
.help-button-secondary:focus-visible {
  color: #3d2e00;
  background: var(--app-gold);
}

.help-button .material-symbols-outlined {
  font-size: 20px;
}

.help-section {
  margin-bottom: 44px;
}

.help-section > h2 {
  margin-bottom: 24px;
}

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

.help-topic-card {
  min-width: 0;
  border-radius: 16px;
  padding: 24px;
  transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.help-topic-card:hover {
  border-color: rgba(240, 211, 122, 0.4);
  transform: translateY(-2px);
}

.help-topic-card > .material-symbols-outlined {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.18);
  border-radius: 12px;
  color: var(--app-gold);
  background: rgba(58, 23, 56, 0.34);
}

.help-topic-card h3 {
  margin-bottom: 8px;
  color: var(--app-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.help-topic-card p {
  margin-bottom: 0;
  color: var(--app-muted-soft);
  font-size: 15px;
  line-height: 1.55;
}

.help-faq-list {
  display: grid;
  gap: 12px;
}

.help-faq-item {
  overflow: hidden;
  border-color: rgba(92, 21, 56, 0.22);
  border-radius: 12px;
  background: rgba(24, 12, 32, 0.74);
}

.help-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 58px;
  padding: 17px 22px;
  border: 0;
  color: var(--app-text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  transition: background-color 180ms ease;
}

.help-faq-trigger:hover,
.help-faq-trigger:focus-visible {
  background: rgba(58, 23, 56, 0.15);
}

.help-faq-trigger .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--app-gold-muted);
  transition: transform 180ms ease;
}

.help-faq-trigger[aria-expanded="true"] .material-symbols-outlined {
  transform: rotate(180deg);
}

.help-faq-panel {
  padding: 0 22px 20px;
  color: var(--app-muted);
  background: rgba(58, 23, 56, 0.08);
}

.help-faq-panel p {
  max-width: 860px;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.65;
}

.help-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 58px;
  padding: 17px 22px;
  border: 0;
  color: var(--app-text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  transition: background-color 180ms ease;
}

.help-faq-question:hover,
.help-faq-question:focus-visible {
  background: rgba(58, 23, 56, 0.15);
}

.help-faq-question .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--app-gold-muted);
}

.help-faq-answer {
  display: none;
  padding: 0 22px 20px;
  color: var(--app-muted);
  background: rgba(58, 23, 56, 0.08);
}

.help-faq-item.is-open .help-faq-answer {
  display: block;
}

.help-faq-answer p {
  max-width: 860px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

.help-support-section {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 0.9fr);
  gap: 28px;
  align-items: start;
}

.help-support-form-wrap,
.help-support-aside {
  min-width: 0;
}

.help-support-form-wrap h2 {
  margin-bottom: 20px;
}

.help-support-form {
  display: grid;
  gap: 18px;
}

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

.help-support-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.help-support-form label > span {
  color: var(--app-muted-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.help-support-form input,
.help-support-form select,
.help-support-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(92, 21, 56, 0.35);
  border-radius: 12px;
  outline: 0;
  color: var(--app-text);
  background: rgba(16, 7, 22, 0.88);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.help-support-form input,
.help-support-form select {
  min-height: 48px;
  padding: 0 15px;
}

.help-support-form textarea {
  resize: vertical;
  min-height: 142px;
  padding: 14px 15px;
}

.help-support-form input::placeholder,
.help-support-form textarea::placeholder {
  color: rgba(143, 129, 146, 0.82);
}

.help-support-form input:focus,
.help-support-form select:focus,
.help-support-form textarea:focus {
  border-color: rgba(240, 211, 122, 0.5);
  background: rgba(19, 8, 26, 0.95);
}

.help-support-form .help-button {
  justify-self: start;
  margin-top: 2px;
  border: 0;
  cursor: pointer;
}

.help-form-note,
.help-form-success {
  margin-bottom: 0;
  color: var(--app-muted-soft);
  font-size: 13px;
  line-height: 1.5;
}

.help-form-success {
  max-width: 560px;
  padding: 12px 14px;
  border: 1px solid rgba(52, 211, 153, 0.26);
  border-radius: 10px;
  color: #9de8c5;
  background: rgba(52, 211, 153, 0.08);
}

.help-form-error,
.help-field-error {
  color: #f4a7a7;
  font-size: 13px;
  line-height: 1.45;
}

.help-form-error {
  padding: 12px 14px;
  border: 1px solid rgba(244, 167, 167, 0.28);
  border-radius: 10px;
  background: rgba(127, 29, 29, 0.12);
}

.legal-support-form {
  margin: 24px 0 34px;
}

.help-support-aside {
  display: grid;
  gap: 18px;
}

.help-side-card {
  border-radius: 16px;
  padding: 22px;
}

.help-side-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--app-gold);
}

.help-side-card h3 {
  margin-bottom: 14px;
  color: var(--app-text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.help-side-card-title h3 {
  margin-bottom: 0;
  color: var(--app-gold);
}

.help-side-card p,
.help-side-card li,
.help-status-list dt,
.help-status-list dd {
  color: var(--app-muted);
  font-size: 14px;
  line-height: 1.5;
}

.help-side-card p {
  margin-bottom: 14px;
}

.help-side-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-side-card li {
  position: relative;
  padding-left: 16px;
}

.help-side-card li::before {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--app-gold-muted);
  content: "";
}

.help-status-list {
  display: grid;
  gap: 13px;
  margin: 0;
}

.help-status-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.help-status-list dt,
.help-status-list dd {
  margin: 0;
}

.help-status-list dd {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--app-gold-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-status-list dd.is-online {
  color: #74e5a8;
}

.help-status-list dd i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.help-status-list .is-muted {
  opacity: 0.5;
}

.help-bottom-cta {
  margin-top: 54px;
  padding: 58px 20px;
  border-top: 1px solid rgba(92, 21, 56, 0.2);
  text-align: center;
}

.help-bottom-cta h2 {
  margin-bottom: 12px;
}

.help-bottom-cta p {
  max-width: 520px;
  margin: 0 auto 24px;
  color: var(--app-muted-soft);
  font-size: 17px;
  line-height: 1.6;
}

.help-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 0 4px;
  border-top: 1px solid rgba(92, 21, 56, 0.12);
  color: var(--app-muted-soft);
  font-size: 12px;
  line-height: 1.4;
}

.help-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.help-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}

.help-footer a:hover,
.help-footer a:focus-visible {
  color: var(--app-gold);
}

@media (max-width: 1180px) {
  .help-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .app-sidebar {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(240, 211, 122, 0.1);
  }

  .app-sidebar-inner {
    min-height: 0;
    padding: 20px;
  }

  .app-sidebar-brand {
    margin-bottom: 18px;
  }

  .app-sidebar-nav {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .app-sidebar-link {
    min-height: 44px;
  }

  .app-sidebar-user {
    margin-top: 16px;
  }

  .app-workspace {
    margin-left: 0;
  }

  .app-topbar {
    gap: 16px;
  }

  .help-main {
    padding-top: 34px;
  }

  .help-support-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .app-sidebar-inner {
    padding: 16px;
  }

  .app-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-topbar {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 16px;
  }

  .app-search {
    width: 100%;
  }

  .app-topbar-actions {
    justify-content: space-between;
  }

  .help-main {
    padding: 28px 16px 28px;
  }

  .help-page-head {
    margin-bottom: 28px;
  }

  .help-hero {
    margin-bottom: 36px;
    border-radius: 20px;
  }

  .help-hero p {
    font-size: 16px;
  }

  .help-actions,
  .help-button,
  .help-support-form .help-button {
    width: 100%;
  }

  .help-topic-grid,
  .help-form-grid {
    grid-template-columns: 1fr;
  }

  .help-topic-card,
  .help-side-card {
    padding: 20px;
  }

  .help-faq-trigger {
    padding: 16px 18px;
    font-size: 15px;
  }

  .help-faq-panel {
    padding: 0 18px 18px;
  }

  .help-status-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .help-bottom-cta {
    margin-top: 36px;
    padding: 44px 0;
  }
}

@media (max-width: 374px) {
  .app-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-sidebar-link {
    gap: 8px;
    padding: 10px 9px;
    font-size: 13px;
  }

  .app-sidebar-link .material-symbols-outlined {
    font-size: 19px;
  }

  .app-status-pill {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .help-premium-badge {
    max-width: 100%;
  }
}

/* App shell */
.app-sidebar-brand[href] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-sidebar-brand[href] > span {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: normal;
}

.app-sidebar-brand .app-brand-mark {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.42);
  border-radius: 12px;
  color: #110716;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.42), transparent 26%),
    linear-gradient(135deg, #f0d37a, #b78143);
  box-shadow: 0 16px 32px rgba(240, 211, 122, 0.16);
  font-size: 19px;
  font-weight: 900;
}

.app-sidebar-brand .app-brand-title,
.app-sidebar-brand .app-brand-subtitle {
  display: block;
}

.app-sidebar-brand .app-brand-title {
  color: var(--app-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.app-sidebar-brand .app-brand-subtitle {
  margin-top: 5px;
  color: rgba(240, 211, 122, 0.74);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.app-sidebar-user:has(.app-user-avatar) {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.app-user-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.22);
  border-radius: 999px;
  color: var(--app-gold);
  background: rgba(58, 23, 56, 0.5);
  font-size: 14px;
  font-weight: 900;
}

.app-sidebar-user:has(.app-user-avatar) strong,
.app-sidebar-user:has(.app-user-avatar) div span {
  display: block;
}

.app-sidebar-user:has(.app-user-avatar) div span {
  margin-top: 3px;
  color: var(--app-gold);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.app-user-status {
  grid-column: 1 / -1;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(240, 211, 122, 0.28);
  border-radius: 8px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.09);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.app-main {
  width: min(100%, 1220px);
  margin: 0 auto;
  padding: 44px clamp(18px, 3.4vw, 40px) 34px;
}

.app-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.app-page-head h1,
.app-section-heading h2,
.cabinet-current-card h2,
.cabinet-side-card h2,
.library-feature-card h3,
.library-material-card h3,
.history-side-card h2,
.profile-card h2,
.access-hero h2,
.access-info-card h2,
.material-article-card h2,
.material-progress-card h2 {
  margin: 0;
  color: var(--app-text);
}

.app-page-head h1 {
  margin-top: 7px;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.98;
}

.app-page-head p {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--app-muted);
  font-size: 17px;
  line-height: 1.7;
}

.app-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--app-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.app-premium-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(240, 211, 122, 0.35);
  border-radius: 999px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.1);
  box-shadow: inset 0 0 22px rgba(240, 211, 122, 0.06);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.app-section-heading h2 {
  margin-top: 8px;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  line-height: 1.12;
}

.app-text-link {
  display: inline-flex;
  align-items: center;
  color: var(--app-gold);
  font-size: 14px;
  font-weight: 800;
}

.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.app-button:hover,
.app-button:focus-visible {
  transform: translateY(-1px);
}

.app-button-primary {
  color: #130916;
  background: linear-gradient(135deg, #f3d981, #d2a052);
  box-shadow: 0 16px 34px rgba(217, 160, 82, 0.18);
}

.app-button-ghost {
  border-color: rgba(240, 211, 122, 0.2);
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.07);
}

.app-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.app-filter-tab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(240, 211, 122, 0.14);
  border-radius: 999px;
  color: var(--app-muted);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.app-filter-tab:hover,
.app-filter-tab:focus-visible,
.app-filter-tab.is-active {
  border-color: rgba(240, 211, 122, 0.42);
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.11);
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid rgba(240, 211, 122, 0.12);
  color: rgba(245, 237, 245, 0.62);
  font-size: 13px;
}

.app-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px 18px;
}

.app-footer a:hover,
.app-footer a:focus-visible {
  color: var(--app-gold);
}

/* Cabinet dashboard page */
.cabinet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 22px;
  margin-bottom: 42px;
}

.cabinet-current-card,
.cabinet-side-card,
.cabinet-section {
  border: 1px solid rgba(240, 211, 122, 0.16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 44%),
    rgba(24, 12, 32, 0.72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cabinet-current-card {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 26px;
}

.cabinet-current-visual {
  position: relative;
  display: grid;
  min-height: 280px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(240, 211, 122, 0.38), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(92, 21, 56, 0.56), transparent 46%),
    linear-gradient(145deg, rgba(42, 21, 56, 0.94), rgba(12, 7, 18, 0.94));
}

.cabinet-current-visual::before,
.cabinet-current-visual::after {
  position: absolute;
  inset: 42px;
  border: 1px solid rgba(240, 211, 122, 0.18);
  border-radius: 999px;
  content: "";
}

.cabinet-current-visual::after {
  inset: 78px;
  border-color: rgba(240, 211, 122, 0.3);
}

.cabinet-current-visual .material-symbols-outlined {
  position: relative;
  color: var(--app-gold);
  font-size: 74px;
  text-shadow: 0 0 34px rgba(240, 211, 122, 0.45);
}

.cabinet-current-content {
  min-width: 0;
}

.cabinet-current-content h2 {
  margin-top: 14px;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
}

.cabinet-current-content p,
.cabinet-side-card p {
  color: var(--app-muted);
  line-height: 1.7;
}

.cabinet-progress {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.cabinet-progress > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cabinet-progress strong {
  color: var(--app-gold);
  font-size: 30px;
}

.cabinet-progress span {
  color: var(--app-muted-soft);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.cabinet-progress-line,
.history-progress-line,
.material-progress-line {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.cabinet-progress-line span,
.history-progress-line span,
.material-progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0d37a, #8b4d9e);
}

.cabinet-actions,
.access-hero-actions,
.profile-security-actions,
.material-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cabinet-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.cabinet-side-card {
  padding: 22px;
  border-radius: 22px;
}

.cabinet-side-card h2 {
  margin-top: 10px;
  font-size: 24px;
}

.cabinet-section {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 24px;
}

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

/* Library page */
.library-tools,
.history-tools {
  display: grid;
  gap: 16px;
  margin-bottom: 36px;
}

.library-search,
.history-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid rgba(240, 211, 122, 0.14);
  border-radius: 16px;
  color: var(--app-muted-soft);
  background: rgba(24, 12, 32, 0.64);
}

.library-search input,
.history-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--app-text);
  background: transparent;
  font: inherit;
}

.library-section {
  margin-top: 42px;
}

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

.library-feature-card,
.library-material-card,
.library-start-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(240, 211, 122, 0.15);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 42%),
    rgba(24, 12, 32, 0.74);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
}

.library-feature-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  border-radius: 24px;
}

.library-card-visual {
  position: relative;
  display: grid;
  min-height: 150px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 211, 122, 0.2), transparent 18%),
    radial-gradient(circle at 28% 78%, rgba(123, 62, 142, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(31, 17, 45, 0.95), rgba(12, 7, 18, 0.96));
}

.library-card-visual::before {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(240, 211, 122, 0.17);
  border-radius: 32% 68% 46% 54%;
  content: "";
  transform: rotate(-18deg);
}

.library-card-visual .material-symbols-outlined {
  position: relative;
  color: var(--app-gold);
  font-size: 42px;
}

.visual-moon {
  background:
    radial-gradient(circle at 64% 28%, rgba(151, 156, 231, 0.28), transparent 18%),
    radial-gradient(circle at 28% 72%, rgba(88, 54, 133, 0.46), transparent 38%),
    linear-gradient(145deg, rgba(17, 16, 44, 0.96), rgba(9, 7, 20, 0.96));
}

.visual-heart {
  background:
    radial-gradient(circle at 62% 32%, rgba(255, 130, 164, 0.26), transparent 22%),
    radial-gradient(circle at 25% 76%, rgba(92, 21, 56, 0.6), transparent 38%),
    linear-gradient(145deg, rgba(43, 14, 38, 0.97), rgba(12, 7, 18, 0.96));
}

.visual-coin {
  background:
    radial-gradient(circle at 36% 34%, rgba(240, 211, 122, 0.28), transparent 22%),
    radial-gradient(circle at 78% 78%, rgba(62, 124, 95, 0.32), transparent 34%),
    linear-gradient(145deg, rgba(28, 42, 30, 0.94), rgba(12, 7, 18, 0.96));
}

.visual-calm {
  background:
    radial-gradient(circle at 62% 32%, rgba(122, 198, 188, 0.24), transparent 22%),
    radial-gradient(circle at 24% 76%, rgba(61, 72, 118, 0.42), transparent 36%),
    linear-gradient(145deg, rgba(17, 39, 43, 0.95), rgba(12, 7, 18, 0.96));
}

.visual-path {
  background:
    radial-gradient(circle at 50% 25%, rgba(181, 132, 233, 0.28), transparent 20%),
    radial-gradient(circle at 22% 78%, rgba(240, 211, 122, 0.13), transparent 36%),
    linear-gradient(145deg, rgba(38, 24, 62, 0.96), rgba(12, 7, 18, 0.96));
}

.visual-star {
  background:
    radial-gradient(circle at 52% 38%, rgba(240, 211, 122, 0.32), transparent 18%),
    radial-gradient(circle at 20% 80%, rgba(96, 57, 118, 0.44), transparent 38%),
    linear-gradient(145deg, rgba(35, 22, 48, 0.96), rgba(12, 7, 18, 0.96));
}

.library-card-label {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--app-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.library-feature-card h3,
.library-material-card h3 {
  font-size: 23px;
  line-height: 1.16;
}

.library-feature-card p,
.library-material-card p,
.library-start-card p {
  color: var(--app-muted);
  line-height: 1.65;
}

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

.library-material-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
}

.library-material-card .library-card-visual {
  min-height: 168px;
}

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

.library-card-meta span,
.library-count {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid rgba(240, 211, 122, 0.14);
  border-radius: 999px;
  color: var(--app-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 800;
}

.library-start-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 42px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 26px;
}

.library-start-card h2 {
  margin: 8px 0 0;
  font-size: clamp(26px, 3vw, 38px);
}

/* History page */
.history-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.history-stat-card,
.history-list-panel,
.history-side-card {
  border: 1px solid rgba(240, 211, 122, 0.15);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 42%),
    rgba(24, 12, 32, 0.72);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.history-stat-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  border-radius: 20px;
}

.history-stat-card .material-symbols-outlined {
  color: var(--app-gold);
  font-size: 26px;
}

.history-stat-card strong {
  color: var(--app-text);
  font-size: 30px;
  line-height: 1;
}

.history-stat-card span:last-child {
  color: var(--app-muted-soft);
  font-size: 13px;
  font-weight: 800;
}

.history-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 22px;
}

.history-list-panel {
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 24px;
}

.history-list {
  display: grid;
  gap: 14px;
}

.history-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(240, 211, 122, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.history-item-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.1);
}

.history-item-meta {
  color: var(--app-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.history-item h3 {
  margin: 6px 0 4px;
  color: var(--app-text);
  font-size: 19px;
}

.history-item p,
.history-side-card p {
  margin: 0;
  color: var(--app-muted);
  line-height: 1.55;
}

.history-aside {
  display: grid;
  gap: 18px;
  align-content: start;
}

.history-side-card {
  padding: 22px;
  border-radius: 22px;
}

.history-side-card h2 {
  margin-top: 10px;
  font-size: 24px;
}

.continue-card .app-button {
  width: 100%;
  margin-top: 18px;
}

.history-topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.history-topic-cloud span {
  padding: 8px 10px;
  border: 1px solid rgba(240, 211, 122, 0.13);
  border-radius: 999px;
  color: var(--app-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 800;
}

/* Profile page */
.profile-identity-card,
.profile-card {
  border: 1px solid rgba(240, 211, 122, 0.15);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 42%),
    rgba(24, 12, 32, 0.73);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.profile-identity-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 26px;
}

.profile-avatar-large {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.32);
  border-radius: 24px;
  color: #110716;
  background: linear-gradient(135deg, #f0d37a, #a96f49);
  font-size: 34px;
  font-weight: 900;
}

.profile-identity-card h2 {
  margin: 8px 0 4px;
  color: var(--app-text);
  font-size: clamp(28px, 4vw, 42px);
}

.profile-identity-card p {
  margin: 0;
  color: var(--app-muted);
}

.profile-status {
  padding: 10px 14px;
  border: 1px solid rgba(240, 211, 122, 0.3);
  border-radius: 999px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.09);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

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

.profile-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border-radius: 24px;
}

.profile-access-card,
.profile-security-card {
  grid-column: span 2;
  grid-template-columns: 64px minmax(0, 1fr);
}

.profile-card-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 20px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.1);
}

.profile-card p,
.profile-toggle-row span,
.profile-channel span {
  color: var(--app-muted);
  line-height: 1.6;
}

.profile-access-row,
.profile-channel,
.profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(240, 211, 122, 0.1);
}

.profile-access-row strong,
.profile-channel.is-connected span {
  color: var(--app-gold);
}

.profile-channel-list {
  display: grid;
  gap: 6px;
}

.profile-channel {
  justify-content: flex-start;
}

.profile-channel .material-symbols-outlined {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.08);
}

.profile-channel strong,
.profile-toggle-row strong {
  display: block;
  color: var(--app-text);
}

.profile-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-tag-grid span {
  padding: 9px 12px;
  border: 1px solid rgba(240, 211, 122, 0.14);
  border-radius: 999px;
  color: var(--app-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 800;
}

.profile-switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
}

.profile-switch input {
  position: absolute;
  opacity: 0;
}

.profile-switch span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240, 211, 122, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.profile-switch span::before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(245, 237, 245, 0.72);
  content: "";
  transition: transform 180ms ease, background-color 180ms ease;
}

.profile-switch input:checked + span {
  border-color: rgba(240, 211, 122, 0.46);
  background: rgba(240, 211, 122, 0.16);
}

.profile-switch input:checked + span::before {
  background: var(--app-gold);
  transform: translateX(22px);
}

/* Access page */
.access-hero,
.access-benefit-card,
.access-info-card,
.access-cta {
  border: 1px solid rgba(240, 211, 122, 0.15);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 42%),
    rgba(24, 12, 32, 0.74);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.access-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center;
  gap: 28px;
  padding: clamp(26px, 5vw, 48px);
  border-radius: 30px;
}

.access-status-chip {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid rgba(122, 198, 188, 0.26);
  border-radius: 999px;
  color: #93e0cf;
  background: rgba(122, 198, 188, 0.08);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.access-hero h2 {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 800;
  line-height: 1;
}

.access-hero p {
  max-width: 720px;
  color: var(--app-muted);
  font-size: 17px;
  line-height: 1.7;
}

.access-hero-orb {
  position: relative;
  display: grid;
  min-height: 260px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(240, 211, 122, 0.32), transparent 18%),
    radial-gradient(circle at 48% 52%, rgba(92, 21, 56, 0.72), transparent 58%);
}

.access-hero-orb::before,
.access-hero-orb::after {
  position: absolute;
  border: 1px solid rgba(240, 211, 122, 0.18);
  border-radius: inherit;
  content: "";
}

.access-hero-orb::before {
  inset: 26px;
}

.access-hero-orb::after {
  inset: 58px;
}

.access-hero-orb .material-symbols-outlined {
  position: relative;
  color: var(--app-gold);
  font-size: 76px;
}

.access-section {
  margin-top: 44px;
}

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

.access-benefit-card {
  min-width: 0;
  padding: 20px;
  border-radius: 22px;
}

.access-benefit-card .material-symbols-outlined {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 16px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.1);
}

.access-benefit-card h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 19px;
}

.access-benefit-card p,
.access-info-card p,
.access-info-card li,
.access-cta p {
  color: var(--app-muted);
  line-height: 1.65;
}

.access-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.access-info-card {
  min-width: 0;
  padding: 26px;
  border-radius: 24px;
}

.access-info-card h2 {
  margin-top: 10px;
  font-size: 28px;
}

.access-info-card ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.access-roadmap {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.access-roadmap div {
  padding-left: 16px;
  border-left: 2px solid rgba(240, 211, 122, 0.22);
}

.access-roadmap span {
  color: var(--app-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.access-roadmap p {
  margin: 5px 0 0;
}

.access-faq .help-faq-list {
  max-width: 860px;
}

.access-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 44px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 26px;
}

.access-cta h2 {
  margin: 8px 0 0;
  color: var(--app-text);
  font-size: clamp(26px, 3vw, 38px);
}

/* Material reading page */
.material-read-main {
  max-width: 1240px;
}

.material-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--app-muted-soft);
  font-size: 13px;
  font-weight: 800;
}

.material-breadcrumbs a {
  color: var(--app-muted);
}

.material-breadcrumbs a:hover,
.material-breadcrumbs a:focus-visible {
  color: var(--app-gold);
}

.material-head {
  margin-bottom: 26px;
}

.material-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.material-badges span {
  padding: 8px 11px;
  border: 1px solid rgba(240, 211, 122, 0.16);
  border-radius: 999px;
  color: var(--app-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 900;
}

.material-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 24px;
  align-items: start;
}

.material-article-card,
.material-progress-card,
.material-practice-card,
.material-note-card,
.material-final-cta {
  border: 1px solid rgba(240, 211, 122, 0.15);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 42%),
    rgba(24, 12, 32, 0.74);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.material-article-card {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 28px;
}

.material-story-block {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-bottom: 34px;
}

.material-arcana-card {
  position: relative;
  display: grid;
  min-height: 330px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 36%, rgba(240, 211, 122, 0.32), transparent 18%),
    radial-gradient(circle at 50% 54%, rgba(92, 21, 56, 0.65), transparent 58%),
    linear-gradient(145deg, rgba(35, 20, 50, 0.96), rgba(9, 7, 18, 0.98));
  text-align: center;
}

.material-arcana-orbit,
.material-arcana-card::before,
.material-arcana-card::after {
  position: absolute;
  border: 1px solid rgba(240, 211, 122, 0.16);
  border-radius: 50%;
  content: "";
}

.material-arcana-orbit {
  inset: 34px;
}

.material-arcana-card::before {
  inset: 68px;
}

.material-arcana-card::after {
  inset: 104px;
  border-color: rgba(240, 211, 122, 0.27);
}

.material-arcana-card .material-symbols-outlined {
  position: relative;
  color: var(--app-gold);
  font-size: 72px;
  text-shadow: 0 0 34px rgba(240, 211, 122, 0.45);
}

.material-arcana-card strong,
.material-arcana-card small {
  position: relative;
  display: block;
  color: var(--app-text);
}

.material-arcana-card strong {
  margin-top: -28px;
  font-size: 26px;
}

.material-arcana-card small {
  margin-top: -26px;
  color: var(--app-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.material-story-block h2 {
  margin-top: 12px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
}

.material-story-block p,
.material-text-section p,
.material-practice-card li,
.material-note-card p,
.material-final-cta p {
  color: var(--app-muted);
  font-size: 16px;
  line-height: 1.78;
}

.material-text-section {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.material-text-section h2,
.material-practice-card h2,
.material-note-card h2 {
  font-size: 28px;
  line-height: 1.15;
}

.material-text-section blockquote {
  margin: 8px 0 0;
  padding: 20px 22px;
  border-left: 3px solid var(--app-gold);
  border-radius: 16px;
  color: var(--app-text);
  background: rgba(240, 211, 122, 0.08);
  font-size: 18px;
  line-height: 1.55;
}

.material-practice-card,
.material-note-card {
  margin-top: 26px;
  padding: 24px;
  border-radius: 22px;
}

.material-practice-card ol {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding-left: 20px;
}

.material-note-card textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(240, 211, 122, 0.16);
  border-radius: 16px;
  outline: 0;
  color: var(--app-text);
  background: rgba(7, 4, 11, 0.42);
  font: inherit;
  line-height: 1.55;
}

.material-note-card textarea:focus {
  border-color: rgba(240, 211, 122, 0.46);
}

.material-save-message {
  min-height: 22px;
  margin: 10px 0 0;
  color: var(--app-gold);
  font-size: 13px;
  font-weight: 800;
}

.material-aside {
  position: sticky;
  top: 88px;
  min-width: 0;
}

.material-progress-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
}

.material-progress-circle {
  display: grid;
  width: 142px;
  height: 142px;
  margin: 4px auto 0;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, rgba(24, 12, 32, 0.94) 74%, transparent 76%),
    conic-gradient(#f0d37a 0 65%, rgba(255, 255, 255, 0.09) 65% 100%);
}

.material-progress-circle span {
  color: var(--app-gold);
  font-size: 30px;
  font-weight: 900;
}

.material-progress-card dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.material-progress-card dl div {
  display: grid;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid rgba(240, 211, 122, 0.1);
}

.material-progress-card dt {
  color: var(--app-muted-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.material-progress-card dd {
  margin: 0;
  color: var(--app-text);
  font-weight: 800;
}

.material-progress-card .app-button {
  width: 100%;
}

.material-section {
  margin-top: 44px;
}

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

.material-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 44px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 26px;
}

.material-final-cta h2 {
  margin: 8px 0 0;
  color: var(--app-text);
  font-size: clamp(26px, 3vw, 38px);
}

@media (max-width: 1120px) {
  .library-feature-card,
  .material-story-block {
    grid-template-columns: 1fr;
  }

  .library-card-grid,
  .cabinet-card-grid,
  .material-recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .cabinet-layout,
  .history-layout,
  .material-layout {
    grid-template-columns: 1fr;
  }

  .material-aside {
    position: static;
  }
}

@media (max-width: 767px) {
  .app-main {
    padding: 28px 16px 28px;
  }

  .app-page-head,
  .app-section-heading,
  .library-start-card,
  .access-cta,
  .material-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-premium-badge {
    max-width: 100%;
    white-space: normal;
  }

  .app-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-footer nav {
    justify-content: flex-start;
  }

  .cabinet-current-card,
  .access-hero,
  .profile-identity-card {
    grid-template-columns: 1fr;
  }

  .cabinet-current-visual,
  .access-hero-orb {
    min-height: 220px;
  }

  .library-feature-grid,
  .library-card-grid,
  .cabinet-card-grid,
  .history-stats,
  .profile-layout,
  .access-benefit-grid,
  .access-info-grid,
  .material-recommend-grid {
    grid-template-columns: 1fr;
  }

  .profile-access-card,
  .profile-security-card {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .history-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .history-item .app-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .material-arcana-card {
    min-height: 280px;
  }

  .app-button,
  .cabinet-actions .app-button,
  .access-hero-actions .app-button,
  .profile-security-actions .app-button,
  .material-note-actions .app-button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .app-filter-tab {
    flex: 1 1 calc(50% - 10px);
    padding-inline: 10px;
  }

  .profile-identity-card,
  .profile-card,
  .history-list-panel,
  .access-info-card,
  .material-article-card {
    padding: 18px;
  }

  .library-feature-card,
  .library-material-card {
    padding: 16px;
  }

  .library-card-visual,
  .library-material-card .library-card-visual {
    min-height: 144px;
  }
}

/* Mobile app shell */
.app-mobile-brand {
  display: none;
}

body.app-shell-page {
  margin: 0;
  overflow-x: hidden;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell-page {
    overflow-x: hidden;
  }

  .app-sidebar,
  .app-topbar,
  .app-workspace,
  .app-main,
  .help-main {
    box-sizing: border-box;
    max-width: 100%;
  }

  .app-main,
  .help-main {
    overflow-x: hidden;
  }

  .app-filter-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .access-hero,
  .access-info-grid {
    grid-template-columns: 1fr;
  }

  .access-hero-orb {
    display: none;
  }

  .history-item {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .history-item .app-button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 767px) {
  .app-shell-page {
    --mobile-topbar-height: 64px;
    --mobile-bottom-nav-height: 76px;
    min-width: 0;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 18% 0%, rgba(92, 21, 56, 0.38), transparent 24rem),
      radial-gradient(circle at 86% 18%, rgba(43, 23, 70, 0.38), transparent 24rem),
      linear-gradient(180deg, #07040b 0%, #120716 52%, #07040b 100%);
  }

  .app-shell-page *,
  .app-shell-page *::before,
  .app-shell-page *::after {
    min-width: 0;
  }

  .app-workspace {
    margin-left: 0;
    padding-top: var(--mobile-topbar-height);
  }

  .app-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 80;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--mobile-topbar-height);
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(7, 4, 11, 0.84);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  }

  .app-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  .app-mobile-brand > .material-symbols-outlined {
    color: var(--app-gold);
    font-size: 24px;
  }

  .app-mobile-brand strong,
  .app-mobile-brand small {
    display: block;
  }

  .app-mobile-brand strong {
    color: var(--app-text);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
  }

  .app-mobile-brand small {
    margin-top: 4px;
    color: var(--app-gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .app-topbar > .app-search,
  .app-topbar-actions .app-status-pill,
  .app-topbar-actions .app-icon-button:first-child {
    display: none;
  }

  .app-topbar-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .app-icon-button {
    width: 42px;
    height: 42px;
    border-color: rgba(240, 211, 122, 0.12);
    color: var(--app-muted);
    background: rgba(255, 255, 255, 0.04);
  }

  .app-sidebar {
    position: fixed;
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
    z-index: 90;
    width: auto;
    height: var(--mobile-bottom-nav-height);
    border: 1px solid rgba(240, 211, 122, 0.14);
    border-radius: 24px;
    background: rgba(7, 4, 11, 0.9);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  .app-sidebar-inner {
    display: block;
    height: 100%;
    min-height: 0;
    padding: 6px;
  }

  .app-sidebar-brand,
  .app-sidebar-user {
    display: none !important;
  }

  .app-sidebar-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    height: 100%;
  }

  .app-sidebar-link[href$="access.html"] {
    display: none !important;
  }

  .app-sidebar-link {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    padding: 7px 2px 8px;
    overflow: visible;
    border: 0;
    border-radius: 18px;
    color: rgba(245, 237, 245, 0.64);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
  }

  .app-sidebar-link .material-symbols-outlined {
    font-size: 23px;
  }

  .app-sidebar-link span:not(.material-symbols-outlined) {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-sidebar-link:hover,
  .app-sidebar-link:focus-visible,
  .app-sidebar-link.is-active {
    color: var(--app-gold);
    background: rgba(240, 211, 122, 0.1);
  }

  .app-sidebar-link.is-active {
    border-right-width: 0;
    box-shadow: inset 0 -2px 0 rgba(240, 211, 122, 0.86), 0 0 22px rgba(240, 211, 122, 0.06);
  }

  .app-sidebar-link.is-active .material-symbols-outlined {
    font-size: 25px;
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
    text-shadow: 0 0 10px rgba(240, 211, 122, 0.36);
  }

  .app-main,
  .help-main {
    width: min(100%, 430px);
    max-width: 430px;
    padding: 24px 16px calc(var(--mobile-bottom-nav-height) + 54px + env(safe-area-inset-bottom));
  }

  .app-page-head,
  .help-page-head {
    margin-bottom: 24px;
  }

  .app-page-head h1,
  .help-page-head h1 {
    font-size: 32px;
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  .app-page-head p,
  .help-page-head p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
  }

  .app-page-kicker {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .app-premium-badge,
  .help-premium-badge {
    display: none;
  }

  .app-section-heading {
    margin-bottom: 16px;
  }

  .app-section-heading h2,
  .help-section-title h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  .app-button,
  .help-button {
    min-height: 52px;
    border-radius: 999px;
    font-size: 15px;
  }

  .app-filter-tabs {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding: 0 0 4px;
    overflow: visible;
  }

  .app-filter-tab {
    flex: 0 1 auto;
    min-height: 42px;
    padding: 0 15px;
    white-space: nowrap;
  }

  .app-footer {
    margin-top: 34px;
    padding-bottom: 0;
    font-size: 12px;
  }
}

/* Mobile cabinet pages */
@media (max-width: 767px) {
  .cabinet-layout,
  .library-section,
  .history-layout,
  .profile-layout,
  .access-section,
  .material-section {
    margin-top: 28px;
  }

  .cabinet-layout {
    display: grid;
    gap: 18px;
    margin-bottom: 30px;
  }

  .cabinet-current-card,
  .library-feature-card,
  .library-material-card,
  .history-stat-card,
  .history-list-panel,
  .history-side-card,
  .profile-identity-card,
  .profile-card,
  .access-hero,
  .access-benefit-card,
  .access-info-card,
  .material-article-card,
  .material-progress-card,
  .material-practice-card,
  .material-note-card,
  .help-topic-card,
  .help-faq-item,
  .help-support-form-wrap,
  .help-side-card {
    max-width: 100%;
    border-radius: 18px;
  }

  .cabinet-current-card {
    display: block;
    padding: 20px;
    overflow: hidden;
  }

  .cabinet-current-visual {
    float: left;
    width: 64px;
    height: 64px;
    min-height: 64px;
    margin: 2px 14px 10px 0;
    border-radius: 14px;
  }

  .cabinet-current-visual::before,
  .cabinet-current-visual::after {
    display: none;
  }

  .cabinet-current-visual .material-symbols-outlined {
    font-size: 33px;
  }

  .cabinet-current-content h2 {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.15;
  }

  .cabinet-current-content p {
    margin: 6px 0 0;
    color: rgba(203, 190, 203, 0.86);
    font-size: 13px;
    line-height: 1.5;
  }

  .cabinet-progress {
    clear: both;
    margin: 22px 0 18px;
  }

  .cabinet-progress strong {
    font-size: 28px;
  }

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

  .cabinet-side-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 158px;
    padding: 16px;
  }

  .cabinet-side-card h2 {
    font-size: 18px;
    line-height: 1.2;
  }

  .cabinet-side-card p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
  }

  .cabinet-section {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cabinet-section .app-section-heading {
    flex-direction: row;
    align-items: flex-end;
  }

  .cabinet-card-grid {
    gap: 12px;
  }

  .cabinet-card-grid .library-material-card {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px;
  }

  .cabinet-card-grid .library-card-visual {
    min-height: 64px;
    height: 64px;
    border-radius: 14px;
  }

  .cabinet-card-grid .library-card-visual .material-symbols-outlined {
    font-size: 28px;
  }

  .cabinet-card-grid .library-material-card p {
    display: none;
  }

  .cabinet-card-grid .library-material-card h3 {
    font-size: 17px;
  }

  .library-page #library-title {
    font-size: 0;
  }

  .library-page #library-title::after {
    content: "Библиотека";
    font-size: 32px;
    line-height: 1.16;
  }

  .library-tools,
  .history-tools {
    gap: 14px;
    margin-bottom: 26px;
  }

  .library-search,
  .history-search {
    min-height: 48px;
    padding: 11px 14px;
    border-radius: 16px;
  }

  .library-feature-grid,
  .library-card-grid {
    gap: 14px;
  }

  .library-feature-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .library-feature-card .library-card-visual {
    min-height: 72px;
    height: 72px;
    border-radius: 14px;
  }

  .library-feature-card h3,
  .library-material-card h3 {
    font-size: 20px;
  }

  .library-feature-card p,
  .library-material-card p,
  .library-start-card p {
    font-size: 14px;
  }

  .library-material-card {
    padding: 16px;
  }

  .library-material-card .library-card-visual {
    min-height: 170px;
  }

  .library-start-card {
    margin-top: 28px;
    padding: 20px;
  }

  .history-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }

  .history-stat-card {
    padding: 15px;
  }

  .history-stat-card strong {
    font-size: 26px;
  }

  .history-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .history-aside {
    order: -1;
  }

  .history-list-panel,
  .history-side-card {
    padding: 18px;
  }

  .history-item {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .history-item h3 {
    font-size: 18px;
  }

  .history-item p {
    font-size: 13px;
  }

  .continue-card {
    order: -3;
  }

  .profile-identity-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .profile-avatar-large {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 26px;
  }

  .profile-identity-card h2 {
    font-size: 28px;
  }

  .profile-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .profile-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .profile-layout .profile-card:nth-child(1) {
    order: 1;
  }

  .profile-layout .profile-card:nth-child(3) {
    order: 2;
  }

  .profile-layout .profile-card:nth-child(2) {
    order: 3;
  }

  .profile-layout .profile-card:nth-child(4) {
    order: 4;
  }

  .profile-layout .profile-card:nth-child(5) {
    order: 5;
  }

  .profile-card {
    padding: 18px;
  }

  .profile-channel,
  .profile-toggle-row,
  .profile-access-row {
    gap: 12px;
  }

  .profile-tag-grid {
    gap: 8px;
  }

  .profile-tag-grid span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .profile-security-actions {
    flex-direction: column;
  }

  .access-hero {
    display: block;
    padding: 22px;
  }

  .access-hero-orb {
    display: none;
  }

  .access-status-chip {
    margin-bottom: 14px;
  }

  .access-hero h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .access-hero p {
    font-size: 15px;
    line-height: 1.6;
  }

  .access-hero-actions,
  .access-cta {
    flex-direction: column;
  }

  .access-benefit-grid,
  .access-info-grid {
    gap: 14px;
  }

  .access-benefit-card,
  .access-info-card {
    padding: 18px;
  }

  .access-info-card h2,
  .access-cta h2 {
    font-size: 24px;
  }

  .access-roadmap {
    gap: 12px;
  }

  .access-cta {
    margin-top: 28px;
    padding: 20px;
  }

  .material-breadcrumbs {
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.4;
  }

  .material-badges {
    gap: 7px;
  }

  .material-badges span {
    font-size: 11px;
  }

  .material-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .material-aside {
    order: -1;
    position: static;
    width: 100%;
  }

  .material-progress-card {
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 12px 14px;
    padding: 16px;
  }

  .material-progress-card .app-page-kicker {
    grid-column: 1 / -1;
  }

  .material-progress-circle {
    grid-row: span 2;
    width: 74px;
    height: 74px;
    margin: 0;
  }

  .material-progress-circle span {
    font-size: 20px;
  }

  .material-progress-card h2 {
    font-size: 18px;
  }

  .material-progress-line {
    width: 100%;
  }

  .material-progress-card dl {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-progress-card .app-button {
    grid-column: 1 / -1;
  }

  .material-article-card {
    padding: 18px;
  }

  .material-story-block {
    display: block;
    margin-bottom: 26px;
  }

  .material-arcana-card {
    width: min(100%, 230px);
    min-height: 220px;
    margin: 0 auto 20px;
    border-radius: 22px;
  }

  .material-arcana-card .material-symbols-outlined {
    font-size: 54px;
  }

  .material-story-block h2,
  .material-text-section h2,
  .material-practice-card h2,
  .material-note-card h2 {
    font-size: 25px;
    line-height: 1.18;
  }

  .material-story-block p,
  .material-text-section p,
  .material-practice-card li,
  .material-note-card p,
  .material-final-cta p {
    font-size: 16px;
    line-height: 1.72;
  }

  .material-text-section blockquote {
    padding: 18px;
    font-size: 16px;
  }

  .material-practice-card,
  .material-note-card {
    padding: 18px;
  }

  .material-recommend-grid {
    gap: 14px;
  }

  .material-final-cta {
    margin-top: 28px;
    padding: 20px;
  }

  .help-hero {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .help-hero h2 {
    font-size: 28px;
    line-height: 1.15;
  }

  .help-hero p {
    font-size: 15px;
    line-height: 1.6;
  }

  .help-topic-grid,
  .help-support-section,
  .help-form-grid {
    grid-template-columns: 1fr;
  }

  .help-topic-card,
  .help-side-card,
  .help-support-form-wrap {
    padding: 18px;
  }

  .help-bottom-cta {
    margin-top: 28px;
    padding: 30px 0 8px;
  }
}

@media (max-width: 360px) {
  .app-sidebar {
    inset-inline: 6px;
    height: 72px;
  }

  .app-sidebar-link {
    font-size: 9px;
  }

  .app-sidebar-link .material-symbols-outlined {
    font-size: 21px;
  }

  .cabinet-side {
    grid-template-columns: 1fr;
  }

  .material-progress-card dl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .app-filter-tab {
    flex: 1 1 calc(50% - 8px);
  }
}

/* Cabinet mobile polish */
@media (max-width: 767px) {
  .cabinet-page .app-main {
    padding-top: 26px;
  }

  .cabinet-page .cabinet-head {
    margin-bottom: 18px;
  }

  .cabinet-page .cabinet-head .app-page-kicker {
    margin-bottom: 8px;
  }

  .cabinet-page .cabinet-head h1 {
    font-size: 32px;
    line-height: 1.12;
  }

  .cabinet-page .cabinet-head p {
    max-width: 29rem;
    margin-top: 10px;
    color: rgba(203, 190, 203, 0.86);
    font-size: 16px;
    line-height: 1.6;
  }

  .cabinet-page .cabinet-layout {
    gap: 18px;
    margin-top: 0;
    margin-bottom: 28px;
  }

  .cabinet-page .cabinet-current-card {
    position: relative;
    display: block;
    min-height: 0;
    padding: 22px 20px 20px;
    border-radius: 18px;
    background:
      radial-gradient(74% 68% at 82% 18%, rgba(240, 211, 122, 0.13), transparent 62%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 42%),
      rgba(24, 12, 32, 0.72);
  }

  .cabinet-page .cabinet-current-card::before,
  .cabinet-page .cabinet-current-card::after {
    position: absolute;
    pointer-events: none;
    content: "";
  }

  .cabinet-page .cabinet-current-card::before {
    right: -54px;
    bottom: -68px;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: rgba(92, 21, 56, 0.18);
    filter: blur(34px);
  }

  .cabinet-page .cabinet-current-card::after {
    top: 26px;
    right: 20px;
    width: 22px;
    height: 22px;
    background: rgba(240, 211, 122, 0.42);
    -webkit-mask: var(--app-icon-spark) center / contain no-repeat;
    mask: var(--app-icon-spark) center / contain no-repeat;
  }

  .cabinet-page .cabinet-current-content {
    position: relative;
    z-index: 1;
  }

  .cabinet-page .cabinet-current-content > .app-page-kicker {
    display: block;
    max-width: calc(100% - 40px);
    margin-bottom: 18px;
    color: var(--app-gold-muted);
    font-size: 10px;
  }

  .cabinet-page .cabinet-current-visual {
    position: absolute;
    top: 72px;
    left: 20px;
    float: none;
    width: 64px;
    height: 64px;
    min-height: 64px;
    margin: 0;
    border-color: rgba(240, 211, 122, 0.18);
    border-radius: 14px;
    background:
      radial-gradient(circle at 56% 48%, rgba(240, 211, 122, 0.26), transparent 24%),
      linear-gradient(145deg, rgba(58, 23, 56, 0.42), rgba(13, 7, 18, 0.78));
    box-shadow: none;
  }

  .cabinet-page .cabinet-current-visual .material-symbols-outlined {
    color: rgba(240, 211, 122, 0.88);
    font-size: 32px;
  }

  .cabinet-page .cabinet-current-content h2,
  .cabinet-page .cabinet-current-content p {
    margin-left: 78px;
  }

  .cabinet-page .cabinet-current-content h2 {
    margin-top: 0;
    font-size: 24px;
    line-height: 1.18;
  }

  .cabinet-page .cabinet-current-content p {
    min-height: 42px;
    margin-top: 6px;
    color: rgba(203, 190, 203, 0.76);
    font-size: 13px;
    line-height: 1.45;
  }

  .cabinet-page .cabinet-progress {
    margin: 24px 0 18px;
  }

  .cabinet-page .cabinet-progress > div:first-child {
    gap: 8px;
    margin-bottom: 6px;
  }

  .cabinet-page .cabinet-progress strong {
    font-size: 30px;
    line-height: 1;
  }

  .cabinet-page .cabinet-progress span {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .cabinet-page .cabinet-progress-line {
    height: 7px;
  }

  .cabinet-page .cabinet-actions {
    gap: 12px;
  }

  .cabinet-page .cabinet-actions .app-button {
    min-height: 52px;
    border-radius: 999px;
  }

  .cabinet-page .cabinet-side {
    gap: 12px;
  }

  .cabinet-page .cabinet-side-card {
    min-height: 158px;
    padding: 16px;
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 44%),
      rgba(24, 12, 32, 0.66);
  }

  .cabinet-page .cabinet-side-card .app-page-kicker {
    margin-bottom: 9px;
    font-size: 10px;
  }

  .cabinet-page .cabinet-side-card h2 {
    font-size: 18px;
    line-height: 1.18;
  }

  .cabinet-page .cabinet-side-card p {
    margin-top: 10px;
    color: rgba(203, 190, 203, 0.76);
    font-size: 12px;
    line-height: 1.42;
  }

  .cabinet-page .cabinet-side-card .app-text-link {
    margin-top: auto;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cabinet-page .cabinet-section {
    margin-top: 0;
  }

  .cabinet-page .cabinet-section .app-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }

  .cabinet-page .cabinet-section .app-section-heading > div {
    min-width: 0;
  }

  .cabinet-page .cabinet-section .app-section-heading h2 {
    margin-top: 4px;
    font-size: 24px;
    line-height: 1.18;
  }

  .cabinet-page .cabinet-section .app-text-link {
    flex: 0 0 auto;
    color: rgba(203, 190, 203, 0.78);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cabinet-page .cabinet-card-grid {
    gap: 14px;
  }

  .cabinet-page .cabinet-card-grid .library-material-card {
    position: relative;
    grid-template-columns: 64px minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 14px;
    padding: 14px;
    border-radius: 16px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 42%),
      rgba(24, 12, 32, 0.66);
  }

  .cabinet-page .cabinet-card-grid .library-material-card::after {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 10px;
    height: 10px;
    justify-self: center;
    border-top: 2px solid rgba(203, 190, 203, 0.44);
    border-right: 2px solid rgba(203, 190, 203, 0.44);
    content: "";
    transform: rotate(45deg);
  }

  .cabinet-page .cabinet-card-grid .library-card-visual {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 64px;
    min-height: 64px;
    height: 64px;
  }

  .cabinet-page .cabinet-card-grid .library-card-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 10px;
  }

  .cabinet-page .cabinet-card-grid .library-material-card h3 {
    grid-column: 2;
    grid-row: 2;
    font-size: 17px;
    line-height: 1.18;
  }
}

@media (max-width: 360px) {
  .cabinet-page .app-sidebar-link {
    font-size: 8px;
  }

  .cabinet-page .cabinet-current-content h2,
  .cabinet-page .cabinet-current-content p {
    margin-left: 72px;
  }

  .cabinet-page .cabinet-current-visual {
    width: 58px;
    height: 58px;
    min-height: 58px;
  }

  .cabinet-page .cabinet-side {
    grid-template-columns: 1fr;
  }
}

/* Cabinet mobile reference page */
.cabinet-mobile-reference-page {
  --cmr-bg: #07040b;
  --cmr-card: rgba(24, 12, 32, 0.6);
  --cmr-card-strong: rgba(31, 14, 39, 0.78);
  --cmr-glass: rgba(255, 255, 255, 0.04);
  --cmr-line: rgba(185, 154, 79, 0.14);
  --cmr-line-soft: rgba(255, 255, 255, 0.08);
  --cmr-text: #f5edf5;
  --cmr-text-warm: #f3e9da;
  --cmr-muted: #cbbecb;
  --cmr-muted-2: #8f8192;
  --cmr-gold: #f0d37a;
  --cmr-gold-strong: #ffe195;
  --cmr-gold-muted: #b99a4f;
  --cmr-wine: #3a1738;
  --cmr-icon-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l1.8 6.1L20 10l-6.2 1.9L12 22l-1.8-10.1L4 10l6.2-1.9L12 2z'/%3E%3C/svg%3E");
  --cmr-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E");
  --cmr-icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5C5.7 4.7 7.5 4 10 4c1.2 0 2 .3 2 .3v15.2c0-.1-.8-.5-2-.5-2.5 0-4.3.8-6 1.7V5.5zm16 0v15.2c-1.7-.9-3.5-1.7-6-1.7-1.2 0-2 .4-2 .5V4.3s.8-.3 2-.3c2.5 0 4.3.7 6 1.5z'/%3E%3C/svg%3E");
  --cmr-icon-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 4h3v16H5V4zm5 0h3v16h-3V4zm5.5.5 2.7-.8 3.8 14.8-2.8.7-3.7-14.7z'/%3E%3C/svg%3E");
  --cmr-icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-2.05-4.95L14 10h7V3l-2.6 2.6A8.96 8.96 0 0 0 12 3zm1 4h-2v6l5 3 1-1.7-4-2.3V7z'/%3E%3C/svg%3E");
  --cmr-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 18h2v-2h-2v2zm1-16a7 7 0 0 0-7 7h2a5 5 0 1 1 8.7 3.35C13.95 14 13 14.9 13 17h-2c0-2.95 1.4-4.2 3.2-5.9A3 3 0 1 0 9 9H7a5 5 0 0 1 5-5z'/%3E%3C/svg%3E");
  --cmr-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM1 11h3v2H1v-2zm19 0h3v2h-3v-2zM4.2 3.8l2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4zm14.9 14.9 2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4zm0-13.5 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zM3.8 19.1l2.1-2.1 1.4 1.4-2.1 2.1-1.4-1.4z'/%3E%3C/svg%3E");
  --cmr-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.3 7.2H22l-6.2 4.4 2.4 7.4-6.2-4.6L5.8 21l2.4-7.4L2 9.2h7.7L12 2z'/%3E%3C/svg%3E");
  --cmr-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9 18 6-6-6-6-1.4 1.4 4.6 4.6-4.6 4.6L9 18z'/%3E%3C/svg%3E");
  --cmr-icon-calm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a5 5 0 0 0-5 5c0 2.3 1.5 4.2 3.5 4.8V15H7a4 4 0 0 0 0 8h10a4 4 0 0 0 0-8h-3.5v-2.2A5 5 0 0 0 12 3zm-3 14h6a2 2 0 0 1 0 4H9a2 2 0 0 1 0-4z'/%3E%3C/svg%3E");
  --cmr-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.5-4.4-9.4-9.1C1.2 8.5 3.2 5 6.8 5c2 0 3.4 1.1 4.2 2.2C11.8 6.1 13.2 5 15.2 5c3.6 0 5.6 3.5 4.2 6.9C19.5 16.6 12 21 12 21z'/%3E%3C/svg%3E");
  --cmr-icon-practice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7c2.6-2.6 6.2-2.6 8.8 0l1.4 1.4c2.2 2.2 2.2 5.8 0 8s-5.8 2.2-8 0L7.8 15l1.4-1.4 1.4 1.4a3.7 3.7 0 1 0 5.2-5.2l-1.4-1.4a4.2 4.2 0 0 0-6 0L7 9.8 5.6 8.4 7 7zm2.8 2.6 1.4 1.4-3 3-1.4-1.4 3-3zm6.4.8 1.4 1.4-3 3-1.4-1.4 3-3z'/%3E%3C/svg%3E");
  --cmr-icon-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 9.5A2.5 2.5 0 1 0 12 14a2.5 2.5 0 0 0 0-4.5zM12 2c1.5 2 1.5 3.7 0 5.2C10.5 5.7 10.5 4 12 2zm0 14.8c1.5 1.5 1.5 3.2 0 5.2-1.5-2-1.5-3.7 0-5.2zM2 12c2-1.5 3.7-1.5 5.2 0C5.7 13.5 4 13.5 2 12zm14.8 0c1.5-1.5 3.2-1.5 5.2 0-2 1.5-3.7 1.5-5.2 0zM4.9 4.9c2.5.4 3.7 1.6 3.7 3.7-2.1 0-3.3-1.2-3.7-3.7zm10.5 10.5c2.1 0 3.3 1.2 3.7 3.7-2.5-.4-3.7-1.6-3.7-3.7zm3.7-10.5c-.4 2.5-1.6 3.7-3.7 3.7 0-2.1 1.2-3.3 3.7-3.7zM8.6 15.4c0 2.1-1.2 3.3-3.7 3.7.4-2.5 1.6-3.7 3.7-3.7z'/%3E%3C/svg%3E");
  min-width: 0;
  min-height: max(884px, 100dvh);
  margin: 0;
  overflow-x: hidden;
  color: var(--cmr-text);
  background:
    radial-gradient(circle at 22% 0%, rgba(92, 21, 56, 0.34), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(43, 23, 70, 0.34), transparent 24rem),
    linear-gradient(180deg, #07040b 0%, #120716 52%, #07040b 100%);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.cabinet-mobile-reference-page *,
.cabinet-mobile-reference-page *::before,
.cabinet-mobile-reference-page *::after {
  box-sizing: border-box;
  min-width: 0;
}

.cabinet-mobile-reference-page a {
  color: inherit;
  text-decoration: none;
}

.cabinet-mobile-reference-page .cmr-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--cmr-icon-mask, var(--cmr-icon-spark)) center / contain no-repeat;
  mask: var(--cmr-icon-mask, var(--cmr-icon-spark)) center / contain no-repeat;
}

.cabinet-mobile-reference-page .cmr-icon-spark { --cmr-icon-mask: var(--cmr-icon-spark); }
.cabinet-mobile-reference-page .cmr-icon-user { --cmr-icon-mask: var(--cmr-icon-user); }
.cabinet-mobile-reference-page .cmr-icon-book { --cmr-icon-mask: var(--cmr-icon-book); }
.cabinet-mobile-reference-page .cmr-icon-library { --cmr-icon-mask: var(--cmr-icon-library); }
.cabinet-mobile-reference-page .cmr-icon-history { --cmr-icon-mask: var(--cmr-icon-history); }
.cabinet-mobile-reference-page .cmr-icon-help { --cmr-icon-mask: var(--cmr-icon-help); }
.cabinet-mobile-reference-page .cmr-icon-sun { --cmr-icon-mask: var(--cmr-icon-sun); }
.cabinet-mobile-reference-page .cmr-icon-star { --cmr-icon-mask: var(--cmr-icon-star); }
.cabinet-mobile-reference-page .cmr-icon-chevron { --cmr-icon-mask: var(--cmr-icon-chevron); }
.cabinet-mobile-reference-page .cmr-icon-calm { --cmr-icon-mask: var(--cmr-icon-calm); }
.cabinet-mobile-reference-page .cmr-icon-heart { --cmr-icon-mask: var(--cmr-icon-heart); }
.cabinet-mobile-reference-page .cmr-icon-practice { --cmr-icon-mask: var(--cmr-icon-practice); }
.cabinet-mobile-reference-page .cmr-icon-flower { --cmr-icon-mask: var(--cmr-icon-flower); }

.cabinet-mobile-reference-page .cmr-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(7, 4, 11, 0.84);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.cabinet-mobile-reference-page .cmr-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cabinet-mobile-reference-page .cmr-brand > .cmr-icon {
  color: var(--cmr-gold);
  font-size: 23px;
}

.cabinet-mobile-reference-page .cmr-brand strong,
.cabinet-mobile-reference-page .cmr-brand small {
  display: block;
}

.cabinet-mobile-reference-page .cmr-brand strong {
  color: var(--cmr-text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.05;
}

.cabinet-mobile-reference-page .cmr-brand small {
  margin-top: 5px;
  color: var(--cmr-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.cabinet-mobile-reference-page .cmr-profile-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.14);
  border-radius: 999px;
  color: rgba(245, 237, 245, 0.78);
  background: rgba(255, 255, 255, 0.04);
}

.cabinet-mobile-reference-page .cmr-profile-button .cmr-icon {
  font-size: 20px;
}

.cabinet-mobile-reference-page .cmr-header-nav {
  display: none;
}

.cabinet-mobile-reference-page .cmr-main {
  position: relative;
  z-index: 10;
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 80px 16px calc(96px + env(safe-area-inset-bottom));
}

.cabinet-mobile-reference-page .cmr-page-head {
  margin-bottom: 28px;
}

.cabinet-mobile-reference-page .cmr-kicker {
  display: inline-block;
  color: var(--cmr-gold-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.cabinet-mobile-reference-page .cmr-page-head h1 {
  margin: 8px 0 0;
  color: var(--cmr-text);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.16;
}

.cabinet-mobile-reference-page .cmr-page-head p {
  margin: 10px 0 0;
  color: rgba(203, 190, 203, 0.86);
  font-size: 16px;
  line-height: 1.6;
}

.cabinet-mobile-reference-page .cmr-current-card,
.cabinet-mobile-reference-page .cmr-mini-card,
.cabinet-mobile-reference-page .cmr-list-card {
  border: 1px solid var(--cmr-line);
  background: var(--cmr-card);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cabinet-mobile-reference-page .cmr-current-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 22px 20px;
  border-radius: 12px;
  background:
    radial-gradient(64.18% 64.18% at 71.16% 35.69%, rgba(185, 154, 79, 0.15) 0%, rgba(16, 7, 22, 0) 100%),
    rgba(24, 12, 32, 0.6);
}

.cabinet-mobile-reference-page .cmr-current-card::before,
.cabinet-mobile-reference-page .cmr-current-card::after {
  position: absolute;
  pointer-events: none;
  content: "";
  border-radius: 999px;
}

.cabinet-mobile-reference-page .cmr-current-card::before {
  top: -42px;
  right: -46px;
  width: 160px;
  height: 160px;
  background: rgba(240, 211, 122, 0.055);
  filter: blur(36px);
}

.cabinet-mobile-reference-page .cmr-current-card::after {
  bottom: -48px;
  left: -50px;
  width: 160px;
  height: 160px;
  background: rgba(58, 23, 56, 0.24);
  filter: blur(42px);
}

.cabinet-mobile-reference-page .cmr-current-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cabinet-mobile-reference-page .cmr-current-top .cmr-icon {
  color: rgba(240, 211, 122, 0.36);
  font-size: 22px;
}

.cabinet-mobile-reference-page .cmr-current-title-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.cabinet-mobile-reference-page .cmr-current-symbol {
  position: relative;
  display: grid;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(185, 154, 79, 0.2);
  border-radius: 10px;
  background: rgba(58, 23, 56, 0.3);
}

.cabinet-mobile-reference-page .cmr-current-symbol::before {
  position: absolute;
  inset: -14px 5px auto;
  height: 92px;
  border: 1px solid rgba(240, 211, 122, 0.12);
  border-radius: 14px;
  content: "";
  transform: rotate(4deg);
}

.cabinet-mobile-reference-page .cmr-current-symbol .cmr-icon {
  position: relative;
  color: var(--cmr-gold);
  font-size: 32px;
}

.cabinet-mobile-reference-page .cmr-current-title-row h2 {
  margin: 0;
  color: var(--cmr-text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
}

.cabinet-mobile-reference-page .cmr-current-title-row p {
  margin: 6px 0 0;
  color: rgba(203, 190, 203, 0.72);
  font-size: 14px;
  line-height: 1.45;
}

.cabinet-mobile-reference-page .cmr-progress {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}

.cabinet-mobile-reference-page .cmr-progress-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 8px;
}

.cabinet-mobile-reference-page .cmr-progress-label strong {
  color: var(--cmr-gold);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.cabinet-mobile-reference-page .cmr-progress-label span {
  color: rgba(203, 190, 203, 0.66);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cabinet-mobile-reference-page .cmr-progress-line {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.cabinet-mobile-reference-page .cmr-progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cmr-gold-strong), #9a4fae);
  box-shadow: 0 0 10px rgba(230, 196, 106, 0.42);
}

.cabinet-mobile-reference-page .cmr-actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.cabinet-mobile-reference-page .cmr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.cabinet-mobile-reference-page .cmr-button-primary {
  color: #3d2e00;
  background: linear-gradient(135deg, #ffe195, #dca94f);
  box-shadow: 0 14px 26px rgba(240, 211, 122, 0.12);
}

.cabinet-mobile-reference-page .cmr-button-secondary {
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--cmr-text);
  background: rgba(255, 255, 255, 0.05);
}

.cabinet-mobile-reference-page .cmr-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.cabinet-mobile-reference-page .cmr-mini-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 16px;
  overflow: hidden;
  border-radius: 12px;
}

.cabinet-mobile-reference-page .cmr-mini-card h2 {
  margin: 12px 0 0;
  color: var(--cmr-text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.18;
}

.cabinet-mobile-reference-page .cmr-mini-card p {
  margin: 10px 0 12px;
  color: rgba(203, 190, 203, 0.78);
  font-size: 12px;
  line-height: 1.45;
}

.cabinet-mobile-reference-page .cmr-mini-card a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cmr-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cabinet-mobile-reference-page .cmr-mini-card a .cmr-icon {
  font-size: 15px;
}

.cabinet-mobile-reference-page .cmr-mini-card > .cmr-icon {
  align-self: flex-end;
  color: rgba(240, 211, 122, 0.28);
  font-size: 32px;
}

.cabinet-mobile-reference-page .cmr-recommendations {
  margin-bottom: 46px;
}

.cabinet-mobile-reference-page .cmr-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.cabinet-mobile-reference-page .cmr-section-head h2 {
  margin: 6px 0 0;
  color: var(--cmr-text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.cabinet-mobile-reference-page .cmr-section-head > a {
  flex: 0 0 auto;
  color: rgba(203, 190, 203, 0.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cabinet-mobile-reference-page .cmr-list {
  display: grid;
  gap: 16px;
}

.cabinet-mobile-reference-page .cmr-list-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 16px;
  border-radius: 12px;
  transition: transform 160ms ease, background-color 160ms ease;
}

.cabinet-mobile-reference-page .cmr-list-card:active {
  background: rgba(255, 255, 255, 0.06);
  transform: scale(0.985);
}

.cabinet-mobile-reference-page .cmr-list-visual {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(30, 27, 20, 0.72);
}

.cabinet-mobile-reference-page .cmr-list-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.42;
}

.cabinet-mobile-reference-page .cmr-visual-calm::before {
  background:
    radial-gradient(circle at 46% 42%, rgba(122, 198, 188, 0.56), transparent 26%),
    radial-gradient(circle at 75% 80%, rgba(61, 72, 118, 0.64), transparent 45%);
}

.cabinet-mobile-reference-page .cmr-visual-heart::before {
  background:
    radial-gradient(circle at 56% 34%, rgba(255, 130, 164, 0.58), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(92, 21, 56, 0.82), transparent 48%);
}

.cabinet-mobile-reference-page .cmr-visual-practice::before {
  background:
    radial-gradient(circle at 50% 38%, rgba(240, 211, 122, 0.44), transparent 24%),
    radial-gradient(circle at 22% 78%, rgba(96, 57, 118, 0.72), transparent 50%);
}

.cabinet-mobile-reference-page .cmr-list-visual .cmr-icon {
  position: relative;
  color: var(--cmr-gold);
  font-size: 26px;
}

.cabinet-mobile-reference-page .cmr-list-copy {
  display: grid;
  gap: 3px;
}

.cabinet-mobile-reference-page .cmr-list-label {
  color: var(--cmr-gold-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cabinet-mobile-reference-page .cmr-list-copy strong {
  color: var(--cmr-text);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.cabinet-mobile-reference-page .cmr-list-card > .cmr-icon {
  color: rgba(203, 190, 203, 0.42);
  font-size: 22px;
}

.cabinet-mobile-reference-page .cmr-footer {
  display: grid;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(240, 211, 122, 0.12);
  color: rgba(245, 237, 245, 0.58);
  font-size: 12px;
  line-height: 1.5;
}

.cabinet-mobile-reference-page .cmr-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.cabinet-mobile-reference-page .cmr-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(64px + env(safe-area-inset-bottom));
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(16, 14, 8, 0.92);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.cabinet-mobile-reference-page .cmr-bottom-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  color: rgba(245, 237, 245, 0.64);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.cabinet-mobile-reference-page .cmr-bottom-nav a .cmr-icon {
  font-size: 23px;
}

.cabinet-mobile-reference-page .cmr-bottom-nav a.is-active {
  color: var(--cmr-gold);
}

.cabinet-mobile-reference-page .cmr-bottom-nav a.is-active .cmr-icon {
  font-size: 25px;
  filter: drop-shadow(0 0 8px rgba(240, 211, 122, 0.36));
}

.cabinet-mobile-reference-page .cmr-bottom-nav a.is-active::after {
  position: absolute;
  bottom: 2px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--cmr-gold);
  box-shadow: 0 0 4px rgba(240, 211, 122, 0.72);
  content: "";
}

@media (max-width: 360px) {
  .cabinet-mobile-reference-page .cmr-main {
    padding-right: 16px;
    padding-left: 16px;
  }

  .cabinet-mobile-reference-page .cmr-current-card {
    padding: 22px 20px;
  }

  .cabinet-mobile-reference-page .cmr-status-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cabinet-mobile-reference-page .cmr-mini-card {
    aspect-ratio: auto;
    min-height: 140px;
  }

  .cabinet-mobile-reference-page .cmr-bottom-nav {
    height: calc(64px + env(safe-area-inset-bottom));
  }

  .cabinet-mobile-reference-page .cmr-bottom-nav a {
    font-size: 8px;
  }

  .cabinet-mobile-reference-page .cmr-bottom-nav a .cmr-icon {
    font-size: 21px;
  }
}

@media (min-width: 768px) {
  .cabinet-mobile-reference-page .cmr-topbar {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto max-content;
    gap: 18px;
    height: 72px;
    padding: 12px 28px;
  }

  .cabinet-mobile-reference-page .cmr-brand strong {
    font-size: 21px;
  }

  .cabinet-mobile-reference-page .cmr-header-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 42px;
    padding: 4px;
    border: 1px solid rgba(240, 211, 122, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  }

  .cabinet-mobile-reference-page .cmr-header-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: rgba(245, 237, 245, 0.66);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: color 160ms ease, background-color 160ms ease;
  }

  .cabinet-mobile-reference-page .cmr-header-nav a:hover {
    color: var(--cmr-text);
    background: rgba(255, 255, 255, 0.055);
  }

  .cabinet-mobile-reference-page .cmr-header-nav a.is-active {
    color: #3d2e00;
    background: linear-gradient(135deg, #ffe195, #dca94f);
    box-shadow: 0 10px 24px rgba(240, 211, 122, 0.14);
  }

  .cabinet-mobile-reference-page .cmr-main {
    width: min(calc(100% - 56px), 920px);
    padding: 116px 0 56px;
  }

  .cabinet-mobile-reference-page .cmr-page-head {
    max-width: 660px;
    margin-bottom: 34px;
  }

  .cabinet-mobile-reference-page .cmr-page-head h1 {
    font-size: 42px;
    line-height: 1.08;
  }

  .cabinet-mobile-reference-page .cmr-page-head p {
    font-size: 17px;
  }

  .cabinet-mobile-reference-page .cmr-current-card {
    padding: 30px;
  }

  .cabinet-mobile-reference-page .cmr-current-title-row {
    gap: 20px;
    margin-bottom: 22px;
  }

  .cabinet-mobile-reference-page .cmr-current-symbol {
    flex-basis: 76px;
    width: 76px;
    height: 76px;
  }

  .cabinet-mobile-reference-page .cmr-current-title-row h2 {
    font-size: 30px;
  }

  .cabinet-mobile-reference-page .cmr-current-title-row p {
    max-width: 520px;
    font-size: 15px;
  }

  .cabinet-mobile-reference-page .cmr-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabinet-mobile-reference-page .cmr-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .cabinet-mobile-reference-page .cmr-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .cabinet-mobile-reference-page .cmr-list-card {
    position: relative;
    display: flex;
    min-height: 210px;
    padding: 20px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
  }

  .cabinet-mobile-reference-page .cmr-list-visual {
    width: 72px;
    height: 72px;
  }

  .cabinet-mobile-reference-page .cmr-list-copy {
    gap: 7px;
  }

  .cabinet-mobile-reference-page .cmr-list-copy strong {
    font-size: 19px;
  }

  .cabinet-mobile-reference-page .cmr-list-card > .cmr-icon {
    position: absolute;
    top: 24px;
    right: 20px;
  }

  .cabinet-mobile-reference-page .cmr-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .cabinet-mobile-reference-page .cmr-bottom-nav {
    display: none;
  }
}

@media (min-width: 1024px) {
  .cabinet-mobile-reference-page .cmr-topbar {
    padding-left: max(32px, calc((100vw - 1180px) / 2 + 32px));
    padding-right: max(32px, calc((100vw - 1180px) / 2 + 32px));
  }

  .cabinet-mobile-reference-page .cmr-main {
    display: grid;
    width: min(calc(100% - 64px), 1180px);
    grid-template-columns: minmax(0, 1.55fr) minmax(284px, 0.75fr);
    gap: 24px;
    padding-top: 124px;
    padding-bottom: 64px;
  }

  .cabinet-mobile-reference-page .cmr-page-head,
  .cabinet-mobile-reference-page .cmr-recommendations,
  .cabinet-mobile-reference-page .cmr-footer {
    grid-column: 1 / -1;
  }

  .cabinet-mobile-reference-page .cmr-page-head {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.48fr);
    gap: 32px;
    align-items: end;
    margin-bottom: 12px;
  }

  .cabinet-mobile-reference-page .cmr-page-head .cmr-kicker,
  .cabinet-mobile-reference-page .cmr-page-head h1 {
    grid-column: 1;
  }

  .cabinet-mobile-reference-page .cmr-page-head p {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 18px;
  }

  .cabinet-mobile-reference-page .cmr-page-head h1 {
    font-size: 52px;
  }

  .cabinet-mobile-reference-page .cmr-current-card {
    min-height: 360px;
    margin-bottom: 0;
    padding: 34px;
  }

  .cabinet-mobile-reference-page .cmr-current-symbol {
    flex-basis: 88px;
    width: 88px;
    height: 88px;
  }

  .cabinet-mobile-reference-page .cmr-current-symbol .cmr-icon {
    font-size: 38px;
  }

  .cabinet-mobile-reference-page .cmr-current-title-row h2 {
    font-size: 34px;
  }

  .cabinet-mobile-reference-page .cmr-progress-label strong {
    font-size: 34px;
  }

  .cabinet-mobile-reference-page .cmr-status-grid {
    grid-template-columns: 1fr;
    align-self: stretch;
    margin-bottom: 0;
  }

  .cabinet-mobile-reference-page .cmr-mini-card {
    min-height: 168px;
    aspect-ratio: auto;
    padding: 20px;
  }

  .cabinet-mobile-reference-page .cmr-mini-card h2 {
    font-size: 21px;
  }

  .cabinet-mobile-reference-page .cmr-mini-card p {
    font-size: 13px;
  }

  .cabinet-mobile-reference-page .cmr-recommendations {
    margin-top: 18px;
    margin-bottom: 40px;
  }

  .cabinet-mobile-reference-page .cmr-section-head {
    margin-bottom: 22px;
  }

  .cabinet-mobile-reference-page .cmr-section-head h2 {
    font-size: 30px;
  }
}

@media (min-width: 1366px) {
  .cabinet-mobile-reference-page .cmr-main {
    width: min(calc(100% - 88px), 1200px);
    grid-template-columns: minmax(0, 1.62fr) minmax(310px, 0.78fr);
    gap: 28px;
  }
}

@media (min-width: 431px) {
  .cabinet-mobile-reference-page {
    background:
      radial-gradient(circle at 50% 0%, rgba(92, 21, 56, 0.32), transparent 26rem),
      linear-gradient(180deg, #07040b 0%, #120716 52%, #07040b 100%);
  }
}

/* Authentication pages */
.auth-page {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(92, 21, 56, 0.64), transparent 36rem),
    radial-gradient(circle at 82% 12%, rgba(43, 23, 70, 0.66), transparent 34rem),
    radial-gradient(circle at 50% 44%, rgba(217, 173, 98, 0.12), transparent 28rem),
    linear-gradient(180deg, #09050d 0%, #140817 48%, #08050c 100%);
}

.auth-page-glow {
  position: fixed;
  inset: auto 8% -16vh;
  z-index: 0;
  height: 34vh;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(217, 173, 98, 0.18), transparent 68%);
  filter: blur(22px);
}

.auth-header,
.auth-footer,
.auth-main {
  position: relative;
  z-index: 1;
}

.auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(calc(100% - 48px), 1120px);
  margin: 0 auto;
  padding: 24px 0;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.auth-brand-logo {
  display: block;
  width: 166px;
  height: auto;
}

.auth-header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-header-link,
.auth-state-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(240, 215, 154, 0.2);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(255, 255, 255, 0.045);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.auth-header-link:hover,
.auth-state-link:hover {
  transform: translateY(-1px);
  border-color: rgba(240, 215, 154, 0.38);
  background: rgba(255, 255, 255, 0.075);
}

.auth-main {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 230px);
  padding: 36px 24px 48px;
}

.auth-card {
  width: min(100%, 560px);
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 44%),
    rgba(18, 9, 22, 0.78);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42), 0 0 52px rgba(217, 173, 98, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.auth-eyebrow {
  margin: 0 0 12px;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-card h1 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.04;
  letter-spacing: 0;
}

.auth-description,
.auth-help-text {
  margin: 0;
  color: rgba(246, 237, 240, 0.78);
  font-size: 16px;
  line-height: 1.68;
}

.auth-help-text {
  margin-top: 16px;
  font-size: 14px;
}

.auth-state-note {
  display: inline-flex;
  margin: 18px 0 0;
  padding: 10px 13px;
  border: 1px solid rgba(240, 215, 154, 0.16);
  border-radius: 999px;
  color: rgba(246, 237, 240, 0.86);
  background: rgba(255, 255, 255, 0.045);
  font-size: 14px;
  font-weight: 700;
}

.auth-login-form {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.auth-login-form label {
  color: var(--gold-soft);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-login-form input {
  width: 100%;
  min-height: 56px;
  border: 1px solid rgba(240, 215, 154, 0.18);
  border-radius: 18px;
  padding: 0 17px;
  background: rgba(8, 5, 12, 0.54);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.auth-login-form input::placeholder {
  color: rgba(246, 237, 240, 0.42);
}

.auth-login-form input:focus {
  border-color: rgba(240, 215, 154, 0.44);
  background: rgba(8, 5, 12, 0.7);
  box-shadow: 0 0 0 4px rgba(217, 173, 98, 0.12);
}

.auth-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
}

.auth-message {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(147, 221, 172, 0.2);
  border-radius: 18px;
  color: #dff8e7;
  background: rgba(75, 130, 90, 0.13);
  line-height: 1.55;
}

.auth-message-error {
  border-color: rgba(226, 98, 111, 0.22);
  color: #ffd8dc;
  background: rgba(126, 31, 48, 0.2);
}

.auth-actions {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.auth-actions .auth-state-link {
  width: 100%;
}

.auth-card > .auth-state-link {
  width: 100%;
  margin-top: 20px;
}

.auth-footer {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: min(calc(100% - 48px), 880px);
  margin: 0 auto;
  padding: 0 0 28px;
  color: rgba(246, 237, 240, 0.62);
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}

.auth-footer strong {
  color: var(--text);
  font-size: 15px;
}

.auth-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.auth-footer a {
  color: var(--gold-soft);
  font-weight: 700;
}

.auth-footer p {
  max-width: 620px;
  margin: 0;
}

@media (max-width: 640px) {
  .auth-header {
    width: min(calc(100% - 32px), 1120px);
    padding: 18px 0;
  }

  .auth-brand-logo {
    width: 138px;
  }

  .auth-header-link {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  .auth-main {
    min-height: auto;
    padding: 28px 16px 38px;
  }

  .auth-card {
    border-radius: 24px;
  }

  .auth-card h1 {
    font-size: 34px;
  }

  .auth-footer {
    width: min(calc(100% - 32px), 880px);
    padding-bottom: 24px;
  }
}

.cabinet-auth-notice {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid rgba(168, 122, 62, 0.22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 249, 237, 0.94), rgba(244, 229, 202, 0.72));
  box-shadow: 0 14px 34px rgba(63, 39, 18, 0.08);
}

.cabinet-auth-notice p {
  margin: 6px 0 0;
  color: var(--color-muted, #715f50);
}

.profile-account-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.profile-account-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(86, 58, 34, 0.10);
}

.profile-account-list span {
  color: var(--color-muted, #715f50);
}

.profile-account-list strong {
  overflow-wrap: anywhere;
  text-align: right;
}

.profile-logout-card form {
  margin-top: 18px;
}

.profile-logout-button {
  min-height: 46px;
  cursor: pointer;
}

/* Landing hero background image */
/*
  The global `main { z-index: 20; }` creates a root stacking context above
  the fixed ambient particles. With the hero image on the section background,
  that stacking context hides the rising fireflies behind the hero.
  Keep the landing main out of the root z-index stack so decorative particles
  can sit between the hero background and the hero text.
*/
.landing-page main,
.landing-page main#top {
  z-index: auto;
}

.landing-page .hero.section {
  left: 50%;
  display: flex;
  align-items: center;
  width: 100vw;
  max-width: none;
  min-height: max(760px, calc(100svh - 92px));
  margin-right: -50vw;
  margin-left: -50vw;
  padding: clamp(150px, 17vh, 210px) max(24px, calc((100vw - 1440px) / 2)) clamp(76px, 10vh, 124px);
  overflow: visible;
  isolation: auto;
  background:
    linear-gradient(90deg, rgba(5, 3, 8, 0.98) 0%, rgba(7, 4, 11, 0.93) 28%, rgba(8, 5, 12, 0.68) 48%, rgba(8, 5, 12, 0.28) 72%, rgba(8, 5, 12, 0.44) 100%),
    linear-gradient(180deg, rgba(5, 3, 8, 0.58) 0%, rgba(5, 3, 8, 0.14) 34%, rgba(5, 3, 8, 0.66) 70%, rgba(8, 5, 12, 0.92) 100%),
    radial-gradient(ellipse at 17% 50%, rgba(92, 21, 56, 0.5), transparent 32rem),
    radial-gradient(ellipse at 51% 82%, rgba(217, 173, 98, 0.18), transparent 30rem),
    radial-gradient(ellipse at 83% 35%, rgba(115, 57, 164, 0.16), transparent 36rem),
    url("../images/hero-thread-aura.webp") center right / cover no-repeat;
}

.landing-page .hero.section::before {
  inset: 0;
  z-index: 0;
  height: auto;
  background:
    linear-gradient(90deg, rgba(2, 1, 5, 0.42) 0%, rgba(2, 1, 5, 0.18) 42%, rgba(2, 1, 5, 0.02) 76%),
    radial-gradient(ellipse at 16% 50%, rgba(104, 35, 91, 0.32), transparent 27rem),
    radial-gradient(ellipse at 39% 86%, rgba(240, 215, 154, 0.12), transparent 28rem);
  filter: none;
}

.landing-page .hero.section::after {
  position: absolute;
  inset: auto 0 -190px 0;
  z-index: 12;
  height: clamp(460px, 52vh, 680px);
  content: "";
  background:
    linear-gradient(
      180deg,
      rgba(8, 5, 12, 0) 0%,
      rgba(8, 5, 12, 0.18) 20%,
      rgba(8, 5, 12, 0.56) 48%,
      rgba(8, 5, 12, 0.82) 68%,
      rgba(8, 5, 12, 0.72) 84%,
      rgba(8, 5, 12, 0.34) 100%
    ),
    radial-gradient(ellipse at 24% 58%, rgba(217, 173, 98, 0.08), transparent 62%),
    radial-gradient(ellipse at 68% 60%, rgba(92, 21, 56, 0.16), transparent 68%);
  opacity: 0.9;
  pointer-events: none;
}

.landing-page .particles-canvas {
  z-index: 19;
  opacity: 0.62;
  mix-blend-mode: screen;
  pointer-events: none;
}

.landing-page .ambient-particles {
  z-index: 18;
  height: 52vh;
  pointer-events: none;
}

.landing-page .ambient-particles::before {
  bottom: -7vh;
  height: 34vh;
  opacity: 0.74;
}

.landing-page .ambient-particles span {
  position: absolute;
  left: var(--left);
  bottom: -10px;
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: rgba(var(--particle-rgb), var(--alpha));
  box-shadow: 0 0 14px rgba(var(--particle-rgb), calc(var(--alpha) * 0.72));
  opacity: 0;
  pointer-events: none;
  animation-duration: var(--duration);
  animation-delay: var(--delay);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

.landing-page .ambient-particles span:nth-child(3n + 1) {
  animation-name: landing-ambient-rise-center;
}

.landing-page .ambient-particles span:nth-child(3n + 2) {
  animation-name: landing-ambient-rise-left;
}

.landing-page .ambient-particles span:nth-child(3n) {
  animation-name: landing-ambient-rise-right;
}

@keyframes landing-ambient-rise-center {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.66);
  }

  12% {
    opacity: var(--alpha);
  }

  58% {
    opacity: calc(var(--alpha) * 0.76);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -36vh, 0) scale(1.14);
  }
}

@keyframes landing-ambient-rise-left {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.66);
  }

  14% {
    opacity: var(--alpha);
  }

  58% {
    opacity: calc(var(--alpha) * 0.74);
  }

  100% {
    opacity: 0;
    transform: translate3d(-18px, -34vh, 0) scale(1.14);
  }
}

@keyframes landing-ambient-rise-right {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.66);
  }

  14% {
    opacity: var(--alpha);
  }

  58% {
    opacity: calc(var(--alpha) * 0.74);
  }

  100% {
    opacity: 0;
    transform: translate3d(18px, -34vh, 0) scale(1.14);
  }
}

.landing-page .hero-content {
  position: relative;
  z-index: 30;
  width: min(680px, 100%);
  max-width: 680px;
  margin-left: 0;
}

.landing-page .site-header {
  z-index: 40;
}

.landing-page .hero h1 {
  max-width: 680px;
  color: rgba(255, 246, 249, 0.96);
  font-size: clamp(42px, 4.7vw, 66px);
  line-height: 1.08;
  text-shadow: 0 18px 58px rgba(0, 0, 0, 0.66);
}

.landing-page .hero .eyebrow {
  margin-bottom: 18px;
  color: var(--gold-soft);
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}

.landing-page .hero-text {
  max-width: 620px;
  color: rgba(246, 237, 240, 0.9);
  font-size: clamp(17px, 1.16vw, 20px);
}

.landing-page .hero-note {
  color: rgba(246, 237, 240, 0.76);
}

.landing-page .hero-actions .button {
  min-height: 54px;
  padding-inline: 28px;
}

.landing-page .hero-art {
  display: none !important;
}

.landing-page main#top > .section:not(.hero) {
  position: relative;
  z-index: 25;
}

.landing-page .hero.section + .section {
  margin-top: clamp(-72px, -4.4vw, -40px);
  padding-top: clamp(72px, 7.4vw, 112px);
}

@media (max-width: 720px) {
  .landing-page .particles-canvas {
    opacity: 0.48;
  }

  .landing-page .ambient-particles {
    height: 42vh;
  }

  .landing-page .ambient-particles::before {
    height: 26vh;
    opacity: 0.54;
  }

  .landing-page .ambient-particles span {
    box-shadow: 0 0 10px rgba(var(--particle-rgb), calc(var(--alpha) * 0.58));
  }

  .landing-page .hero.section {
    min-height: 100svh;
    padding: 132px 16px 52px;
    background:
      linear-gradient(90deg, rgba(5, 3, 8, 0.96) 0%, rgba(7, 4, 11, 0.9) 44%, rgba(8, 5, 12, 0.68) 100%),
      linear-gradient(180deg, rgba(5, 3, 8, 0.68) 0%, rgba(5, 3, 8, 0.34) 34%, rgba(5, 3, 8, 0.72) 70%, rgba(8, 5, 12, 0.92) 100%),
      radial-gradient(ellipse at 20% 45%, rgba(92, 21, 56, 0.48), transparent 24rem),
      url("../images/hero-thread-aura.webp") 64% center / cover no-repeat;
  }

  .landing-page .hero.section::after {
    inset: auto 0 -130px 0;
    height: 360px;
    background:
      linear-gradient(
        180deg,
        rgba(8, 5, 12, 0) 0%,
        rgba(8, 5, 12, 0.24) 22%,
        rgba(8, 5, 12, 0.68) 54%,
        rgba(8, 5, 12, 0.84) 74%,
        rgba(8, 5, 12, 0.32) 100%
      ),
      radial-gradient(ellipse at 34% 58%, rgba(217, 173, 98, 0.07), transparent 64%),
      radial-gradient(ellipse at 62% 64%, rgba(92, 21, 56, 0.14), transparent 70%);
  }

  .landing-page .hero.section + .section {
    margin-top: -42px;
    padding-top: 56px;
  }

  .landing-page .hero-content {
    width: 100%;
    max-width: 560px;
  }

  .landing-page .hero h1 {
    max-width: 520px;
    font-size: clamp(35px, 10vw, 46px);
  }

  .landing-page .hero-text {
    max-width: 500px;
    font-size: 16px;
    line-height: 1.62;
  }
}

/* Landing mobile polish */
@media (max-width: 600px) {
  .landing-page {
    --section-padding-y: 30px;
    --section-gap-sm: 8px;
    --section-gap-md: 16px;
    --section-gap-lg: 24px;
    --section-gap-xl: 32px;
    --section-heading-gap: 18px;
    --cluster-gap: 12px;
  }

  .landing-page .site-header {
    width: min(calc(100% - 14px), 1320px);
    min-height: 56px;
    padding: 7px 8px;
    gap: 6px;
    border-radius: 18px;
  }

  .landing-page .brand-logo-image {
    width: clamp(104px, 31vw, 132px);
    max-height: 36px;
  }

  .landing-page .header-actions {
    gap: 5px;
  }

  .landing-page .header-account,
  .landing-page .header-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .landing-page .hero.section {
    min-height: auto;
    padding: 92px 16px 42px;
    background-position: 62% center;
  }

  .landing-page .hero.section::after {
    inset: auto 0 -86px 0;
    height: 250px;
  }

  .landing-page .hero.section + .section {
    margin-top: -24px;
    padding-top: 42px;
  }

  .landing-page .hero .eyebrow {
    margin-bottom: 10px;
  }

  .landing-page .hero h1 {
    max-width: 520px;
    font-size: clamp(32px, 8.8vw, 40px);
    line-height: 1.08;
  }

  .landing-page .hero-text {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.55;
  }

  .landing-page .hero-actions {
    gap: 8px;
  }

  .landing-page .hero-actions .button {
    width: 100%;
    min-height: 48px;
    padding-inline: 16px;
  }

  .landing-page .hero-note {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.45;
  }

  .landing-page .ambient-particles {
    height: 34vh;
  }

  .landing-page .ambient-particles::before {
    height: 21vh;
    opacity: 0.46;
  }

  .landing-page .particles-canvas {
    opacity: 0.38;
  }

  .landing-page .section-heading {
    margin-bottom: 18px;
  }

  .landing-page .section-heading h2,
  .landing-page .final-cta h2 {
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.14;
  }

  .landing-page .section-heading p,
  .landing-page .final-cta p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.55;
  }

  .landing-page .benefit-grid,
  .landing-page .steps,
  .landing-page .audience-grid,
  .landing-page .trust-grid,
  .landing-page .faq-list {
    gap: 10px;
  }

  .landing-page .panel,
  .landing-page .step,
  .landing-page .audience-item,
  .landing-page .trust-grid article,
  .landing-page .faq-list article {
    min-height: 0;
    padding: 16px;
    border-radius: 16px;
  }

  .landing-page .panel-image {
    height: 108px;
    margin-bottom: 12px;
    border-radius: 14px;
  }

  .landing-page .panel-image .panel-number,
  .landing-page .panel-number,
  .landing-page .step span {
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin-bottom: 12px;
    font-size: 11px;
  }

  .landing-page .panel p,
  .landing-page .step p,
  .landing-page .audience-item,
  .landing-page .trust-grid p,
  .landing-page .faq-list p {
    font-size: 14px;
    line-height: 1.5;
  }

  .landing-page .step-badge {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .landing-page .preview-card,
  .landing-page .trust-content {
    padding: 16px;
    border-radius: 18px;
  }

  .landing-page .preview-body {
    gap: 12px;
  }

  .landing-page .preview-text {
    padding: 14px;
    border-radius: 16px;
  }

  .landing-page .preview-text p {
    font-size: 15px;
    line-height: 1.58;
  }

  .landing-page .preview-visual {
    padding: 10px;
    border-radius: 16px;
  }

  .landing-page .preview-card-image {
    width: min(70%, 190px);
    border-radius: 16px;
  }

  .landing-page .preview-card-caption {
    padding: 12px;
    border-radius: 14px;
  }

  .landing-page .topic-layout {
    display: grid;
    gap: 12px;
  }

  .landing-page .topic-controls {
    display: contents;
  }

  .landing-page .topic-list {
    order: 1;
    gap: 8px;
  }

  .landing-page .topic-preview {
    order: 2;
    gap: 0;
    border-radius: 18px;
  }

  .landing-page .topic-form {
    order: 3;
    gap: 8px;
  }

  .landing-page .topic-success {
    order: 4;
  }

  .landing-page .topic-button {
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
  }

  .landing-page .topic-preview-visual {
    height: 170px;
    border-radius: 18px 18px 0 0;
  }

  .landing-page .topic-preview-content {
    padding: 16px;
  }

  .landing-page .topic-preview-content h3 {
    font-size: 21px;
  }

  .landing-page .topic-preview-content p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.48;
  }

  .landing-page .topic-email-input,
  .landing-page .topic-cta {
    min-height: 48px;
  }

  .landing-page .trust-disclaimer {
    padding: 14px;
    font-size: 13px;
    line-height: 1.5;
  }

  .landing-page .final-cta {
    gap: 14px;
    padding: 22px 18px 24px;
    border-radius: 20px;
  }

  .landing-page .final-cta-visual {
    display: none;
  }

  .landing-page .final-cta-trust {
    gap: 7px;
  }

  .landing-page .final-cta-button {
    width: 100%;
    min-height: 48px;
  }

  .landing-page .site-footer {
    gap: 16px;
    padding: 24px 0 30px;
    font-size: 14px;
  }

  .landing-page .footer-main {
    gap: 16px;
  }

  .landing-page .footer-badges {
    gap: 7px;
    margin-top: 12px;
  }

  .landing-page .footer-badges span {
    min-height: 30px;
    font-size: 11px;
  }

  .landing-page .footer-nav {
    gap: 10px;
  }

  .landing-page .footer-brand p,
  .landing-page .footer-disclaimer {
    font-size: 14px;
    line-height: 1.55;
  }
}

/* Daily prediction page */
.prediction-read-main {
  max-width: 1240px;
}

.prediction-layout {
  margin-top: 4px;
}

.prediction-arcana-card strong {
  max-width: 82%;
  text-align: center;
}

.prediction-card-image {
  width: 100%;
  min-height: 330px;
  object-fit: cover;
  border: 1px solid rgba(240, 211, 122, 0.22);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.04);
}

.prediction-text-block + .prediction-text-block,
.prediction-text-block + .prediction-sections,
.prediction-sections {
  margin-top: 30px;
}

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

.prediction-section-card {
  padding: 18px;
  border-radius: 18px;
}

.prediction-section-card p,
.prediction-empty-card p {
  color: var(--app-muted, rgba(203, 190, 203, 0.86));
  line-height: 1.65;
}

.prediction-empty-card {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.prediction-empty-card h2 {
  margin: 0;
  color: var(--app-text);
}

@media (max-width: 980px) {
  .prediction-layout,
  .prediction-story-block {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .prediction-section-grid {
    grid-template-columns: 1fr;
  }
}

/* Cabinet daily prediction card */
.daily-prediction-card {
  display: grid;
  gap: 12px;
}

.daily-prediction-meta {
  display: grid;
  gap: 6px;
  color: var(--app-muted, rgba(203, 190, 203, 0.86));
  font-size: 13px;
  line-height: 1.45;
}

.daily-prediction-waiting {
  display: grid;
  min-height: 74px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.18);
  border-radius: 16px;
  color: var(--app-gold, #f0d37a);
  background:
    radial-gradient(circle at 50% 40%, rgba(240, 211, 122, 0.16), transparent 62%),
    rgba(255, 255, 255, 0.035);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.daily-prediction-button {
  width: 100%;
  margin-top: 2px;
}

.daily-prediction-mobile-meta {
  display: block;
  margin-top: 8px;
  color: var(--cmr-gold, #f0d37a);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

/* Profile prediction topics */
.profile-topics-note,
.profile-topics-status {
  margin: 10px 0 0;
  color: var(--app-muted, rgba(203, 190, 203, 0.86));
  font-size: 14px;
  line-height: 1.55;
}

.profile-topics-status {
  color: var(--app-gold, #f0d37a);
  font-weight: 800;
}

.profile-topics-form {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.profile-topic-option {
  cursor: pointer;
}

.profile-topic-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.profile-topic-option span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(240, 211, 122, 0.14);
  border-radius: 999px;
  color: rgba(245, 237, 245, 0.82);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  font-weight: 800;
}

.profile-topic-option input:checked + span {
  border-color: rgba(240, 211, 122, 0.38);
  color: var(--app-gold, #f0d37a);
  background: rgba(240, 211, 122, 0.1);
}

.profile-topics-submit {
  justify-self: start;
}

.mobile-pill.profile-topic-option {
  padding: 0;
  border: 0;
  background: transparent;
}

.mobile-pill.profile-topic-option span {
  min-height: 30px;
}



/* Prediction history */
.prediction-history-list {
  gap: 14px;
}

.history-prediction-card {
  align-items: center;
}

.history-prediction-card p {
  color: var(--app-muted, rgba(203, 190, 203, 0.86));
  line-height: 1.55;
}

.history-empty-state {
  display: grid;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgba(240, 211, 122, 0.16);
  border-radius: 22px;
  color: var(--app-muted, rgba(203, 190, 203, 0.86));
  background: rgba(255, 255, 255, 0.035);
}

.history-empty-state .material-symbols-outlined {
  color: var(--app-gold, #f0d37a);
  font-size: 32px;
}

.history-empty-state h3 {
  margin: 0;
  color: var(--app-text, #f5edf5);
}

.history-empty-state p {
  margin: 0;
  line-height: 1.6;
}

.history-pagination {
  margin-top: 18px;
}

.history-pagination nav,
.history-pagination .pagination {
  color: var(--app-muted, rgba(203, 190, 203, 0.86));
}


/* Hybrid cabinet page shell */
      .cabinet-mobile-version {
        display: none;
      }

      @media (max-width: 767px) {
        .cabinet-desktop-version {
          display: none !important;
        }

        .cabinet-mobile-version {
          display: block !important;
          position: relative;
          z-index: 20;
        }

        body.cabinet-page {
          min-height: max(884px, 100dvh);
          background:
            radial-gradient(circle at 22% 0%, rgba(92, 21, 56, 0.34), transparent 24rem),
            radial-gradient(circle at 82% 18%, rgba(43, 23, 70, 0.34), transparent 24rem),
            linear-gradient(180deg, #07040b 0%, #120716 52%, #07040b 100%);
        }

        body.cabinet-page .particles-canvas {
          opacity: 0.48;
        }
      }

      @media (min-width: 768px) {
        .cabinet-desktop-version {
          display: contents;
        }

        .cabinet-mobile-version {
          display: none !important;
        }
      }


/* Hybrid library page shell */
      .library-mobile-version {
        display: none;
      }

      @media (max-width: 767px) {
        .library-desktop-version {
          display: none !important;
        }

        .library-mobile-version {
          display: block !important;
          position: relative;
          z-index: 20;
        }

        body.library-page {
          min-height: max(884px, 100dvh);
          background:
            radial-gradient(circle at 22% 0%, rgba(92, 21, 56, 0.34), transparent 24rem),
            radial-gradient(circle at 82% 18%, rgba(43, 23, 70, 0.34), transparent 24rem),
            linear-gradient(180deg, #07040b 0%, #120716 52%, #07040b 100%);
        }

        body.library-page .particles-canvas {
          opacity: 0.48;
        }

        .library-mobile-version .cmr-search-card {
          display: grid;
          gap: 14px;
          padding: 18px;
          border: 1px solid rgba(240, 215, 154, 0.16);
          border-radius: 22px;
          background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 42%),
            rgba(18, 9, 22, 0.58);
          box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
        }

        .library-mobile-version .cmr-search-card label {
          display: grid;
          gap: 8px;
          margin: 0;
        }

        .library-mobile-version .cmr-search-card span,
        .library-mobile-version .cmr-filter-row span {
          color: var(--gold-soft);
          font-size: 11px;
          font-weight: 800;
          letter-spacing: 0.12em;
          text-transform: uppercase;
        }

        .library-mobile-version .cmr-search-card input {
          width: 100%;
          min-height: 52px;
          padding: 0 16px;
          border: 1px solid rgba(240, 215, 154, 0.14);
          border-radius: 999px;
          color: var(--text);
          background: rgba(8, 5, 12, 0.48);
          font: inherit;
          outline: none;
        }

        .library-mobile-version .cmr-search-card input::placeholder {
          color: rgba(246, 237, 240, 0.44);
        }

        .library-mobile-version .cmr-filter-row {
          display: flex;
          gap: 8px;
          overflow-x: auto;
          padding-bottom: 2px;
          scrollbar-width: none;
        }

        .library-mobile-version .cmr-filter-row::-webkit-scrollbar {
          display: none;
        }

        .library-mobile-version .cmr-chip {
          flex: 0 0 auto;
          min-height: 34px;
          padding: 8px 13px;
          border: 1px solid rgba(240, 215, 154, 0.14);
          border-radius: 999px;
          color: rgba(246, 237, 240, 0.78);
          background: rgba(255, 255, 255, 0.045);
          font-size: 12px;
          font-weight: 780;
          letter-spacing: 0.02em;
          white-space: nowrap;
        }

        .library-mobile-version .cmr-chip.is-active {
          border-color: rgba(240, 215, 154, 0.42);
          color: #160b10;
          background: linear-gradient(135deg, var(--gold-soft), var(--gold));
        }
      }

      @media (min-width: 768px) {
        .library-desktop-version {
          display: contents;
        }

        .library-mobile-version {
          display: none !important;
        }
      }


/* Shared hybrid app-shell mobile layout */
      .hybrid-mobile-version {
        display: none;
      }

      @media (max-width: 767px) {
        .hybrid-desktop-version {
          display: none !important;
        }

        .hybrid-mobile-version {
          display: block !important;
          position: relative;
          z-index: 20;
        }

        body.app-shell-page {
          min-height: max(884px, 100dvh);
          background:
            radial-gradient(circle at 22% 0%, rgba(92, 21, 56, 0.34), transparent 24rem),
            radial-gradient(circle at 82% 18%, rgba(43, 23, 70, 0.34), transparent 24rem),
            linear-gradient(180deg, #07040b 0%, #120716 52%, #07040b 100%);
        }

        body.app-shell-page .particles-canvas {
          opacity: 0.48;
        }
      }

      @media (min-width: 768px) {
        .hybrid-desktop-version {
          display: contents;
        }

        .hybrid-mobile-version {
          display: none !important;
        }
      }

      .hybrid-mobile-version .mobile-page-section {
        margin-top: 30px;
      }

      .hybrid-mobile-version .mobile-section-title {
        margin: 0 0 14px;
        color: var(--cmr-text);
        font-size: 24px;
        font-weight: 900;
        line-height: 1.15;
      }

      .hybrid-mobile-version .mobile-card,
      .hybrid-mobile-version .mobile-list-card,
      .hybrid-mobile-version .mobile-form-card {
        border: 1px solid var(--cmr-line);
        background: var(--cmr-card);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .hybrid-mobile-version .mobile-card {
        padding: 20px;
        border-radius: 18px;
      }

      .hybrid-mobile-version .mobile-card + .mobile-card,
      .hybrid-mobile-version .mobile-list-card + .mobile-list-card {
        margin-top: 12px;
      }

      .hybrid-mobile-version .mobile-card h2,
      .hybrid-mobile-version .mobile-card h3,
      .hybrid-mobile-version .mobile-form-card h2 {
        margin: 7px 0 0;
        color: var(--cmr-text);
        font-size: 22px;
        font-weight: 900;
        line-height: 1.16;
      }

      .hybrid-mobile-version .mobile-card p,
      .hybrid-mobile-version .mobile-list-copy span:not(.cmr-list-label),
      .hybrid-mobile-version .mobile-form-note {
        margin: 10px 0 0;
        color: rgba(203, 190, 203, 0.86);
        font-size: 14px;
        line-height: 1.55;
      }

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

      .hybrid-mobile-version .mobile-list-card {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
        min-height: 82px;
        padding: 13px 14px;
        border-radius: 12px;
      }

      .hybrid-mobile-version .mobile-list-visual {
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        border-radius: 12px;
        color: var(--cmr-gold);
        background:
          radial-gradient(circle at 50% 46%, rgba(240, 211, 122, 0.18), transparent 58%),
          rgba(255, 255, 255, 0.04);
      }

      .hybrid-mobile-version .mobile-list-visual .cmr-icon {
        font-size: 25px;
      }

      .hybrid-mobile-version .mobile-list-copy {
        display: grid;
        gap: 4px;
      }

      .hybrid-mobile-version .mobile-list-copy strong {
        color: var(--cmr-text);
        font-size: 17px;
        font-weight: 900;
        line-height: 1.18;
      }

      .hybrid-mobile-version .mobile-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }

      .hybrid-mobile-version .mobile-pill {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 7px 11px;
        border: 1px solid rgba(240, 211, 122, 0.18);
        border-radius: 999px;
        color: rgba(245, 237, 245, 0.82);
        background: rgba(255, 255, 255, 0.035);
        font-size: 12px;
        font-weight: 800;
      }

      .hybrid-mobile-version .mobile-status-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 12px;
        margin-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }

      .hybrid-mobile-version .mobile-status-row span {
        color: rgba(245, 237, 245, 0.82);
        font-size: 14px;
      }

      .hybrid-mobile-version .mobile-status-row strong,
      .hybrid-mobile-version .mobile-card a {
        color: var(--cmr-gold);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .hybrid-mobile-version .mobile-form-card {
        display: grid;
        gap: 12px;
        padding: 18px;
        border-radius: 18px;
      }

      .hybrid-mobile-version .mobile-form-card label {
        display: grid;
        gap: 7px;
        color: var(--cmr-gold-muted);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .hybrid-mobile-version .mobile-form-card input,
      .hybrid-mobile-version .mobile-form-card select,
      .hybrid-mobile-version .mobile-form-card textarea {
        width: 100%;
        border: 1px solid rgba(240, 211, 122, 0.12);
        border-radius: 12px;
        color: var(--cmr-text);
        background: rgba(255, 255, 255, 0.04);
        font: inherit;
      }

      .hybrid-mobile-version .mobile-form-card input,
      .hybrid-mobile-version .mobile-form-card select {
        min-height: 46px;
        padding: 0 13px;
      }

      .hybrid-mobile-version .mobile-form-card textarea {
        min-height: 118px;
        padding: 13px;
        resize: vertical;
      }

      .hybrid-mobile-version .mobile-form-card .cmr-button {
        width: 100%;
        margin-top: 4px;
      }

      .hybrid-mobile-version .mobile-text-block {
        color: rgba(245, 237, 245, 0.88);
        font-size: 16px;
        line-height: 1.72;
      }

      .hybrid-mobile-version .mobile-text-block p {
        margin: 0 0 15px;
      }

      .hybrid-mobile-version .mobile-text-block blockquote {
        margin: 18px 0;
        padding: 15px 0 15px 16px;
        border-left: 2px solid var(--cmr-gold);
        color: var(--cmr-text-warm);
        font-style: italic;
      }

      .hybrid-mobile-version .mobile-ordered-list {
        padding-left: 20px;
        margin: 12px 0 0;
        color: rgba(203, 190, 203, 0.88);
        font-size: 14px;
        line-height: 1.55;
      }

      @media (max-width: 340px) {
        .hybrid-mobile-version .mobile-grid-2 {
          grid-template-columns: 1fr;
        }
      }


/* Inline utility replacements */
.progress-fill-65 {
  width: 65%;
}

.profile-mobile-avatar-initial {
  color: var(--cmr-text);
  font-size: 26px;
}

/* Authenticated shell logo and topbar cleanup */
.app-topbar {
  justify-content: space-between;
}

.app-topbar-brand,
.app-sidebar-brand,
.cabinet-mobile-reference-page .cmr-brand {
  min-width: 0;
}

.app-topbar-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
}

.app-auth-logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.app-auth-logo-image--topbar {
  max-width: 174px;
  max-height: 48px;
}

.app-auth-logo-image--sidebar {
  max-width: 190px;
  max-height: 54px;
}

.app-auth-logo-image--mobile {
  max-width: 144px;
  max-height: 40px;
}

.app-sidebar-brand[href] {
  justify-content: flex-start;
  gap: 0;
  padding: 0 6px;
}

.cabinet-mobile-reference-page .cmr-brand {
  flex: 0 1 auto;
}

/* Cabinet dashboard content redesign */
.cabinet-page .app-main {
  display: grid;
  gap: 30px;
}

.cabinet-page .cabinet-head {
  margin-bottom: 0;
}

.cabinet-page .cabinet-glass-card,
.cabinet-page .cabinet-section,
.cabinet-page .access-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(240, 211, 122, 0.13);
  border-top-color: rgba(240, 211, 122, 0.24);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018) 42%),
    rgba(24, 12, 32, 0.58);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.cabinet-page .daily-prediction-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 58px);
  min-height: 430px;
  padding: clamp(28px, 4.5vw, 46px);
}

.cabinet-page .daily-prediction-card-glow,
.cabinet-page .path-progress-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(72px);
  content: "";
}

.cabinet-page .daily-prediction-card-glow {
  top: -90px;
  left: -90px;
  width: 280px;
  height: 280px;
  background: rgba(240, 211, 122, 0.13);
}

.cabinet-page .daily-prediction-card::after {
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: rgba(92, 21, 56, 0.2);
  filter: blur(50px);
  content: "";
}

.cabinet-page .daily-prediction-card-visual,
.cabinet-page .daily-prediction-card-content {
  position: relative;
  z-index: 1;
}

.cabinet-page .daily-prediction-card-visual {
  display: grid;
  justify-items: center;
}

.cabinet-page .daily-prediction-card-visual::before {
  position: absolute;
  inset: 14px 6px -10px;
  border-radius: 30px;
  background: rgba(240, 211, 122, 0.18);
  filter: blur(22px);
  content: "";
}

.cabinet-page .daily-tarot-card {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 238px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(240, 211, 122, 0.28), transparent 20%),
    radial-gradient(circle at 50% 55%, rgba(92, 21, 56, 0.62), transparent 48%),
    linear-gradient(145deg, rgba(28, 16, 43, 0.98), rgba(8, 5, 13, 0.98));
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.4), 0 0 34px rgba(240, 211, 122, 0.12);
}

.cabinet-page .daily-tarot-card-image {
  width: min(100%, 238px);
  height: auto;
  object-fit: cover;
}

.cabinet-page .daily-tarot-card::before,
.cabinet-page .daily-tarot-card::after {
  position: absolute;
  border: 1px solid rgba(240, 211, 122, 0.16);
  content: "";
}

.cabinet-page .daily-tarot-card::before {
  inset: 18px;
  border-radius: 18px;
}

.cabinet-page .daily-tarot-card::after {
  width: 58%;
  aspect-ratio: 1;
  border-radius: 999px;
}

.cabinet-page .daily-tarot-eye {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(240, 211, 122, 0.96);
  -webkit-mask: var(--app-icon-spark) center / contain no-repeat;
  mask: var(--app-icon-spark) center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(240, 211, 122, 0.45));
}

.cabinet-page .daily-tarot-line {
  position: absolute;
  left: 50%;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 211, 122, 0.58), transparent);
  transform: translateX(-50%);
}

.cabinet-page .daily-tarot-line-top {
  top: 24%;
}

.cabinet-page .daily-tarot-line-bottom {
  bottom: 24%;
}

.cabinet-page .daily-prediction-card-content {
  display: grid;
  gap: 18px;
  max-width: 720px;
}

.cabinet-page .daily-prediction-card-content h2,
.cabinet-page .path-progress-head h2,
.cabinet-page .cabinet-section-heading h2,
.cabinet-page .access-card h2 {
  margin: 0;
  color: var(--app-text);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cabinet-page .daily-prediction-card-content h2 {
  max-width: 720px;
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 0.98;
}

.cabinet-page .daily-prediction-lead {
  max-width: 720px;
  margin: 0;
  color: rgba(245, 237, 245, 0.86);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
}

.cabinet-page .daily-prediction-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--app-gold);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cabinet-page .daily-prediction-meta-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border: 1px solid rgba(240, 211, 122, 0.2);
  border-radius: 999px;
  background: rgba(240, 211, 122, 0.075);
}

.cabinet-page .daily-prediction-meta-row-muted {
  color: rgba(203, 190, 203, 0.74);
}

.cabinet-page .daily-prediction-meta-row-muted span {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.cabinet-page .daily-opened-excerpt {
  max-width: 720px;
  margin: 0;
  color: rgba(203, 190, 203, 0.88);
  font-size: 16px;
  line-height: 1.7;
}

.cabinet-page .daily-prediction-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 4px;
}

.cabinet-page .daily-prediction-actions .app-button {
  min-height: 54px;
  padding-inline: 28px;
  border-radius: 999px;
}

.cabinet-page .daily-prediction-note {
  flex: 1 1 260px;
  margin: 0;
  color: rgba(203, 190, 203, 0.66);
  font-size: 13px;
  line-height: 1.55;
}

.cabinet-page .path-progress-card {
  display: grid;
  gap: 28px;
  padding: clamp(24px, 3.4vw, 34px);
}

.cabinet-page .path-progress-glow {
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: rgba(92, 21, 56, 0.16);
}

.cabinet-page .path-progress-head,
.cabinet-page .access-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.cabinet-page .path-progress-head {
  position: relative;
  z-index: 1;
}

.cabinet-page .path-progress-head h2,
.cabinet-page .cabinet-section-heading h2,
.cabinet-page .access-card h2 {
  margin-top: 8px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
}

.cabinet-page .path-progress-head p,
.cabinet-page .access-card p {
  max-width: 700px;
  margin: 0;
  color: rgba(203, 190, 203, 0.82);
  line-height: 1.7;
}

.cabinet-page .path-progress-track {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 16px 0 24px;
}

.cabinet-page .glowing-thread {
  position: relative;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240, 211, 122, 0.18), rgba(240, 211, 122, 0.95) 65%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 0 18px rgba(240, 211, 122, 0.12);
}

.cabinet-page .glowing-thread::after {
  position: absolute;
  top: 50%;
  left: min(100%, max(0%, var(--opened-progress, 0%)));
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--app-gold);
  box-shadow: 0 0 18px 5px rgba(240, 211, 122, 0.34);
  content: "";
  transform: translate(-50%, -50%);
}

.cabinet-page .glowing-node {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  transform: translate(-50%, -50%);
}

.cabinet-page .glowing-node.is-active {
  background: var(--app-gold);
  box-shadow: 0 0 12px 2px rgba(240, 211, 122, 0.32);
}

.cabinet-page .path-progress-track strong {
  justify-self: center;
  color: var(--app-gold);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.cabinet-page .path-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cabinet-page .path-progress-stats div {
  display: grid;
  gap: 6px;
}

.cabinet-page .path-progress-stats span,
.cabinet-page .cabinet-info-label {
  color: rgba(203, 190, 203, 0.64);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cabinet-page .path-progress-stats strong {
  color: var(--app-text);
  font-size: 25px;
  line-height: 1;
}

.cabinet-page .path-progress-note {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(240, 211, 122, 0.1);
  border-radius: 16px;
  color: rgba(203, 190, 203, 0.82);
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

.cabinet-page .cabinet-section {
  display: grid;
  gap: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cabinet-page .cabinet-section-heading {
  margin: 0;
}

.cabinet-page .cabinet-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.cabinet-page .cabinet-info-card {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 210px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(240, 211, 122, 0.12);
  border-left: 3px solid rgba(240, 211, 122, 0.58);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 46%),
    rgba(24, 12, 32, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.cabinet-page .cabinet-info-card::after,
.cabinet-page .library-material-card::after {
  position: absolute;
  inset: auto -70px -80px auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(240, 211, 122, 0.08);
  filter: blur(30px);
  content: "";
}

.cabinet-page .cabinet-info-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.18);
  border-radius: 14px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.08);
}

.cabinet-page .cabinet-info-icon .material-symbols-outlined {
  font-size: 24px;
}

.cabinet-page .cabinet-info-card h3,
.cabinet-page .library-material-card h3 {
  margin: 6px 0 0;
  color: var(--app-text);
  font-size: 22px;
  line-height: 1.17;
}

.cabinet-page .cabinet-info-card p,
.cabinet-page .library-material-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(203, 190, 203, 0.84);
  line-height: 1.65;
}

.cabinet-page .cabinet-material-grid .library-material-card {
  display: grid;
  gap: 14px;
  min-height: 300px;
  padding: 18px;
  border-radius: 22px;
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.cabinet-page .cabinet-material-grid .library-material-card:hover {
  border-color: rgba(240, 211, 122, 0.28);
  transform: translateY(-2px);
}

.cabinet-page .cabinet-material-grid .library-card-visual {
  min-height: 132px;
  border-radius: 18px;
}

.cabinet-page .cabinet-material-grid .library-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cabinet-page .cabinet-material-grid .library-card-label .material-symbols-outlined {
  color: var(--app-gold);
  font-size: 14px;
}

.cabinet-page .library-material-card-premium {
  border-color: rgba(240, 211, 122, 0.24);
}

.cabinet-page .access-card {
  padding: clamp(24px, 3.4vw, 34px);
}

.cabinet-page .access-card-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.cabinet-page .access-card .app-button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 50px;
  padding-inline: 24px;
  border-radius: 16px;
}

.cabinet-page .visual-path .material-symbols-outlined,
.cabinet-page .visual-star .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-spark);
}

.cabinet-page .visual-calm .material-symbols-outlined {
  --app-icon-mask: var(--app-icon-moon);
}

@media (max-width: 1100px) {
  .cabinet-page .daily-prediction-card {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    min-height: 360px;
  }

  .cabinet-page .cabinet-card-grid,
  .cabinet-page .path-progress-stats {
    grid-template-columns: 1fr;
  }

  .cabinet-page .cabinet-info-card,
  .cabinet-page .cabinet-material-grid .library-material-card {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .cabinet-page .app-main {
    display: block;
  }
}

/* Dynamic account access state */
.app-premium-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(240, 211, 122, 0.42);
  border-radius: 999px;
  color: #170d06;
  background: linear-gradient(135deg, #f0d37a, #d6a94f);
  box-shadow: 0 10px 24px rgba(240, 211, 122, 0.14);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.app-premium-cta:hover,
.app-premium-cta:focus-visible,
.app-user-status-link:hover,
.app-user-status-link:focus-visible,
.profile-premium-button:hover,
.profile-premium-button:focus-visible,
.profile-mobile-premium-link:hover,
.profile-mobile-premium-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(240, 211, 122, 0.18);
  filter: brightness(1.04);
}

.app-status-pill.is-premium,
.profile-status.is-premium,
.mobile-pill.is-premium,
.app-user-status.is-premium {
  color: #f6dd8a;
  border-color: rgba(240, 211, 122, 0.38);
  background: rgba(240, 211, 122, 0.1);
}

.app-status-pill.is-basic {
  color: rgba(245, 237, 245, 0.74);
}

.app-user-status-link {
  color: #170d06;
  background: linear-gradient(135deg, #f0d37a, #d6a94f);
  text-decoration: none;
}

.profile-access-actions {
  margin-top: 18px;
}

.profile-premium-button,
.profile-cancel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(240, 211, 122, 0.42);
  border-radius: 999px;
  color: #160b05;
  background: linear-gradient(135deg, #f0d37a, #d6a94f);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.profile-cancel-subscription {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(240, 211, 122, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-cancel-subscription summary {
  width: fit-content;
  color: rgba(245, 237, 245, 0.82);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.profile-cancel-subscription summary::-webkit-details-marker {
  display: none;
}

.profile-cancel-subscription summary::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 4px;
  background: rgba(240, 211, 122, 0.42);
}

.profile-cancel-subscription form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.profile-cancel-subscription label {
  display: grid;
  gap: 8px;
  color: rgba(245, 237, 245, 0.78);
  font-size: 13px;
  font-weight: 800;
}

.profile-cancel-subscription input[type="email"] {
  width: min(100%, 420px);
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(240, 211, 122, 0.22);
  border-radius: 12px;
  color: var(--app-text, #f5edf5);
  background: rgba(7, 4, 11, 0.38);
  outline: 0;
}

.profile-cancel-subscription input[type="email"]:focus {
  border-color: rgba(240, 211, 122, 0.56);
  box-shadow: 0 0 0 3px rgba(240, 211, 122, 0.08);
}

.profile-cancel-check {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px !important;
  font-weight: 600 !important;
}

.profile-cancel-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #f0d37a;
}

.profile-subscription-message,
.profile-subscription-note,
.profile-field-error {
  display: block;
  margin: 10px 0 0;
  line-height: 1.55;
}

.profile-subscription-message {
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
}

.profile-subscription-message.is-success {
  color: #f0d37a;
  background: rgba(240, 211, 122, 0.08);
}

.profile-subscription-message.is-error,
.profile-field-error {
  color: #ffb4ab;
}

.profile-subscription-message.is-error {
  background: rgba(255, 180, 171, 0.08);
}

.profile-mobile-premium-link {
  color: #170d06;
  background: linear-gradient(135deg, #f0d37a, #d6a94f);
  text-decoration: none;
}

@media (max-width: 900px) {
  .app-premium-cta-topbar {
    display: none;
  }

  .profile-cancel-subscription input[type="email"],
  .profile-premium-button,
  .profile-cancel-button {
    width: 100%;
  }
}

/* Cabinet activity path and Premium CTA refinements */
.cabinet-page .path-current-level {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid rgba(240, 211, 122, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 20%, rgba(240, 211, 122, 0.11), transparent 12rem),
    rgba(255, 255, 255, 0.035);
}

.cabinet-page .path-current-level span {
  color: rgba(203, 190, 203, 0.64);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cabinet-page .path-current-level strong {
  color: var(--app-gold);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 900;
  line-height: 1.05;
}

.cabinet-page .path-current-level p {
  max-width: 680px;
  margin: 0;
  color: rgba(203, 190, 203, 0.82);
  line-height: 1.65;
}

.cabinet-page .glowing-thread {
  background:
    linear-gradient(
      90deg,
      rgba(240, 211, 122, 0.95) 0%,
      rgba(240, 211, 122, 0.78) var(--opened-progress, 8%),
      rgba(255, 255, 255, 0.1) var(--opened-progress, 8%),
      rgba(255, 255, 255, 0.08) 100%
    );
}

.cabinet-page .glowing-node.is-current {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 248, 230, 0.8);
}

.cabinet-page .path-progress-stats strong {
  overflow-wrap: anywhere;
}

.cabinet-page .access-card {
  border-color: rgba(240, 211, 122, 0.2);
  background:
    radial-gradient(circle at 88% 32%, rgba(240, 211, 122, 0.16), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 42%),
    rgba(24, 12, 32, 0.72);
}

.cabinet-mobile-reference-page .cmr-path-level {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid rgba(240, 211, 122, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.cabinet-mobile-reference-page .cmr-path-level span {
  color: rgba(203, 190, 203, 0.62);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cabinet-mobile-reference-page .cmr-path-level strong {
  color: var(--cmr-gold);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.cabinet-mobile-reference-page .cmr-path-thread {
  position: relative;
  z-index: 1;
  height: 22px;
  margin: 20px 6px 14px;
}

.cabinet-mobile-reference-page .cmr-path-thread::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--cmr-gold) 0%,
      rgba(240, 211, 122, 0.74) var(--path-progress, 8%),
      rgba(255, 255, 255, 0.1) var(--path-progress, 8%),
      rgba(255, 255, 255, 0.08) 100%
    );
  content: "";
  transform: translateY(-50%);
}

.cabinet-mobile-reference-page .cmr-path-thread span {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--cmr-gold);
  box-shadow: 0 0 10px rgba(240, 211, 122, 0.28);
  transform: translate(-50%, -50%);
}

.cabinet-mobile-reference-page .cmr-path-thread span.is-muted {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.cabinet-mobile-reference-page .cmr-path-thread span.is-current {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 248, 230, 0.82);
}

.cabinet-mobile-reference-page .cmr-path-label {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 14px;
  color: var(--cmr-gold);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.cabinet-mobile-reference-page .cmr-path-stats {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.cabinet-mobile-reference-page .cmr-path-stats span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(203, 190, 203, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-mobile-reference-page .cmr-path-stats strong {
  color: var(--cmr-text);
  font-weight: 900;
  text-align: right;
}

.cabinet-mobile-reference-page .cmr-path-note {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  padding: 12px;
  border: 1px solid rgba(240, 211, 122, 0.1);
  border-radius: 12px;
  color: rgba(203, 190, 203, 0.82);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .cabinet-page .path-progress-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .cabinet-page .path-progress-stats {
    grid-template-columns: 1fr;
  }
}


/* Header and button readability refinements */
.button-primary,
.cabinet-v2-button-primary,
.help-button-primary,
.app-button-primary,
.app-premium-cta,
.app-user-status-link,
.profile-premium-button,
.profile-cancel-button,
.profile-mobile-premium-link,
.cabinet-mobile-reference-page .cmr-button-primary,
.cmr-button-primary {
  color: #241400 !important;
  background: linear-gradient(135deg, #f7dc86 0%, #e2b85f 54%, #bf8434 100%) !important;
  border-color: rgba(255, 226, 156, 0.42) !important;
  text-shadow: 0 1px 0 rgba(255, 247, 214, 0.34) !important;
  box-shadow:
    0 14px 34px rgba(217, 160, 82, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

.button-primary:hover,
.button-primary:focus-visible,
.cabinet-v2-button-primary:hover,
.cabinet-v2-button-primary:focus-visible,
.help-button-primary:hover,
.help-button-primary:focus-visible,
.app-button-primary:hover,
.app-button-primary:focus-visible,
.app-premium-cta:hover,
.app-premium-cta:focus-visible,
.app-user-status-link:hover,
.app-user-status-link:focus-visible,
.profile-premium-button:hover,
.profile-premium-button:focus-visible,
.profile-cancel-button:hover,
.profile-cancel-button:focus-visible,
.profile-mobile-premium-link:hover,
.profile-mobile-premium-link:focus-visible,
.cabinet-mobile-reference-page .cmr-button-primary:hover,
.cabinet-mobile-reference-page .cmr-button-primary:focus-visible,
.cmr-button-primary:hover,
.cmr-button-primary:focus-visible {
  color: #1a0e00 !important;
  background: linear-gradient(135deg, #ffe7a8 0%, #edc66f 52%, #ca8f3a 100%) !important;
  box-shadow:
    0 18px 42px rgba(217, 160, 82, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
}

.app-premium-cta,
.app-user-status-link,
.profile-mobile-premium-link {
  font-weight: 950;
  letter-spacing: 0.08em;
}

.app-topbar-actions .app-premium-cta-topbar {
  min-height: 36px;
  padding-inline: 16px;
}

/* Premium access landing */
.premium-access-main {
  width: min(100%, 1220px);
}

.premium-access-shell {
  position: relative;
  display: grid;
  gap: clamp(54px, 7vw, 86px);
  padding-bottom: 22px;
  isolation: isolate;
}

.premium-access-shell::before,
.premium-access-shell::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: 999px;
  filter: blur(76px);
  opacity: 0.2;
}

.premium-access-shell::before {
  top: 120px;
  right: -120px;
  width: 420px;
  height: 420px;
  background: rgba(240, 211, 122, 0.32);
}

.premium-access-shell::after {
  top: 560px;
  left: -90px;
  width: 360px;
  height: 360px;
  background: rgba(98, 58, 142, 0.38);
}

.premium-hero {
  display: grid;
  min-height: clamp(390px, 52vh, 560px);
  place-items: center;
  padding: clamp(56px, 8vw, 98px) 18px clamp(48px, 7vw, 80px);
  text-align: center;
}

.premium-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 14px;
  border: 1px solid rgba(240, 211, 122, 0.24);
  border-radius: 999px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.08);
  box-shadow: inset 0 0 22px rgba(240, 211, 122, 0.05);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.premium-chip .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.premium-hero h1 {
  max-width: 860px;
  margin: 0;
  color: var(--app-text);
  font-size: clamp(42px, 7vw, 76px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-shadow: 0 0 30px rgba(240, 211, 122, 0.12);
}

.premium-hero p {
  max-width: 760px;
  margin: 22px auto 0;
  color: rgba(245, 237, 245, 0.77);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
}

.premium-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 32px;
  padding: 0 28px;
  border-radius: 999px;
  color: #1d1208;
  background: linear-gradient(135deg, #ffe394, #d5a642);
  box-shadow: 0 18px 42px rgba(217, 160, 82, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  font-size: 14px;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.premium-hero-button:hover,
.premium-hero-button:focus-visible {
  box-shadow: 0 22px 54px rgba(217, 160, 82, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transform: translateY(-2px);
}

.premium-hero-button .material-symbols-outlined {
  font-size: 18px;
}

.premium-section {
  padding-top: clamp(18px, 4vw, 42px);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.premium-section-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.premium-section-head h2 {
  margin: 0;
  color: var(--app-text);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.premium-section-head p {
  margin: 12px 0 0;
  color: rgba(245, 237, 245, 0.62);
  line-height: 1.65;
}

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

.premium-feature-card,
.premium-plan-card,
.premium-comparison-card,
.premium-trust,
.premium-mobile-hero,
.premium-mobile-plan {
  border: 1px solid rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 44%),
    rgba(23, 13, 31, 0.74);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.premium-feature-card {
  position: relative;
  display: flex;
  min-height: 230px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 30px;
  border-radius: 16px;
}

.premium-feature-card.is-wide {
  grid-column: span 2;
}

.premium-feature-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  place-items: center;
  border: 1px solid rgba(240, 211, 122, 0.22);
  border-radius: 999px;
  color: var(--app-gold);
  background: rgba(240, 211, 122, 0.1);
  font-size: 24px;
}

.premium-feature-card:nth-child(2) .premium-feature-icon,
.premium-feature-card:nth-child(3) .premium-feature-icon {
  border-color: rgba(190, 152, 226, 0.18);
  color: #dbc6f4;
  background: rgba(190, 152, 226, 0.08);
}

.premium-feature-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--app-text);
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 850;
  letter-spacing: -0.025em;
}

.premium-feature-card p {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 10px 0 0;
  color: rgba(245, 237, 245, 0.68);
  line-height: 1.62;
}

.premium-feature-ghost {
  position: absolute;
  right: 22px;
  bottom: -24px;
  color: rgba(240, 211, 122, 0.08);
  font-size: 180px;
  line-height: 1;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.premium-feature-card:hover .premium-feature-ghost {
  opacity: 1;
  transform: scale(1.04);
}

.premium-pricing-section {
  position: relative;
  isolation: isolate;
}

.premium-pricing-section::before {
  position: absolute;
  top: 54%;
  left: 50%;
  z-index: -1;
  width: min(520px, 70vw);
  height: min(520px, 70vw);
  content: "";
  border-radius: 999px;
  background: rgba(240, 211, 122, 0.16);
  filter: blur(92px);
  transform: translate(-50%, -50%);
}

.premium-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.premium-plan-card {
  position: relative;
  display: flex;
  min-height: 410px;
  flex-direction: column;
  overflow: hidden;
  padding: 34px;
  border-radius: 20px;
  text-align: center;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.premium-plan-card:hover {
  transform: translateY(-3px);
}

.premium-plan-card.is-featured {
  border-color: rgba(240, 211, 122, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 211, 122, 0.18), transparent 55%),
    linear-gradient(145deg, rgba(240, 211, 122, 0.1), rgba(255, 255, 255, 0.02) 46%),
    rgba(32, 23, 22, 0.84);
  box-shadow: 0 0 44px rgba(240, 211, 122, 0.08), inset 0 0 40px rgba(240, 211, 122, 0.055);
  transform: scale(1.045);
}

.premium-plan-label {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 8px 18px;
  border-radius: 0 0 999px 999px;
  color: #201200;
  background: linear-gradient(135deg, #ffe394, #d5a642);
  box-shadow: 0 14px 26px rgba(217, 160, 82, 0.18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.premium-plan-ribbon {
  position: absolute;
  top: 24px;
  right: -50px;
  width: 170px;
  padding: 5px 0;
  color: rgba(245, 237, 245, 0.78);
  background: rgba(255, 255, 255, 0.07);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transform: rotate(45deg);
}

.premium-plan-card h3 {
  margin: 12px 0 0;
  color: var(--app-text);
  font-size: 25px;
  font-weight: 850;
}

.premium-plan-card.is-featured h3 {
  margin-top: 26px;
  color: var(--app-gold);
}

.premium-plan-card p {
  min-height: 24px;
  margin: 8px 0 24px;
  color: rgba(245, 237, 245, 0.55);
}

.premium-plan-card strong {
  display: block;
  margin-bottom: 28px;
  color: var(--app-text);
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
}

.premium-plan-card ul {
  display: grid;
  flex: 1;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  text-align: left;
  list-style: none;
}

.premium-plan-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(245, 237, 245, 0.72);
  line-height: 1.45;
}

.premium-plan-card li .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--app-gold);
  font-size: 17px;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.premium-plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: var(--app-text);
  background: rgba(255, 255, 255, 0.02);
  font-weight: 900;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.premium-plan-button.is-primary {
  border-color: transparent;
  color: #1d1208;
  background: linear-gradient(135deg, #ffe394, #d5a642);
  box-shadow: 0 16px 36px rgba(217, 160, 82, 0.22);
}

.premium-plan-button:hover,
.premium-plan-button:focus-visible {
  border-color: rgba(240, 211, 122, 0.32);
  background-color: rgba(240, 211, 122, 0.08);
  transform: translateY(-1px);
}

.premium-plan-button.is-primary:hover,
.premium-plan-button.is-primary:focus-visible {
  background: linear-gradient(135deg, #ffe8a9, #dfb04d);
}

.premium-plan-card small {
  margin-top: 14px;
  color: rgba(245, 237, 245, 0.42);
  font-size: 11px;
  line-height: 1.4;
}

.premium-comparison-card {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 42px);
  border-radius: 22px;
}

.premium-comparison-head,
.premium-comparison-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(90px, 0.55fr) minmax(90px, 0.55fr);
  gap: 16px;
  align-items: center;
}

.premium-comparison-head {
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.premium-comparison-head strong {
  color: rgba(245, 237, 245, 0.68);
  font-size: 18px;
  font-weight: 850;
  text-align: center;
}

.premium-comparison-head strong:last-child {
  color: var(--app-gold);
}

.premium-comparison-row {
  min-height: 58px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.premium-comparison-row:last-child {
  border-bottom: 0;
}

.premium-comparison-row > span:first-child {
  color: rgba(245, 237, 245, 0.78);
  line-height: 1.45;
}

.premium-comparison-row .is-yes,
.premium-comparison-row .is-no {
  display: grid;
  place-items: center;
}

.premium-comparison-row .is-yes .material-symbols-outlined {
  color: rgba(245, 237, 245, 0.72);
  font-size: 20px;
}

.premium-comparison-row .is-premium .material-symbols-outlined {
  color: var(--app-gold);
}

.premium-comparison-row .is-no .material-symbols-outlined {
  color: rgba(245, 237, 245, 0.24);
  font-size: 19px;
}

.premium-trust {
  max-width: 720px;
  margin: 0 auto;
  padding: 34px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.premium-trust > .material-symbols-outlined {
  color: rgba(245, 237, 245, 0.42);
  font-size: 42px;
}

.premium-trust h2 {
  margin: 16px 0 0;
  color: var(--app-text);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.premium-trust p {
  margin: 14px 0 0;
  color: rgba(245, 237, 245, 0.66);
  line-height: 1.72;
}

.premium-mobile-hero {
  margin: 18px 16px 0;
  padding: 30px 20px;
  border-radius: 26px;
  text-align: center;
}

.premium-mobile-hero h1 {
  margin: 10px 0 0;
  color: var(--app-text);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.premium-mobile-hero p {
  margin: 16px 0 22px;
  color: var(--app-muted);
  line-height: 1.6;
}

.premium-mobile-section {
  margin-top: 18px;
}

.premium-mobile-feature-list .mobile-list-card {
  align-items: center;
}

.premium-mobile-plans {
  display: grid;
  gap: 14px;
}

.premium-mobile-plan {
  padding: 22px;
  border-radius: 22px;
}

.premium-mobile-plan.is-featured {
  border-color: rgba(240, 211, 122, 0.34);
  background:
    radial-gradient(circle at 90% 0%, rgba(240, 211, 122, 0.16), transparent 52%),
    rgba(32, 23, 22, 0.84);
}

.premium-mobile-plan span {
  color: var(--app-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premium-mobile-plan strong {
  display: block;
  margin-top: 8px;
  color: var(--app-text);
  font-size: 34px;
  font-weight: 900;
}

.premium-mobile-plan p {
  margin: 10px 0 18px;
  color: var(--app-muted);
  line-height: 1.55;
}

.premium-mobile-plan a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  border: 1px solid rgba(240, 211, 122, 0.28);
  border-radius: 12px;
  color: var(--app-gold);
  font-weight: 900;
}

.premium-mobile-plan.is-featured a {
  color: #1d1208;
  background: linear-gradient(135deg, #ffe394, #d5a642);
}

@media (max-width: 1120px) {
  .premium-feature-grid,
  .premium-plans-grid {
    grid-template-columns: 1fr;
  }

  .premium-feature-card.is-wide {
    grid-column: auto;
  }

  .premium-plan-card.is-featured {
    transform: none;
  }
}

@media (max-width: 767px) {
  .premium-access-main {
    width: 100%;
    padding-inline: 16px;
  }

  .premium-hero {
    min-height: auto;
    padding: 44px 0 36px;
  }

  .premium-comparison-card {
    padding: 18px;
    overflow-x: auto;
  }

  .premium-comparison-head,
  .premium-comparison-row {
    grid-template-columns: minmax(190px, 1fr) 82px 82px;
    min-width: 360px;
  }
}


/* Compliance contact and payment information */
.contact-details {
  display: grid;
  gap: 6px;
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.contact-details p,
.payment-currency {
  margin: 0;
}

.contact-details strong {
  color: rgba(246, 237, 240, 0.78);
  font-weight: 800;
}

.contact-details a {
  color: inherit;
  text-decoration: none;
}

.contact-details a:hover,
.contact-details a:focus-visible {
  color: var(--app-gold, var(--legal-gold-strong, #e6c46a));
}

.payment-methods {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.payment-methods__label,
.payment-currency {
  color: rgba(246, 237, 240, 0.66);
  font-size: 13px;
  line-height: 1.45;
}

.payment-methods__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.payment-methods__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(240, 211, 122, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.payment-methods__logo {
  display: block;
  width: auto;
  max-width: 74px;
  height: 24px;
  object-fit: contain;
}

.payment-methods__name {
  color: rgba(246, 237, 240, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.footer-compliance,
.app-footer-info {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.site-footer .contact-details,
.site-footer .payment-currency,
.site-footer .payment-methods__label,
.app-footer .contact-details,
.app-footer .payment-currency,
.app-footer .payment-methods__label,
.cmr-footer .contact-details,
.cmr-footer .payment-currency,
.cmr-footer .payment-methods__label {
  color: rgba(246, 237, 240, 0.62);
}

.app-footer {
  align-items: flex-start;
}

.app-footer-info > span {
  display: block;
}

.cmr-footer .payment-methods__item,
.app-footer .payment-methods__item {
  min-width: 52px;
  min-height: 30px;
}

.cmr-footer .payment-methods__logo,
.app-footer .payment-methods__logo {
  max-width: 66px;
  height: 20px;
}

.legal-document .contact-details {
  margin: 12px 0 26px;
  color: var(--legal-muted, rgba(246, 237, 240, 0.72));
}

.legal-footer .contact-details,
.legal-footer .payment-methods,
.legal-footer .payment-currency {
  margin-top: 14px;
}

.pl-payment-note {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin: 28px auto 0;
  padding: 22px 24px;
  border-radius: 14px;
  color: rgba(235, 222, 241, 0.72);
  font-size: 14px;
  line-height: 1.65;
}

.pl-payment-note p {
  margin: 0;
}

.pl-payment-note .payment-methods__label,
.pl-payment-note .payment-currency {
  color: rgba(235, 222, 241, 0.68);
}

@media (max-width: 760px) {
  .payment-methods__logo {
    max-width: 68px;
    height: 22px;
  }

  .app-footer {
    display: grid;
  }
}