:root {
  --bg: #f6f2ec;
  --bg-soft: #eee8df;
  --paper: rgba(255,255,255,.72);
  --paper-solid: #fffdf9;
  --ink: #252823;
  --muted: #6f716a;
  --sage: #778779;
  --sage-dark: #536358;
  --sage-light: #dce3da;
  --lavender: #b8aec2;
  --peach: #d9b9a6;
  --line: rgba(37,40,35,.11);
  --shadow: 0 22px 70px rgba(49,51,45,.09);
  --radius: 30px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 18%, rgba(184,174,194,.18), transparent 28%),
    radial-gradient(circle at 87% 12%, rgba(217,185,166,.18), transparent 28%),
    var(--bg);
  color: var(--ink);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

body::selection {
  background: var(--sage);
  color: white;
}

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

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

img {
  max-width: 100%;
}

main {
  position: relative;
  z-index: 2;
}

.ambient {
  position: fixed;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

.ambient-a {
  left: -180px;
  top: 16vh;
  background: var(--lavender);
}

.ambient-b {
  right: -200px;
  top: 45vh;
  background: var(--peach);
}

.site-header {
  width: min(1380px, calc(100% - 48px));
  height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37,40,35,.3);
  border-radius: 50%;
  font-size: 29px;
}

.brand strong {
  display: block;
  font-size: 13px;
  letter-spacing: .18em;
}

.brand small {
  color: var(--muted);
  display: block;
  font-size: 11px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14px;
}

.main-nav a {
  position: relative;
}

.main-nav a:not(.nav-login)::after {
  content: "";
  position: absolute;
  height: 1px;
  left: 0;
  right: 100%;
  bottom: -4px;
  background: var(--ink);
  transition: .25s ease;
}

.main-nav a:hover::after {
  right: 0;
}

.nav-login {
  padding: 11px 21px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255,255,255,.42);
}

.mobile-menu-button {
  display: none;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 0;
}

.mobile-menu-button span {
  width: 24px;
  height: 1px;
  display: block;
  background: var(--ink);
  margin: 6px auto;
}

.hero {
  width: min(1380px, calc(100% - 48px));
  min-height: calc(100vh - 92px);
  margin: 0 auto;
  padding: 70px 0 100px;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 60px;
}

.eyebrow,
.section-kicker {
  color: var(--sage-dark);
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 760px;
  margin: 24px 0 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 7vw, 108px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
}

.hero h1 em,
.about-grid h2 em {
  color: var(--sage);
  font-weight: 400;
}

.hero-lead {
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(18px, 1.7vw, 23px);
}

.hero-actions {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 25px;
  border: 0;
  border-radius: 99px;
  background: var(--sage-dark);
  color: white;
  cursor: pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(83,99,88,.20);
  background: #47564d;
}

.button-large {
  min-height: 58px;
  padding: 16px 31px;
}

.button-full {
  width: 100%;
}

.button-ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}

.button-ghost:hover {
  background: rgba(255,255,255,.55);
  color: var(--ink);
}

.text-link {
  font-size: 14px;
}

.hero-note {
  margin-top: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--sage);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(119,135,121,.45);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 10px rgba(119,135,121,0);
  }
}

.hero-visual {
  display: grid;
  place-items: center;
}

.mind-orbit {
  width: min(580px, 44vw);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(83,99,88,.20);
  border-radius: 46% 54% 58% 42% / 55% 44% 56% 45%;
}

.orbit-one {
  inset: 2%;
  animation: spin 28s linear infinite;
}

.orbit-two {
  inset: 14%;
  transform: rotate(33deg);
  animation: spinReverse 23s linear infinite;
}

.orbit-three {
  inset: 28%;
  animation: spin 19s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  from { transform: rotate(33deg); }
  to { transform: rotate(-327deg); }
}

.mind-center {
  width: 180px;
  height: 180px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.mind-center span {
  color: var(--muted);
  font-family: Georgia, serif;
  font-style: italic;
}

.mind-center strong {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
}

.thought {
  position: absolute;
  padding: 9px 17px;
  border-radius: 99px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  color: var(--muted);
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(40,40,35,.05);
}

.thought-a { top: 15%; left: 4%; }
.thought-b { top: 21%; right: 3%; }
.thought-c { bottom: 18%; left: 5%; }
.thought-d { bottom: 12%; right: 9%; }

.question-strip {
  width: min(1180px, calc(100% - 48px));
  margin: -45px auto 80px;
  padding: 24px 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 30px;
}

.question-strip > span {
  flex: 1;
  font-family: Georgia, serif;
  font-size: 18px;
}

.question-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.question-pills button {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  transition: .2s;
}

.question-pills button:hover,
.question-pills button.active {
  background: var(--sage);
  border-color: var(--sage);
  color: white;
}

.section {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 120px 0;
}

.about-grid {
  margin-top: 35px;
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 100px;
}

.about-grid h2,
.section-heading h2,
.closing-section h2,
.news-card h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.035em;
}

.about-copy {
  color: var(--muted);
  font-size: 18px;
}

.principles {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.principle {
  padding: 35px 35px 20px 0;
  border-right: 1px solid var(--line);
}

.principle + .principle {
  padding-left: 35px;
}

.principle:last-child {
  border-right: 0;
}

.principle > span {
  color: var(--sage);
  font-size: 12px;
}

.principle h3 {
  margin: 28px 0 12px;
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
}

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

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 50px;
}

.section-heading h2 {
  margin-top: 12px;
}

.section-heading > p {
  max-width: 420px;
  color: var(--muted);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.game-card {
  min-height: 510px;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 40px rgba(60,60,55,.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.game-card:nth-child(2n) {
  background: rgba(220,227,218,.52);
}

.game-card:nth-child(3n) {
  background: rgba(232,218,210,.48);
}

.game-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
}

.game-card-top,
.game-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-number {
  color: var(--muted);
  font-size: 12px;
}

.game-type {
  padding: 7px 12px;
  background: rgba(255,255,255,.52);
  border-radius: 99px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.game-card h3 {
  margin: 30px 0 15px;
  font-family: Georgia, serif;
  font-size: 37px;
  line-height: 1.04;
  font-weight: 400;
}

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

.game-details {
  padding: 22px 0;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.game-details small,
.game-price small {
  display: block;
  color: var(--muted);
  margin-bottom: 3px;
}

.game-details strong {
  font-size: 13px;
}

.game-card-bottom {
  padding-top: 24px;
}

.game-price strong {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
}

.round-button {
  width: 49px;
  height: 49px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  transition: .2s ease;
}

.round-button:hover {
  color: white;
  background: var(--sage-dark);
  transform: rotate(-20deg);
}

.calendar-section {
  padding-top: 80px;
}

.calendar-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 14px;
}

.calendar-grid {
  min-width: 1220px;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 8px;
}

.calendar-day {
  min-height: 270px;
  padding: 18px 12px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.35);
  display: flex;
  flex-direction: column;
}

.calendar-day.has-event {
  background: var(--paper-solid);
  box-shadow: 0 10px 35px rgba(50,50,45,.07);
}

.calendar-day.today {
  border-color: var(--sage);
}

.calendar-date {
  text-align: center;
}

.calendar-date span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}

.calendar-date strong {
  display: block;
  margin: 7px 0;
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 400;
}

.calendar-date small {
  color: var(--muted);
}

.day-events {
  margin-top: 20px;
}

.calendar-event {
  padding: 12px 8px;
  border-radius: 13px;
  background: var(--sage-light);
  text-align: center;
}

.calendar-event strong,
.calendar-event span,
.calendar-event small {
  display: block;
}

.calendar-event span {
  margin: 5px 0;
  font-size: 11px;
  line-height: 1.3;
}

.calendar-event small {
  color: var(--sage-dark);
  font-size: 10px;
}

.calendar-free {
  margin: auto;
  color: #aaa9a3;
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
}

.news-card {
  min-height: 410px;
  padding: 65px;
  border-radius: 40px;
  background: var(--sage-dark);
  color: white;
  display: grid;
  grid-template-columns: 1fr .7fr;
  align-items: center;
  gap: 60px;
  overflow: hidden;
}

.news-card .section-kicker {
  color: #cdd6ce;
}

.news-card h2 {
  margin: 18px 0 25px;
  font-size: clamp(39px, 5vw, 67px);
}

.news-card p {
  max-width: 650px;
  color: rgba(255,255,255,.72);
}

.news-symbol {
  display: grid;
  place-items: center;
}

.news-symbol span {
  font-size: 230px;
  line-height: 1;
  opacity: .16;
}

.news-image img {
  width: 100%;
  height: 330px;
  border-radius: 28px;
  object-fit: cover;
}

.closing-section {
  width: min(1100px, calc(100% - 48px));
  margin: 60px auto 150px;
  text-align: center;
}

.closing-circle {
  font-size: 100px;
  line-height: 1;
  color: var(--sage);
}

.closing-section h2 {
  max-width: 900px;
  margin: 20px auto 40px;
}

.site-footer {
  position: relative;
  z-index: 2;
  padding: 70px max(24px, calc((100vw - 1280px)/2));
  background: #252923;
  color: white;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr .7fr .7fr;
  gap: 60px;
}

.footer-brand {
  letter-spacing: .18em;
  font-size: 13px;
  font-weight: 700;
}

.footer-main p {
  max-width: 450px;
  color: rgba(255,255,255,.55);
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.footer-links strong,
.footer-contact strong {
  margin-bottom: 10px;
}

.footer-links a,
.footer-contact span {
  color: rgba(255,255,255,.60);
}

.footer-bottom {
  margin-top: 65px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.42);
  font-size: 11px;
}

.auth-page {
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100vh - 92px);
  margin: 0 auto;
  padding: 70px 0 110px;
  display: grid;
  grid-template-columns: 1fr .8fr;
  align-items: center;
  gap: 90px;
}

.auth-intro h1 {
  margin: 20px 0 28px;
  font-family: Georgia, serif;
  font-size: clamp(50px, 6vw, 82px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
}

.auth-intro h1 em {
  display: block;
  color: var(--sage);
  font-weight: 400;
}

.auth-intro > p {
  max-width: 570px;
  color: var(--muted);
  font-size: 18px;
}

.auth-security {
  margin-top: 35px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.auth-security span {
  padding: 7px 12px;
  background: rgba(255,255,255,.55);
  border-radius: 99px;
  color: var(--muted);
  font-size: 11px;
}

.auth-card {
  padding: 38px;
  border-radius: 32px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-card h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
}

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

.stack {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.field span,
.field-title {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
}

.field input {
  width: 100%;
  min-height: 53px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  outline: none;
  background: rgba(255,255,255,.62);
}

.field input:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(119,135,121,.10);
}

.consent-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: start;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.check input {
  margin-top: 2px;
  accent-color: var(--sage-dark);
}

.check a {
  color: var(--sage-dark);
  text-decoration: underline;
}

.captcha-box {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-soft);
  border-radius: 16px;
}

.captcha {
  max-width: 210px;
  height: 58px;
  display: block;
}

.captcha-refresh {
  width: 43px;
  height: 43px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
}

.error {
  padding: 14px 16px;
  margin: 18px 0;
  border-radius: 15px;
  background: #f6e2df;
  color: #7a423c;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.legal-page {
  width: min(940px, calc(100% - 48px));
  margin: 0 auto;
  padding: 80px 0 130px;
}

.legal-heading {
  margin-bottom: 45px;
}

.legal-heading h1 {
  margin: 13px 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(42px, 6vw, 70px);
  line-height: 1;
}

.legal-heading p {
  color: var(--muted);
}

.legal-card {
  padding: clamp(25px, 6vw, 70px);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 36px;
  box-shadow: var(--shadow);
}

.legal-card h2 {
  margin: 45px 0 14px;
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card p,
.legal-card li {
  color: #555951;
}

.legal-note {
  margin-top: 40px;
  padding: 20px 22px;
  background: var(--sage-light);
  border-radius: 18px;
}

.contact-legal {
  padding: 25px;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border-radius: 20px;
}

.contact-legal strong {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
}

.contact-legal span {
  color: var(--muted);
}

.contact-legal a {
  margin-top: 15px;
  font-size: 20px;
}

.cookie-banner {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(850px, calc(100% - 30px));
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(37,41,35,.95);
  color: white;
  box-shadow: 0 24px 80px rgba(20,20,20,.25);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  gap: 25px;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.63);
  font-size: 11px;
}

.cookie-banner p a {
  text-decoration: underline;
}

.cookie-actions {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 70px;
  border: 1px dashed var(--line);
  border-radius: 30px;
  color: var(--muted);
  text-align: center;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-visual {
    order: -1;
    padding-top: 15px;
  }

  .mind-orbit {
    width: min(500px, 80vw);
  }

  .hero-content {
    text-align: center;
  }

  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-note {
    justify-content: center;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

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

  .auth-page {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

@media (max-width: 720px) {
  .site-header,
  .hero,
  .section,
  .question-strip,
  .closing-section,
  .legal-page,
  .auth-page {
    width: min(100% - 30px, 1280px);
  }

  .site-header {
    height: 76px;
  }

  .brand strong {
    font-size: 10px;
  }

  .brand small {
    display: none;
  }

  .mobile-menu-button {
    display: block;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 68px;
    right: 0;
    left: 0;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-radius: 18px;
    background: rgba(255,253,249,.96);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 11px;
  }

  .hero {
    padding: 35px 0 90px;
  }

  .hero h1 {
    font-size: clamp(49px, 15vw, 72px);
  }

  .mind-orbit {
    width: min(420px, 94vw);
  }

  .thought {
    font-size: 10px;
  }

  .mind-center {
    width: 135px;
    height: 135px;
  }

  .mind-center strong {
    font-size: 19px;
  }

  .question-strip {
    margin-top: -40px;
    flex-direction: column;
    align-items: flex-start;
  }

  .section {
    padding: 80px 0;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .principles,
  .games-grid {
    grid-template-columns: 1fr;
  }

  .principle,
  .principle + .principle {
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .game-card {
    min-height: 450px;
  }

  .news-card {
    padding: 35px 25px;
    grid-template-columns: 1fr;
  }

  .news-symbol {
    display: none;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
  }

  .auth-card {
    padding: 24px 18px;
  }

  .cookie-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .cookie-actions {
    width: 100%;
    margin-left: 0;
  }

  .cookie-actions .button {
    flex: 1;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 11px;
  }
}

/* ==========================================================
   AG LUXURY — CHAMPAGNE / IVORY DESIGN SYSTEM
   ========================================================== */

:root {
  --bg: #f8f4ee !important;
  --bg-soft: #f0e8dd !important;

  --paper:
    rgba(255,253,249,.82) !important;

  --paper-solid:
    #fffdfa !important;

  --ink:
    #302c27 !important;

  --muted:
    #807970 !important;

  --sage:
    #b48648 !important;

  --sage-dark:
    #966b36 !important;

  --sage-light:
    #eee0cc !important;

  --lavender:
    #d7c4ae !important;

  --peach:
    #ead6c1 !important;

  --gold:
    #b68748;

  --gold-dark:
    #8e642f;

  --gold-light:
    #d9b77e;

  --ivory:
    #fffdfa;

  --champagne:
    #e9d7bd;

  --line:
    rgba(124,91,50,.14) !important;

  --shadow:
    0 25px 80px
    rgba(103,78,48,.10) !important;
}

body {
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(215,196,174,.30),
      transparent 29%
    ),
    radial-gradient(
      circle at 88% 11%,
      rgba(232,211,184,.30),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(255,255,255,.86),
      transparent 42%
    ),
    #f8f4ee !important;
}

.ambient-a {
  background:#cdae89 !important;
}

.ambient-b {
  background:#e8cfae !important;
}

/* Header */

.site-header {
  height: 94px;
}

.ag-logo-shell {
  background:#fffaf3;
  box-shadow:
    0 11px 32px
    rgba(139,102,54,.12) !important;
}

.ag-brand-copy strong {
  color:#5e452a;
  letter-spacing:.19em;
}

.ag-brand-copy small {
  color:#9b7d59 !important;
}

.nav-login {
  border-color:
    rgba(157,112,55,.20) !important;

  background:
    rgba(255,253,249,.54) !important;
}

/* Typography */

.hero h1,
.about-grid h2,
.section-heading h2,
.news-card h2,
.closing-section h2,
.auth-intro h1,
.legal-heading h1 {
  color:#342e28;
}

.hero h1 em,
.about-grid h2 em,
.auth-intro h1 em {
  color:
    var(--gold) !important;
}

.eyebrow,
.section-kicker {
  color:
    var(--gold-dark) !important;
}

/* Buttons */

.button {
  background:
    linear-gradient(
      135deg,
      #9c7038,
      #c99d5d
    ) !important;

  box-shadow:
    0 12px 35px
    rgba(158,112,55,.16);
}

.button:hover {
  background:
    linear-gradient(
      135deg,
      #865d2e,
      #b7894d
    ) !important;

  box-shadow:
    0 16px 38px
    rgba(141,98,45,.24) !important;
}

/* Hero */

.mind-center {
  background:
    rgba(255,253,249,.78) !important;

  border:
    1px solid
    rgba(190,151,98,.18);
}

.orbit {
  border-color:
    rgba(173,126,67,.23) !important;
}

.thought {
  background:
    rgba(255,253,249,.72) !important;

  border-color:
    rgba(204,173,130,.25) !important;
}

.pulse-dot {
  background:
    var(--gold) !important;
}

/* Cards */

.game-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,253,249,.90),
      rgba(248,241,231,.72)
    ) !important;

  border:
    1px solid
    rgba(185,143,89,.14) !important;

  box-shadow:
    0 16px 50px
    rgba(100,76,46,.07) !important;
}

.game-card:nth-child(2n) {
  background:
    linear-gradient(
      145deg,
      #faf5ed,
      #f0e3d2
    ) !important;
}

.game-card:nth-child(3n) {
  background:
    linear-gradient(
      145deg,
      #fffaf4,
      #efe0d3
    ) !important;
}

.game-type {
  color:#8d6737;

  background:
    rgba(255,255,255,.55) !important;

  border:
    1px solid
    rgba(180,134,74,.12);
}

.round-button:hover {
  background:
    var(--gold-dark) !important;
}

/* Calendar */

.calendar-day {
  border-color:
    rgba(177,132,72,.16) !important;

  background:
    rgba(255,253,249,.46) !important;
}

.calendar-day.has-event {
  background:
    linear-gradient(
      160deg,
      #fffdfa,
      #f8eee1
    ) !important;

  box-shadow:
    0 13px 37px
    rgba(116,84,44,.08) !important;
}

.calendar-day.today {
  border-color:
    #b78749 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(183,135,73,.12);
}

.calendar-event {
  background:
    linear-gradient(
      135deg,
      #efe0c9,
      #f5eadb
    ) !important;
}

.calendar-event small {
  color:
    #936b38 !important;
}

/* News */

.news-card {
  background:
    linear-gradient(
      135deg,
      #66513c,
      #8c6b47
    ) !important;

  box-shadow:
    0 30px 90px
    rgba(90,62,32,.14);
}

.news-card .section-kicker {
  color:
    #e8d4b7 !important;
}

/* Forms */

.auth-card,
.legal-card {
  background:
    rgba(255,253,249,.78) !important;

  border:
    1px solid
    rgba(197,159,108,.17) !important;

  box-shadow:
    0 28px 80px
    rgba(112,83,47,.09) !important;
}

.field input {
  border-color:
    rgba(157,118,67,.18) !important;

  background:
    rgba(255,254,251,.8) !important;
}

.field input:focus {
  border-color:
    #b4874f !important;

  box-shadow:
    0 0 0 3px
    rgba(180,135,79,.10) !important;
}

/* Footer */

.site-footer {
  background:
    #302a24 !important;
}

.footer-links a,
.footer-contact span {
  color:
    rgba(255,244,229,.62) !important;
}

/* Cookie */

.cookie-banner {
  background:
    rgba(55,46,37,.96) !important;
}

/* ==========================================================
   VERIFY PAGE — PREMIUM
   ========================================================== */

.lux-verify {
  width:
    min(1180px, calc(100% - 48px));

  min-height:
    calc(100vh - 94px);

  margin:0 auto;

  padding:
    55px 0 110px;

  display:grid;

  grid-template-columns:
    .92fr .78fr;

  gap:110px;

  align-items:center;
}

.lux-verify-brand {
  text-align:center;
}

.lux-verify-monogram {
  width:120px;
  height:120px;

  margin:
    0 auto 25px;

  border-radius:36px;

  overflow:hidden;

  box-shadow:
    0 22px 60px
    rgba(137,101,56,.12);
}

.lux-verify-monogram img {
  width:100%;
  height:100%;
}

.lux-verify-brand h1 {
  margin:
    17px 0 18px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(49px,5.4vw,78px);

  font-weight:400;

  line-height:.98;

  letter-spacing:
    -.045em;
}

.lux-verify-brand h1 em {
  display:block;

  color:
    var(--gold);

  font-weight:400;
}

.lux-verify-brand > p {
  margin:
    0 auto;

  max-width:470px;

  color:
    var(--muted);

  font-size:16px;
}

.lux-verify-brand p strong {
  display:block;

  margin-top:4px;

  color:
    #44382c;
}

.lux-mail-symbol {
  width:70px;
  height:70px;

  margin:
    38px auto 0;
}

.lux-mail-symbol svg {
  width:100%;
  height:100%;

  fill:none;

  stroke:
    #b88748;

  stroke-width:1.7;

  stroke-linecap:round;

  stroke-linejoin:round;
}

.lux-verify-card {
  padding:
    48px 44px 42px;

  border-radius:
    30px;

  background:
    rgba(255,253,249,.86);

  border:
    1px solid
    rgba(183,139,81,.17);

  box-shadow:
    0 28px 90px
    rgba(102,74,41,.10);

  backdrop-filter:
    blur(22px);
}

.lux-card-kicker {
  color:
    #aa7c42;

  text-align:center;

  font-size:10px;

  font-weight:700;

  letter-spacing:
    .20em;
}

.lux-verify-card h2 {
  margin:
    11px 0 8px;

  text-align:center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    38px;

  line-height:1;

  font-weight:400;
}

.lux-card-description {
  margin:
    0 auto 30px;

  max-width:
    350px;

  color:
    var(--muted);

  text-align:center;

  font-size:12px;
}

.lux-code-field > span {
  display:block;

  margin-bottom:8px;

  color:#83796e;

  text-align:center;

  font-size:11px;
}

.lux-code-field input {
  width:100%;

  height:82px;

  padding:
    0 15px 0 25px;

  border:
    1px solid
    rgba(180,133,73,.27);

  border-radius:
    16px;

  outline:none;

  background:
    #fffdf9;

  color:
    #a47234;

  text-align:center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    38px;

  letter-spacing:
    .36em;

  transition:
    border .2s ease,
    box-shadow .2s ease;
}

.lux-code-field input:focus {
  border-color:
    #b88749;

  box-shadow:
    0 0 0 4px
    rgba(184,135,73,.08);
}

.lux-code-field input::placeholder {
  color:#c8b8a3;

  letter-spacing:
    .20em;
}

.lux-primary-button {
  width:100%;

  min-height:58px;

  border:0;

  border-radius:
    13px;

  margin-top:6px;

  cursor:pointer;

  color:white;

  background:
    linear-gradient(
      105deg,
      #9c6d31,
      #c59654,
      #b47e3d
    );

  box-shadow:
    0 13px 33px
    rgba(155,106,48,.17);

  font-size:14px;

  font-weight:600;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.lux-primary-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 17px 38px
    rgba(155,106,48,.24);
}

.lux-resend {
  margin-top:22px;

  display:flex;

  justify-content:center;

  gap:6px;

  flex-wrap:wrap;

  color:
    #8c847b;

  font-size:11px;
}

.lux-resend a {
  color:
    #a7783d;

  font-weight:600;
}

.lux-back {
  display:block;

  margin-top:28px;

  color:
    #a67840;

  text-align:center;

  font-size:12px;
}

.lux-security {
  margin-top:30px;

  padding-top:22px;

  border-top:
    1px solid
    rgba(175,132,76,.13);

  display:grid;

  grid-template-columns:
    35px 1fr;

  gap:10px;
}

.lux-security-icon {
  color:
    #b2864d;

  font-size:28px;

  line-height:1;
}

.lux-security strong {
  display:block;

  margin-bottom:3px;

  color:#635648;

  font-size:11px;
}

.lux-security p {
  margin:0;

  color:
    #999086;

  font-size:9px;

  line-height:1.5;
}

.code-progress span {
  background:
    #e8ddd0 !important;
}

.code-progress span.filled {
  background:
    linear-gradient(
      90deg,
      #9d6e33,
      #c69a5b
    ) !important;
}

/* Desktop calendar: exactly 7 columns */

.calendar-grid {
  grid-template-columns:
    repeat(7,minmax(0,1fr))
    !important;
}

/* Mobile */

@media(max-width:900px) {

  .lux-verify {
    grid-template-columns:1fr;

    gap:45px;

    padding-top:35px;
  }

}

@media(max-width:720px) {

  .lux-verify {
    width:
      min(100% - 30px,1180px);
  }

  .lux-verify-brand h1 {
    font-size:
      clamp(45px,14vw,65px);
  }

  .lux-verify-monogram {
    width:90px;
    height:90px;

    border-radius:27px;
  }

  .lux-verify-card {
    padding:
      32px 19px;
  }

  .lux-code-field input {
    height:70px;

    font-size:31px;

    letter-spacing:.27em;
  }

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

}

/* ==========================================================
   AG LOGO — NO EXTERNAL IMAGE REQUIRED
   ========================================================== */

.ag-brand {
  display:flex;
  align-items:center;
  gap:14px;
}

.ag-monogram {
  width:57px;
  height:57px;

  position:relative;

  flex:0 0 57px;

  display:block;

  border:
    1px solid rgba(173,123,61,.35);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 25%,
      #fffdfa,
      #f2e7d7
    );

  box-shadow:
    0 10px 30px
    rgba(113,81,43,.10);
}

.ag-monogram::after {
  content:"";

  position:absolute;

  inset:6px;

  border:
    1px solid rgba(179,129,64,.17);

  border-radius:50%;
}

.ag-a,
.ag-g {
  position:absolute;

  top:50%;

  transform:
    translateY(-50%);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:27px;

  line-height:1;

  color:#a87537;
}

.ag-a {
  left:10px;
}

.ag-g {
  left:25px;
}

.ag-brand-copy strong {
  display:block;

  font-size:11px;

  letter-spacing:.20em;

  color:#5a4631;
}

.ag-brand-copy small {
  display:block;

  margin-top:3px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:11px;

  font-style:italic;

  color:#9a8061;
}

/* ==========================================================
   BUY FORM
   ========================================================== */

.game-price-row {
  margin-top:22px;
}

.buy-form {
  margin-top:22px;

  padding-top:22px;

  border-top:
    1px solid rgba(162,119,63,.15);

  display:flex;

  flex-direction:column;

  gap:13px;
}

.buy-form label {
  display:block;
}

.buy-form label > span {
  display:block;

  margin-bottom:6px;

  color:#8e8479;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.08em;
}

.buy-form select,
.buy-form input {
  width:100%;

  height:46px;

  padding:0 13px;

  border:
    1px solid rgba(170,125,65,.20);

  border-radius:11px;

  outline:none;

  background:
    rgba(255,253,249,.82);

  color:#4f463e;

  font-size:12px;
}

.buy-form select:focus,
.buy-form input:focus {
  border-color:
    #b68445;

  box-shadow:
    0 0 0 3px
    rgba(182,132,69,.08);
}

.buy-form-row {
  display:grid;

  grid-template-columns:
    .65fr 1.35fr;

  gap:10px;
}

.lux-buy-button {
  width:100%;

  min-height:58px;

  margin-top:10px;

  padding:0 20px;

  border:0;

  border-radius:13px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  cursor:pointer;

  color:white;

  background:
    linear-gradient(
      105deg,
      #98692f,
      #c39655
    );

  box-shadow:
    0 13px 32px
    rgba(151,104,47,.17);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.lux-buy-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 17px 38px
    rgba(151,104,47,.24);
}

.lux-buy-button span {
  font-size:13px;
}

.lux-buy-button strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:18px;

  font-weight:400;
}

@media(max-width:720px) {

  .ag-monogram {
    width:47px;
    height:47px;
    flex-basis:47px;
  }

  .ag-a,
  .ag-g {
    font-size:23px;
  }

  .ag-a {
    left:8px;
  }

  .ag-g {
    left:21px;
  }

  .buy-form-row {
    grid-template-columns:1fr;
  }

}

/* ==========================================================
   ADMIN PANEL
   ========================================================== */

.admin-shell {
  width:min(1500px,calc(100% - 36px));
  margin:25px auto 100px;
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.admin-sidebar {
  position:sticky;
  top:18px;
  min-height:calc(100vh - 36px);
  padding:25px 18px;
  border:1px solid rgba(176,132,75,.13);
  border-radius:26px;
  background:rgba(255,253,249,.82);
  box-shadow:0 20px 55px rgba(103,76,43,.07);
  backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
}

.admin-sidebar-head {
  padding:5px 8px 25px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
}

.admin-mini-logo {
  width:47px;
  height:47px;
  position:relative;
  border-radius:50%;
  border:1px solid rgba(174,126,63,.3);
  background:#fbf5ec;
  flex:0 0 auto;
}

.admin-mini-logo span {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-family:Georgia,serif;
  font-size:22px;
  color:#a87537;
}

.admin-mini-logo span:first-child {
  left:7px;
}

.admin-mini-logo span:last-child {
  left:20px;
}

.admin-sidebar-head strong {
  display:block;
  color:#4c4136;
  font-family:Georgia,serif;
  font-size:15px;
  font-weight:400;
}

.admin-sidebar-head small {
  display:block;
  margin-top:2px;
  color:#9b9187;
  font-size:10px;
}

.admin-nav {
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.admin-nav a {
  padding:11px 13px;
  border-radius:12px;
  color:#756c63;
  font-size:12px;
  transition:.2s ease;
}

.admin-nav a:hover,
.admin-nav a.active {
  background:linear-gradient(135deg,#f3e8d8,#efe1cd);
  color:#8d612d;
}

.admin-sidebar-bottom {
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:7px;
}

.admin-sidebar-bottom a {
  padding:8px 10px;
  color:#958b81;
  font-size:11px;
}

.admin-content {
  min-width:0;
}

.admin-top {
  padding:28px 5px 35px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}

.admin-top h1 {
  margin:10px 0 12px;
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(48px,5vw,74px);
  line-height:.95;
  letter-spacing:-.04em;
}

.admin-top h1 em {
  color:#b17d3c;
  font-weight:400;
}

.admin-top p {
  max-width:620px;
  margin:0;
  color:var(--muted);
}

.admin-status {
  padding:9px 14px;
  border:1px solid rgba(168,124,65,.16);
  border-radius:99px;
  background:rgba(255,253,249,.72);
  color:#73695f;
  font-size:11px;
  white-space:nowrap;
}

.admin-status-dot {
  width:7px;
  height:7px;
  display:inline-block;
  margin-right:7px;
  border-radius:50%;
  background:#7c9a79;
  box-shadow:0 0 0 5px rgba(124,154,121,.10);
}

.admin-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin-bottom:30px;
}

.admin-kpi {
  min-height:150px;
  padding:22px;
  border:1px solid rgba(173,126,67,.12);
  border-radius:22px;
  background:rgba(255,253,249,.78);
  box-shadow:0 14px 40px rgba(96,71,42,.05);
  display:flex;
  gap:15px;
}

.admin-kpi-accent {
  background:linear-gradient(145deg,#f3e7d6,#ead7bb);
}

.admin-kpi-icon {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.58);
  color:#a87537;
  font-size:19px;
}

.admin-kpi small {
  display:block;
  color:#938a80;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.admin-kpi strong {
  display:block;
  margin:7px 0 1px;
  font-family:Georgia,serif;
  font-size:35px;
  line-height:1;
  font-weight:400;
  color:#40372e;
}

.admin-kpi span {
  color:#9b9288;
  font-size:10px;
}

.admin-section {
  margin-top:20px;
  padding:28px;
  border:1px solid rgba(172,126,68,.11);
  border-radius:26px;
  background:rgba(255,253,249,.62);
  box-shadow:0 16px 50px rgba(96,71,42,.04);
}

.admin-section.compact {
  margin-top:20px;
}

.admin-section-head {
  margin-bottom:23px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}

.admin-section-head h2 {
  margin:6px 0 0;
  font-family:Georgia,serif;
  font-size:34px;
  font-weight:400;
}

.admin-section-head > p {
  max-width:390px;
  margin:0;
  color:var(--muted);
  font-size:12px;
}

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

.admin-course-card {
  padding:22px;
  border:1px solid rgba(173,127,68,.13);
  border-radius:21px;
  background:#fffdf9;
}

.admin-course-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.admin-course-top > div {
  display:flex;
  align-items:center;
  gap:9px;
}

.admin-course-number {
  color:#aaa097;
  font-size:10px;
}

.admin-course-type {
  padding:5px 9px;
  border-radius:99px;
  background:#f4eadc;
  color:#987044;
  font-size:9px;
  text-transform:uppercase;
}

.admin-course-state {
  padding:5px 9px;
  border-radius:99px;
  font-size:9px;
}

.admin-course-state.active {
  background:#e8efe5;
  color:#668064;
}

.admin-course-state.inactive {
  background:#eeeae5;
  color:#968c83;
}

.admin-course-card h3 {
  margin:19px 0 17px;
  font-family:Georgia,serif;
  font-size:27px;
  font-weight:400;
}

.admin-course-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.admin-course-metrics small {
  display:block;
  color:#978e85;
  font-size:9px;
}

.admin-course-metrics strong {
  display:block;
  margin-top:2px;
  font-size:13px;
  font-weight:600;
}

.admin-inline-form {
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.admin-inline-form label,
.admin-panel label {
  display:block;
}

.admin-inline-form label > span,
.admin-panel label > span,
.admin-textarea-label > span {
  display:block;
  margin-bottom:6px;
  color:#8e857c;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.admin-panel input,
.admin-panel select,
.admin-panel textarea,
.admin-inline-form input,
.admin-inline-form select {
  width:100%;
  min-height:45px;
  padding:0 12px;
  border:1px solid rgba(166,123,67,.17);
  border-radius:11px;
  background:#fffdfa;
  color:#4b4239;
  outline:none;
  font:inherit;
  font-size:12px;
}

.admin-panel textarea {
  min-height:115px;
  padding:12px;
  resize:vertical;
}

.admin-panel input:focus,
.admin-panel select:focus,
.admin-panel textarea:focus,
.admin-inline-form input:focus,
.admin-inline-form select:focus {
  border-color:#b88444;
  box-shadow:0 0 0 3px rgba(184,132,68,.08);
}

.admin-form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

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

.admin-check {
  min-height:45px;
  padding:0 12px;
  border:1px solid rgba(166,123,67,.14);
  border-radius:11px;
  background:#fffdfa;
  display:flex !important;
  align-items:center;
  gap:8px;
}

.admin-check input {
  width:auto !important;
  min-height:auto !important;
  accent-color:#a87434;
}

.admin-check span {
  margin:0 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.admin-panel {
  padding:21px;
  border:1px solid rgba(170,125,67,.12);
  border-radius:20px;
  background:#fffdf9;
}

.admin-stack {
  display:flex;
  flex-direction:column;
  gap:13px;
}

.admin-textarea-label {
  display:block;
  margin-top:13px;
}

.admin-panel-footer {
  margin-top:15px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.admin-panel-footer > span {
  color:#9b9288;
  font-size:10px;
}

.admin-button {
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:11px;
  cursor:pointer;
  background:linear-gradient(105deg,#97672e,#c09150);
  color:white;
  font-size:11px;
  font-weight:600;
  box-shadow:0 10px 26px rgba(149,102,45,.14);
  transition:.2s ease;
}

.admin-button:hover {
  transform:translateY(-1px);
  box-shadow:0 13px 30px rgba(149,102,45,.21);
}

.admin-button-large {
  min-width:180px;
}

.admin-two-column {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.admin-info-box {
  padding:12px 14px;
  border-radius:12px;
  background:#f5eee5;
  color:#8c8278;
  font-size:10px;
  line-height:1.5;
}

.admin-broadcast textarea {
  min-height:160px;
}

.admin-empty {
  grid-column:1/-1;
  padding:40px;
  border:1px dashed var(--line);
  border-radius:18px;
  color:#968d84;
  text-align:center;
}

@media(max-width:1150px) {
  .admin-shell {
    grid-template-columns:1fr;
  }

  .admin-sidebar {
    position:relative;
    top:auto;
    min-height:auto;
  }

  .admin-nav {
    flex-direction:row;
    flex-wrap:wrap;
  }

  .admin-sidebar-bottom {
    margin-top:18px;
    flex-direction:row;
  }

  .admin-kpis {
    grid-template-columns:1fr 1fr;
  }

  .admin-form-grid {
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px) {
  .admin-shell {
    width:min(100% - 18px,1500px);
    margin-top:10px;
  }

  .admin-top {
    align-items:flex-start;
    flex-direction:column;
  }

  .admin-kpis,
  .admin-course-grid,
  .admin-two-column,
  .admin-form-grid,
  .admin-form-row {
    grid-template-columns:1fr;
  }

  .admin-section {
    padding:18px;
  }

  .admin-section-head {
    align-items:flex-start;
    flex-direction:column;
  }

  .admin-course-metrics {
    grid-template-columns:1fr 1fr 1fr;
  }

  .admin-panel-footer {
    align-items:stretch;
    flex-direction:column;
  }

  .admin-button-large {
    width:100%;
  }
}

/* ==========================================================
   ADMIN — DATES MANAGEMENT
   ========================================================== */

.admin-date-layout {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:18px;
  align-items:start;
}

.admin-subtitle {
  margin-bottom:14px;
  color:#6c5d4e;
  font-family:Georgia,serif;
  font-size:18px;
}

.admin-existing {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.admin-date-card {
  padding:17px;
  border:1px solid rgba(169,124,65,.14);
  border-radius:17px;
  background:#fffdfa;
  transition:.2s ease;
}

.admin-date-card:hover {
  box-shadow:
    0 14px 35px
    rgba(103,74,40,.07);
}

.admin-date-card.disabled {
  opacity:.65;
  background:#f6f2ed;
}

.admin-date-card-head {
  margin-bottom:14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
}

.admin-date-card-head strong {
  display:block;
  color:#4d4237;
  font-family:Georgia,serif;
  font-size:17px;
  font-weight:400;
}

.admin-date-card-head span {
  display:block;
  margin-top:3px;
  color:#958b82;
  font-size:9px;
}

.admin-date-status {
  padding:5px 9px;
  border-radius:99px;
  background:#eee8e2;
  color:#9b8e82 !important;
  white-space:nowrap;
}

.admin-date-status.active {
  background:#e8efe5;
  color:#6c8669 !important;
}

.admin-date-edit {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.admin-date-edit label > span {
  display:block;
  margin-bottom:5px;
  color:#93897f;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.admin-date-edit input,
.admin-date-edit select {
  width:100%;
  min-height:42px;
  padding:0 11px;
  border:1px solid rgba(167,123,67,.17);
  border-radius:10px;
  background:#fffdfa;
  color:#4b4239;
  outline:none;
}

.admin-date-actions {
  display:flex;
  justify-content:flex-end;
}

.admin-delete-form {
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid var(--line);
}

.admin-danger-button {
  border:0;
  padding:7px 0;
  background:transparent;
  color:#a5685e;
  cursor:pointer;
  font-size:10px;
}

.admin-danger-button:hover {
  text-decoration:underline;
}

.admin-empty-small {
  padding:22px;
  border:1px dashed rgba(166,124,70,.18);
  border-radius:14px;
  color:#9b9187;
  text-align:center;
  font-size:11px;
}


/* ==========================================================
   ADMIN — BROADCAST
   ========================================================== */

.admin-broadcast-layout {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  align-items:start;
}

.admin-user-list {
  max-height:520px;
  overflow:auto;
  padding:18px;
  border:1px solid rgba(170,125,68,.12);
  border-radius:20px;
  background:#fffdfa;
}

.admin-user-row {
  padding:10px 0;
  display:grid;
  grid-template-columns:36px 1fr;
  gap:10px;
  align-items:center;
  border-bottom:1px solid var(--line);
}

.admin-user-row:last-child {
  border-bottom:0;
}

.admin-user-avatar {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(
    145deg,
    #f3e5d2,
    #ead7ba
  );
  color:#9d6d32;
  font-family:Georgia,serif;
  font-size:15px;
}

.admin-user-row strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#51463b;
  font-size:10px;
}

.admin-user-row span {
  display:block;
  margin-top:2px;
  color:#9a9188;
  font-size:8px;
}


/* ==========================================================
   ADMIN — HOMEPAGE EDIT STATE
   ========================================================== */

#homepage .admin-panel {
  position:relative;
}

#homepage .admin-panel::before {
  content:"Текущая опубликованная версия";
  display:block;
  margin-bottom:14px;
  color:#a2743b;
  font-size:9px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1000px) {

  .admin-date-layout,
  .admin-broadcast-layout {
    grid-template-columns:1fr;
  }

}

@media(max-width:720px) {

  .admin-date-card-head {
    flex-direction:column;
  }

}

/* =========================================================
   PROMO PRICE PREVIEW
   ========================================================= */

.promo-price-preview {
  padding:13px 14px;
  border:1px solid rgba(180,132,69,.16);
  border-radius:12px;
  background:#f7efe4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.promo-price-preview[hidden] {
  display:none;
}

.promo-price-preview > div {
  display:flex;
  flex-direction:column;
}

.promo-price-preview span {
  color:#94887b;
  font-size:9px;
}

.promo-price-preview del {
  color:#a49a90;
  font-size:12px;
}

.promo-price-preview strong {
  margin-top:2px;
  color:#a86f2e;
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:400;
}

.promo-message {
  min-height:16px;
  margin-top:-4px;
  font-size:10px;
}

.promo-message.success-state {
  color:#6b8468;
}

.promo-message.error-state {
  color:#a46158;
}


/* =========================================================
   PROMO ADMIN
   ========================================================= */

.admin-promo-layout {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:18px;
  align-items:start;
}

.admin-promo-card {
  padding:17px;
  border:1px solid rgba(169,124,65,.14);
  border-radius:17px;
  background:#fffdfa;
}

.admin-promo-card.disabled {
  opacity:.62;
  background:#f5f1ec;
}

.admin-promo-card-head {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:flex-start;
}

.admin-promo-card-head strong {
  display:block;
  font-family:Georgia,serif;
  color:#4d4135;
  font-size:18px;
  font-weight:400;
}

.admin-promo-card-head span {
  display:block;
  margin-top:3px;
  color:#948a80;
  font-size:9px;
}

.admin-promo-values {
  margin:15px 0;
  padding:13px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.admin-promo-values small {
  display:block;
  color:#998f85;
  font-size:8px;
}

.admin-promo-values strong {
  display:block;
  margin-top:3px;
  color:#53483d;
  font-size:12px;
}

.admin-promo-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:15px;
}

.admin-secondary-button {
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(162,117,59,.16);
  border-radius:9px;
  background:#f6eee3;
  color:#936b39;
  cursor:pointer;
  font-size:9px;
}


/* =========================================================
   NEWS IMAGE
   ========================================================= */

.admin-news-preview {
  padding:13px;
  border:1px solid rgba(166,123,67,.13);
  border-radius:14px;
  background:#f8f3ec;
}

.admin-news-preview > span {
  display:block;
  margin-bottom:9px;
  color:#978b7e;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.admin-news-preview img {
  width:100%;
  max-height:240px;
  display:block;
  border-radius:11px;
  object-fit:cover;
}

.admin-panel input[type="file"] {
  height:auto;
  padding:10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px) {

  .admin-promo-layout {
    grid-template-columns:1fr;
  }

}

@media(max-width:720px) {

  .admin-promo-values {
    grid-template-columns:1fr;
  }

}

/* ==========================================================
   ADMIN — DATES + PROMOS VERTICAL
   ========================================================== */

.admin-one-column {
  grid-template-columns:
    minmax(0,1fr) !important;
}

.admin-one-column
.admin-section {
  width:100%;
}

#dates .admin-date-layout,
#promos .admin-promo-layout {
  grid-template-columns:
    310px minmax(0,1fr) !important;
}

#dates .admin-existing,
#promos .admin-existing {
  min-width:0;
}

#dates .admin-date-card,
#promos .admin-promo-card {
  width:100%;
}

#dates .admin-date-edit {
  padding-top:5px;
}

#dates .admin-form-row {
  grid-template-columns:
    minmax(240px,1.4fr)
    minmax(120px,.6fr);
}


/* ==========================================================
   ADMIN SIDEBAR SCROLL STATE
   ========================================================== */

.admin-nav a {
  position:relative;
}

.admin-nav a.active {
  color:#8f602c !important;
  background:
    linear-gradient(
      135deg,
      #f4e8d5,
      #ebd8ba
    ) !important;
}

.admin-nav a.active::before {
  content:"";

  position:absolute;

  left:5px;
  top:50%;

  width:3px;
  height:20px;

  border-radius:10px;

  transform:
    translateY(-50%);

  background:#b47c37;
}


/* ==========================================================
   BUY FORM — RESTORED DATE SELECTION
   ========================================================== */

.buy-date-field {
  display:block;
}

.buy-form {
  margin-top:24px;
}

.buy-form > label {
  margin-top:3px;
}

.buy-form > label > span {
  display:block;

  margin-bottom:7px;

  color:#95887a;

  font-size:9px;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.buy-form select,
.buy-form input {
  width:100%;

  min-height:48px;

  padding:0 13px;

  border:
    1px solid
    rgba(170,125,65,.20);

  border-radius:11px;

  background:#fffdfa;

  color:#51483e;

  outline:none;
}

.buy-form select:focus,
.buy-form input:focus {
  border-color:#b88443;

  box-shadow:
    0 0 0 3px
    rgba(184,132,67,.08);
}

.buy-no-dates {
  padding:12px 14px;

  border-radius:11px;

  background:#f6ece0;

  color:#9a7250;

  font-size:10px;
}

.lux-buy-button:disabled {
  cursor:not-allowed;

  opacity:.55;

  transform:none !important;

  box-shadow:none !important;
}


/* ==========================================================
   DESKTOP COURSE GRID
   ========================================================== */

.games-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(330px,420px)
    ) !important;

  justify-content:start;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1000px) {

  #dates .admin-date-layout,
  #promos .admin-promo-layout {
    grid-template-columns:
      1fr !important;
  }

}

@media(max-width:720px) {

  #dates .admin-form-row {
    grid-template-columns:
      1fr;
  }

}

/* ==========================================================
   ADMIN — DATES + PROMOS VERTICAL
   ========================================================== */

.admin-one-column {
  grid-template-columns:
    minmax(0,1fr) !important;
}

.admin-one-column
.admin-section {
  width:100%;
}

#dates .admin-date-layout,
#promos .admin-promo-layout {
  grid-template-columns:
    310px minmax(0,1fr) !important;
}

#dates .admin-existing,
#promos .admin-existing {
  min-width:0;
}

#dates .admin-date-card,
#promos .admin-promo-card {
  width:100%;
}

#dates .admin-date-edit {
  padding-top:5px;
}

#dates .admin-form-row {
  grid-template-columns:
    minmax(240px,1.4fr)
    minmax(120px,.6fr);
}


/* ==========================================================
   ADMIN SIDEBAR SCROLL STATE
   ========================================================== */

.admin-nav a {
  position:relative;
}

.admin-nav a.active {
  color:#8f602c !important;
  background:
    linear-gradient(
      135deg,
      #f4e8d5,
      #ebd8ba
    ) !important;
}

.admin-nav a.active::before {
  content:"";

  position:absolute;

  left:5px;
  top:50%;

  width:3px;
  height:20px;

  border-radius:10px;

  transform:
    translateY(-50%);

  background:#b47c37;
}


/* ==========================================================
   BUY FORM — RESTORED DATE SELECTION
   ========================================================== */

.buy-date-field {
  display:block;
}

.buy-form {
  margin-top:24px;
}

.buy-form > label {
  margin-top:3px;
}

.buy-form > label > span {
  display:block;

  margin-bottom:7px;

  color:#95887a;

  font-size:9px;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.buy-form select,
.buy-form input {
  width:100%;

  min-height:48px;

  padding:0 13px;

  border:
    1px solid
    rgba(170,125,65,.20);

  border-radius:11px;

  background:#fffdfa;

  color:#51483e;

  outline:none;
}

.buy-form select:focus,
.buy-form input:focus {
  border-color:#b88443;

  box-shadow:
    0 0 0 3px
    rgba(184,132,67,.08);
}

.buy-no-dates {
  padding:12px 14px;

  border-radius:11px;

  background:#f6ece0;

  color:#9a7250;

  font-size:10px;
}

.lux-buy-button:disabled {
  cursor:not-allowed;

  opacity:.55;

  transform:none !important;

  box-shadow:none !important;
}


/* ==========================================================
   DESKTOP COURSE GRID
   ========================================================== */

.games-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(330px,420px)
    ) !important;

  justify-content:start;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1000px) {

  #dates .admin-date-layout,
  #promos .admin-promo-layout {
    grid-template-columns:
      1fr !important;
  }

}

@media(max-width:720px) {

  #dates .admin-form-row {
    grid-template-columns:
      1fr;
  }

}

/* ==========================================================
   AG LOGIN LOGO — NO IMAGE FILE
   ========================================================== */

.ag-login-logo {
  position:relative !important;

  display:block !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 35% 28%,
      #fffdf9,
      #f2e6d4
    ) !important;

  border:
    1px solid
    rgba(175,126,62,.34) !important;

  box-shadow:
    0 18px 45px
    rgba(119,83,42,.10) !important;
}

.ag-login-logo::after {
  content:"";

  position:absolute;

  inset:8px;

  border:
    1px solid
    rgba(176,126,62,.16);

  border-radius:inherit;
}

.ag-login-a,
.ag-login-g {
  position:absolute;

  top:50%;

  z-index:2;

  transform:
    translateY(-50%);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color:#a97434;

  line-height:1;
}

.lux-verify-monogram .ag-login-a,
.lux-verify-monogram .ag-login-g {
  font-size:46px;
}

.lux-verify-monogram .ag-login-a {
  left:25px;
}

.lux-verify-monogram .ag-login-g {
  left:56px;
}

.verify-logo-center .ag-login-a,
.verify-logo-center .ag-login-g {
  font-size:38px;
}

.verify-logo-center .ag-login-a {
  left:24px;
}

.verify-logo-center .ag-login-g {
  left:49px;
}

.verify-card-logo .ag-login-a,
.verify-card-logo .ag-login-g {
  font-size:23px;
}

.verify-card-logo .ag-login-a {
  left:10px;
}

.verify-card-logo .ag-login-g {
  left:25px;
}


/* ==========================================================
   NEWS IMAGE — RESPONSIVE
   ========================================================== */

.news-card {
  align-items:stretch !important;
}

.news-image {
  min-width:0;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

  border-radius:28px;
}

.news-image img {
  width:100% !important;

  height:100% !important;

  min-height:280px;

  max-height:440px;

  display:block;

  object-fit:cover !important;

  object-position:center center !important;

  border-radius:28px !important;
}

@media(max-width:900px) {

  .news-card {
    grid-template-columns:1fr !important;
  }

  .news-image {
    width:100%;
  }

  .news-image img {
    width:100% !important;
    height:auto !important;
    min-height:220px;
    max-height:360px;
    aspect-ratio:16/10;
  }

}

@media(max-width:600px) {

  .news-image img {
    min-height:190px;
    max-height:280px;
    aspect-ratio:4/3;
  }

}


/* ==========================================================
   COURSE ANCHOR AFTER LOGIN
   ========================================================== */

.game-card {
  scroll-margin-top:110px;
}

.game-card:target {
  border-color:
    rgba(177,126,60,.42) !important;

  box-shadow:
    0 24px 70px
    rgba(154,108,50,.14) !important;
}

/* =========================================================
   ACCOUNT EMPTY STATE
   ========================================================= */

.account-empty {
  max-width:620px;
  margin-top:30px;
  padding:45px;
  border:1px solid rgba(174,127,68,.15);
  border-radius:28px;
  background:rgba(255,253,249,.72);
  box-shadow:0 20px 65px rgba(103,75,42,.06);
}

.account-empty-symbol {
  margin-bottom:16px;
  color:#b17c3a;
  font-size:48px;
  line-height:1;
}

.account-empty h2 {
  margin:0 0 12px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:32px;
  font-weight:400;
}

.account-empty p {
  max-width:480px;
  margin:0 0 24px;
  color:#81786f;
  line-height:1.7;
}

.account-choose-button {
  min-height:52px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:99px;
  color:white;
  background:linear-gradient(
    105deg,
    #99692f,
    #c69350
  );
  box-shadow:0 12px 30px rgba(151,104,47,.17);
}


/* =========================================================
   NEWS ADMIN EDIT
   ========================================================= */

#homepage textarea {
  min-height:150px;
}

#homepage .admin-news-preview {
  margin-bottom:12px;
}

#homepage .admin-news-preview img {
  width:100%;
  max-height:300px;
  object-fit:cover;
  object-position:center;
}

/* ==========================================================
   PREMIUM SITE HEADER
   ========================================================== */

.site-header-premium {
  width:
    min(1460px,calc(100% - 38px));

  height:88px;

  margin:
    14px auto 0;

  padding:
    0 20px;

  position:sticky;

  top:12px;

  z-index:100;

  border:
    1px solid
    rgba(171,125,65,.13);

  border-radius:25px;

  background:
    rgba(255,253,249,.78);

  box-shadow:
    0 14px 50px
    rgba(91,67,39,.07);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}


.premium-brand {
  display:flex;

  align-items:center;

  gap:13px;

  text-decoration:none;
}


.premium-ag {
  width:58px;
  height:58px;

  flex:
    0 0 58px;

  position:relative;

  border:
    1px solid
    rgba(182,132,68,.38);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #fffdfa,
      #f3e8d8
    );

  box-shadow:
    0 8px 28px
    rgba(130,91,44,.10);
}


.premium-ag::after {
  content:"";

  position:absolute;

  inset:5px;

  border:
    1px solid
    rgba(181,130,66,.15);

  border-radius:50%;
}


.premium-ag-a,
.premium-ag-g {
  position:absolute;

  top:50%;

  z-index:2;

  transform:
    translateY(-50%);

  color:#a66e2f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:25px;

  line-height:1;
}


.premium-ag-a {
  left:9px;
}


.premium-ag-g {
  left:26px;
}


.premium-brand-copy strong {
  display:block;

  color:#493d31;

  font-size:10px;

  font-weight:700;

  letter-spacing:.21em;
}


.premium-brand-copy small {
  display:block;

  margin-top:5px;

  color:#a18667;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:11px;

  font-style:italic;
}


.premium-nav {
  display:flex;

  align-items:center;

  gap:4px;
}


.premium-nav > a {
  padding:
    10px 12px;

  border-radius:11px;

  color:#6f655b;

  font-size:11px;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.premium-nav > a:hover {
  background:
    rgba(239,224,202,.55);

  color:#98672e;

  transform:
    translateY(-1px);
}


.header-admin-link {
  color:#9d6d32 !important;
}


.header-account-link {
  display:flex !important;

  align-items:center;

  gap:7px;

  margin-left:6px;

  border:
    1px solid
    rgba(170,124,65,.14);

  background:
    rgba(255,255,255,.53);
}


.header-user-dot {
  width:7px;
  height:7px;

  border-radius:50%;

  background:#b7803b;

  box-shadow:
    0 0 0 4px
    rgba(183,128,59,.10);
}


.header-logout-form {
  margin:0;
}


.header-logout {
  min-height:38px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(155,109,52,.16);

  border-radius:
    11px;

  cursor:pointer;

  color:#8c673e;

  background:
    linear-gradient(
      145deg,
      #f7eee2,
      #efe0cb
    );

  font-size:10px;

  transition:.2s ease;
}


.header-logout:hover {
  border-color:
    rgba(155,109,52,.25);

  background:#ead6ba;

  transform:
    translateY(-1px);
}


.header-login {
  min-width:85px;

  display:flex !important;

  align-items:center;

  justify-content:center;

  color:white !important;

  background:
    linear-gradient(
      105deg,
      #98672e,
      #c69250
    ) !important;

  box-shadow:
    0 9px 25px
    rgba(151,104,47,.14);
}


/* ==========================================================
   ACCOUNT PAGE
   ========================================================== */

.account-page {
  min-height:
    calc(100vh - 120px);
}


.account-empty {
  position:relative;

  overflow:hidden;
}


.account-empty::after {
  content:"AG";

  position:absolute;

  right:-20px;
  bottom:-55px;

  color:
    rgba(181,128,60,.035);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:180px;

  pointer-events:none;
}


/* ==========================================================
   ADMIN NEWS EDITOR
   ========================================================== */

#homepage .admin-panel {
  max-width:none;
}


#homepage textarea {
  min-height:170px;
}


#homepage .admin-news-preview {
  padding:12px;

  border:
    1px solid
    rgba(170,124,65,.12);

  border-radius:17px;

  background:#f8f1e8;
}


#homepage .admin-news-preview > span {
  display:block;

  margin-bottom:9px;

  color:#9a8c7e;

  font-size:9px;

  letter-spacing:.07em;

  text-transform:uppercase;
}


#homepage .admin-news-preview img {
  width:100%;

  height:auto;

  max-height:390px;

  display:block;

  object-fit:contain;

  border-radius:12px;

  background:#f3ece3;
}


/* ==========================================================
   MOBILE HEADER
   ========================================================== */

@media(max-width:900px) {

  .site-header-premium {
    width:
      calc(100% - 20px);

    height:74px;

    padding:
      0 13px;

    top:8px;
  }


  .premium-ag {
    width:48px;
    height:48px;

    flex-basis:48px;
  }


  .premium-ag-a,
  .premium-ag-g {
    font-size:21px;
  }


  .premium-ag-a {
    left:8px;
  }


  .premium-ag-g {
    left:22px;
  }


  .premium-brand-copy strong {
    font-size:8px;
  }


  .premium-brand-copy small {
    display:none;
  }


  .premium-nav {
    align-items:stretch;
  }


  .header-logout-form {
    width:100%;
  }


  .header-logout {
    width:100%;

    min-height:43px;
  }

}


/* ==========================================================
   AG HEADER V2
   Quiet Luxury / Editorial Wellness
   ========================================================== */


/* ----------------------------------------------------------
   Основной контейнер
   ---------------------------------------------------------- */

.site-header.site-header-premium {
  width:
    min(1440px, calc(100% - 44px)) !important;

  height:
    84px !important;

  margin:
    15px auto 0 !important;

  padding:
    0 14px 0 18px !important;

  position:
    sticky !important;

  top:
    12px !important;

  z-index:
    1000 !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(255px, 1fr)
    auto
    minmax(255px, 1fr) !important;

  align-items:
    center !important;

  gap:
    22px !important;

  border:
    1px solid
    rgba(137, 102, 61, .11) !important;

  border-radius:
    22px !important;

  background:
    linear-gradient(
      115deg,
      rgba(255, 253, 249, .92),
      rgba(250, 245, 237, .86)
    ) !important;

  box-shadow:
    0 12px 36px
    rgba(75, 55, 34, .055),
    0 1px 0
    rgba(255, 255, 255, .90)
    inset !important;

  backdrop-filter:
    blur(18px)
    saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(125%) !important;
}


/*
 * Тонкая золотая линия сверху.
 * Визуально делает header более дорогим,
 * но не превращает его в "золотой" интерфейс.
 */
.site-header.site-header-premium::before {
  content:
    "";

  position:
    absolute;

  left:
    36px;

  right:
    36px;

  top:
    -1px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(190, 143, 78, .38),
      rgba(220, 184, 130, .62),
      rgba(190, 143, 78, .38),
      transparent
    );

  pointer-events:
    none;
}


/* ----------------------------------------------------------
   BRAND
   ---------------------------------------------------------- */

.premium-brand {
  min-width:
    0;

  display:
    flex !important;

  align-items:
    center !important;

  justify-self:
    start;

  gap:
    13px !important;

  color:
    inherit;

  text-decoration:
    none !important;
}


/* Монограмма */

.premium-ag {
  width:
    52px !important;

  height:
    52px !important;

  flex:
    0 0 52px !important;

  position:
    relative !important;

  overflow:
    hidden;

  border:
    1px solid
    rgba(171, 124, 64, .34) !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle at 32% 27%,
      #fffefb 0%,
      #faf4eb 50%,
      #efe1ce 100%
    ) !important;

  box-shadow:
    0 8px 24px
    rgba(128, 89, 44, .09),
    0 0 0 5px
    rgba(255, 255, 255, .34) !important;

  transition:
    transform .35s
    cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease !important;
}


.premium-brand:hover .premium-ag {
  transform:
    translateY(-1px)
    rotate(-3deg);

  box-shadow:
    0 11px 28px
    rgba(128, 89, 44, .14),
    0 0 0 5px
    rgba(255, 255, 255, .48) !important;
}


.premium-ag::before {
  content:
    "";

  position:
    absolute;

  inset:
    5px;

  border:
    1px solid
    rgba(183, 132, 66, .18);

  border-radius:
    50%;
}


.premium-ag::after {
  content:
    "";

  position:
    absolute;

  width:
    12px;

  height:
    12px;

  top:
    4px;

  right:
    4px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(209, 169, 111, .30),
      transparent 68%
    );
}


/* Буквы AG */

.premium-ag-a,
.premium-ag-g {
  position:
    absolute !important;

  top:
    50% !important;

  z-index:
    2 !important;

  transform:
    translateY(-50%) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    23px !important;

  font-weight:
    400 !important;

  line-height:
    1 !important;

  letter-spacing:
    -.08em !important;

  color:
    #98652b !important;
}


.premium-ag-a {
  left:
    8px !important;
}


.premium-ag-g {
  left:
    24px !important;

  color:
    #b68243 !important;
}


/* Название */

.premium-brand-copy {
  min-width:
    0;

  display:
    block;
}


.premium-brand-copy strong {
  display:
    block !important;

  margin:
    0 !important;

  color:
    #40372f !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    .22em !important;

  white-space:
    nowrap;
}


.premium-brand-copy small {
  display:
    block !important;

  margin-top:
    5px !important;

  color:
    #9d8161 !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    10px !important;

  font-style:
    italic !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .015em !important;

  white-space:
    nowrap;
}


/* ----------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------- */

.site-header-premium .premium-nav {
  grid-column:
    2 / 4;

  justify-self:
    end;

  min-width:
    0;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    3px !important;
}


/* Базовые ссылки */

.site-header-premium
.premium-nav > a {
  position:
    relative;

  min-height:
    42px;

  padding:
    0 13px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    transparent !important;

  border-radius:
    11px !important;

  color:
    #6d6258 !important;

  background:
    transparent !important;

  font-size:
    10px !important;

  font-weight:
    500 !important;

  letter-spacing:
    .025em !important;

  line-height:
    1 !important;

  white-space:
    nowrap;

  text-decoration:
    none !important;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease !important;
}


.site-header-premium
.premium-nav > a:hover {
  color:
    #875a29 !important;

  border-color:
    rgba(164, 115, 57, .10) !important;

  background:
    rgba(238, 224, 204, .42) !important;

  transform:
    translateY(-1px);
}


/* Маленькая точка под обычной ссылкой */

.site-header-premium
.premium-nav > a:not(.header-account-link):not(.header-login):not(.header-admin-link)::after {
  content:
    "";

  width:
    3px;

  height:
    3px;

  position:
    absolute;

  left:
    50%;

  bottom:
    5px;

  border-radius:
    50%;

  background:
    #b37b38;

  opacity:
    0;

  transform:
    translateX(-50%)
    scale(.4);

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.site-header-premium
.premium-nav > a:not(.header-account-link):not(.header-login):not(.header-admin-link):hover::after {
  opacity:
    .7;

  transform:
    translateX(-50%)
    scale(1);
}


/* ----------------------------------------------------------
   ADMIN LINK
   ---------------------------------------------------------- */

.site-header-premium
.header-admin-link {
  margin-left:
    5px;

  color:
    #9a6c35 !important;

  border-color:
    rgba(174, 126, 66, .11) !important;

  background:
    rgba(246, 237, 224, .48) !important;
}


.site-header-premium
.header-admin-link:hover {
  border-color:
    rgba(174, 126, 66, .22) !important;

  background:
    #f2e5d3 !important;
}


/* ----------------------------------------------------------
   ACCOUNT
   ---------------------------------------------------------- */

.site-header-premium
.header-account-link {
  min-height:
    43px !important;

  margin-left:
    7px !important;

  padding:
    0 15px !important;

  gap:
    8px !important;

  border:
    1px solid
    rgba(147, 106, 56, .13) !important;

  border-radius:
    12px !important;

  color:
    #584b3e !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.68),
      rgba(245,235,221,.58)
    ) !important;

  box-shadow:
    0 5px 16px
    rgba(97, 68, 36, .035) !important;
}


.site-header-premium
.header-account-link:hover {
  border-color:
    rgba(154, 109, 54, .22) !important;

  color:
    #815827 !important;

  background:
    linear-gradient(
      145deg,
      #fffdf9,
      #f2e5d3
    ) !important;

  box-shadow:
    0 7px 19px
    rgba(97, 68, 36, .07) !important;
}


.site-header-premium
.header-user-dot {
  width:
    6px !important;

  height:
    6px !important;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    #aa7433 !important;

  box-shadow:
    0 0 0 4px
    rgba(173, 119, 51, .09) !important;
}


/* ----------------------------------------------------------
   LOGOUT
   ---------------------------------------------------------- */

.site-header-premium
.header-logout-form {
  margin:
    0 0 0 3px !important;

  padding:
    0 !important;
}


.site-header-premium
.header-logout {
  width:
    auto !important;

  min-width:
    73px !important;

  min-height:
    42px !important;

  padding:
    0 15px !important;

  border:
    1px solid
    rgba(120, 93, 65, .10) !important;

  border-radius:
    11px !important;

  cursor:
    pointer;

  color:
    #827367 !important;

  background:
    rgba(255, 253, 249, .42) !important;

  box-shadow:
    none !important;

  font-family:
    inherit;

  font-size:
    10px !important;

  font-weight:
    500 !important;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease !important;
}


.site-header-premium
.header-logout:hover {
  color:
    #8e583f !important;

  border-color:
    rgba(151, 92, 66, .15) !important;

  background:
    rgba(245, 231, 222, .66) !important;

  transform:
    translateY(-1px);
}


/* ----------------------------------------------------------
   LOGIN BUTTON
   ---------------------------------------------------------- */

.site-header-premium
.header-login {
  min-width:
    91px !important;

  min-height:
    43px !important;

  margin-left:
    8px;

  padding:
    0 20px !important;

  border:
    1px solid
    rgba(142, 94, 39, .18) !important;

  border-radius:
    12px !important;

  color:
    #fffaf2 !important;

  background:
    linear-gradient(
      105deg,
      #8c5d28 0%,
      #ad7938 50%,
      #bf8d4d 100%
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(151, 103, 45, .14) !important;

  font-weight:
    600 !important;
}


.site-header-premium
.header-login:hover {
  color:
    white !important;

  border-color:
    rgba(141, 94, 39, .25) !important;

  background:
    linear-gradient(
      105deg,
      #805221,
      #a66f30,
      #b98241
    ) !important;

  box-shadow:
    0 11px 26px
    rgba(151, 103, 45, .19) !important;
}


/* ----------------------------------------------------------
   HEADER SCROLL SPACING
   ---------------------------------------------------------- */

body {
  scroll-padding-top:
    118px;
}


section[id] {
  scroll-margin-top:
    115px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media
(max-width:1180px) {

  .site-header.site-header-premium {
    width:
      calc(100% - 28px) !important;

    grid-template-columns:
      auto 1fr !important;

    gap:
      15px !important;

    padding:
      0 12px 0 15px !important;
  }


  .site-header-premium
  .premium-nav {
    grid-column:
      auto;

    justify-self:
      end;
  }


  .site-header-premium
  .premium-nav > a {
    padding:
      0 9px !important;
  }


  .premium-brand-copy small {
    display:
      none !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media
(max-width:900px) {

  .site-header.site-header-premium {
    width:
      calc(100% - 18px) !important;

    height:
      70px !important;

    margin-top:
      8px !important;

    padding:
      0 11px 0 13px !important;

    top:
      7px !important;

    display:
      flex !important;

    justify-content:
      space-between !important;

    border-radius:
      19px !important;
  }


  .site-header.site-header-premium::before {
    left:
      25px;

    right:
      25px;
  }


  .premium-ag {
    width:
      45px !important;

    height:
      45px !important;

    flex-basis:
      45px !important;
  }


  .premium-ag-a,
  .premium-ag-g {
    font-size:
      20px !important;
  }


  .premium-ag-a {
    left:
      7px !important;
  }


  .premium-ag-g {
    left:
      21px !important;
  }


  .premium-brand-copy strong {
    font-size:
      8px !important;

    letter-spacing:
      .17em !important;
  }


  .premium-brand-copy small {
    display:
      none !important;
  }


  .site-header-premium
  .mobile-menu-button {
    width:
      44px;

    height:
      44px;

    padding:
      0;

    display:
      flex;

    flex-direction:
      column;

    justify-content:
      center;

    align-items:
      center;

    gap:
      6px;

    border:
      1px solid
      rgba(158, 112, 56, .13);

    border-radius:
      13px;

    background:
      rgba(255,255,255,.52);
  }


  .site-header-premium
  .mobile-menu-button span {
    width:
      17px;

    height:
      1px;

    background:
      #806c58;
  }


  .site-header-premium
  .premium-nav {
    position:
      absolute;

    top:
      calc(100% + 8px);

    left:
      0;

    right:
      0;

    padding:
      12px !important;

    display:
      none !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      5px !important;

    border:
      1px solid
      rgba(157, 113, 58, .12);

    border-radius:
      18px;

    background:
      rgba(255, 252, 247, .97);

    box-shadow:
      0 20px 45px
      rgba(77, 56, 33, .10);

    backdrop-filter:
      blur(20px);
  }


  /*
   * Поддерживает наиболее распространённые классы,
   * которые уже мог использовать текущий app.js
   * при открытии мобильного меню.
   */
  .site-header-premium
  .premium-nav.open,

  .site-header-premium
  .premium-nav.active,

  .site-header-premium
  .premium-nav.is-open,

  .site-header-premium
  .premium-nav[data-open="true"] {
    display:
      flex !important;
  }


  .site-header-premium
  .premium-nav > a {
    width:
      100% !important;

    min-height:
      45px !important;

    padding:
      0 14px !important;

    justify-content:
      flex-start !important;

    border-radius:
      11px !important;
  }


  .site-header-premium
  .header-account-link,

  .site-header-premium
  .header-admin-link,

  .site-header-premium
  .header-login {
    margin-left:
      0 !important;
  }


  .site-header-premium
  .header-logout-form {
    width:
      100% !important;

    margin:
      0 !important;
  }


  .site-header-premium
  .header-logout {
    width:
      100% !important;

    min-height:
      45px !important;

    padding:
      0 14px !important;

    text-align:
      left !important;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media
(max-width:420px) {

  .premium-brand {
    gap:
      9px !important;
  }


  .premium-brand-copy strong {
    max-width:
      145px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }

}



/* ==========================================================
   AG VISUAL SYSTEM V3
   editorial / depth / calm psychology
   ========================================================== */


/* ----------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------- */

html {
  scroll-behavior:smooth;
}

body {
  position:relative;
  isolation:isolate;

  color:#3f3933 !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif !important;

  font-size:16px;

  line-height:1.7;

  letter-spacing:-.006em;

  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(219,190,151,.22),
      transparent 31%
    ),
    radial-gradient(
      circle at 86% 23%,
      rgba(207,177,144,.17),
      transparent 29%
    ),
    radial-gradient(
      circle at 57% 75%,
      rgba(225,204,177,.16),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #faf7f2 0%,
      #f6f0e8 52%,
      #faf7f2 100%
    ) !important;
}


/* Основной слой глубины */

body::before {
  content:"";

  position:fixed;

  inset:-14vh -12vw;

  z-index:-3;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 18% 28%,
      rgba(180,135,83,.12) 0%,
      rgba(180,135,83,.055) 18%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 82% 38%,
      rgba(166,139,119,.10) 0%,
      rgba(166,139,119,.04) 20%,
      transparent 46%
    ),
    radial-gradient(
      ellipse at 50% 82%,
      rgba(196,158,106,.08),
      transparent 44%
    );

  filter:blur(18px);

  transform:
    translateZ(0)
    scale(1.04);
}


/*
 * Тонкая перспективная структура.
 * Очень слабая, чтобы фон не выглядел
 * как sci-fi сетка.
 */

body::after {
  content:"";

  position:fixed;

  width:130vw;
  height:85vh;

  left:-15vw;
  bottom:-44vh;

  z-index:-2;

  pointer-events:none;

  opacity:.16;

  background-image:
    linear-gradient(
      rgba(145,108,70,.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(145,108,70,.10) 1px,
      transparent 1px
    );

  background-size:
    62px 62px;

  transform:
    perspective(700px)
    rotateX(67deg)
    scale(1.22);

  transform-origin:
    center bottom;

  mask-image:
    linear-gradient(
      to top,
      rgba(0,0,0,.65),
      transparent 78%
    );

  -webkit-mask-image:
    linear-gradient(
      to top,
      rgba(0,0,0,.65),
      transparent 78%
    );
}


/* Существующие ambient-слои превращаем в объёмные */

.ambient {
  position:fixed !important;

  pointer-events:none !important;

  z-index:-1 !important;

  border-radius:50% !important;

  filter:
    blur(70px) !important;

  opacity:.28 !important;

  transform:
    translate3d(0,0,0);

  will-change:transform;
}


.ambient-a {
  width:420px !important;
  height:420px !important;

  left:-140px !important;
  top:17vh !important;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(220,185,136,.72),
      rgba(191,150,99,.28) 44%,
      transparent 72%
    ) !important;
}


.ambient-b {
  width:520px !important;
  height:520px !important;

  right:-190px !important;
  top:52vh !important;

  background:
    radial-gradient(
      circle at 38% 33%,
      rgba(214,188,163,.62),
      rgba(174,137,105,.21) 48%,
      transparent 74%
    ) !important;
}


/* ----------------------------------------------------------
   READABILITY
   ---------------------------------------------------------- */

h1,
h2,
h3,
.hero h1,
.section-heading h2,
.about-grid h2,
.news-card h2,
.closing-section h2,
.auth-intro h1,
.admin-top h1,
.admin-section h2 {
  font-family:
    ui-serif,
    Georgia,
    "Times New Roman",
    serif !important;

  color:#312b26 !important;

  font-weight:400 !important;

  letter-spacing:-.035em !important;

  text-wrap:balance;
}


.hero h1 {
  max-width:900px;

  line-height:.96 !important;

  letter-spacing:-.047em !important;
}


.hero p,
.about-grid p,
.section-heading p,
.game-card p,
.news-card p,
.closing-section p {
  color:#706860 !important;

  line-height:1.78 !important;
}


.game-card h3 {
  color:#38312b !important;

  line-height:1.08 !important;

  letter-spacing:-.025em !important;
}


.section-kicker,
.eyebrow,
.game-type,
.admin-course-type {
  letter-spacing:.15em !important;

  font-weight:650 !important;
}


/* Добавляем чуть больше визуального разделения */

section {
  position:relative;
}


.hero,
.about-section,
.games-section,
.calendar-section,
.news-section,
.closing-section {
  z-index:1;
}


/* Стеклянность карточек делаем менее плоской */

.game-card,
.auth-card,
.legal-card,
.admin-section,
.account-empty {
  border-color:
    rgba(149,109,65,.13) !important;

  box-shadow:
    0 20px 65px
    rgba(82,60,37,.055),
    inset 0 1px 0
    rgba(255,255,255,.68) !important;

  backdrop-filter:
    blur(12px);
}


/* ----------------------------------------------------------
   HEADER — QUIETER
   ---------------------------------------------------------- */

.site-header.site-header-premium {
  transition:
    transform .52s
    cubic-bezier(.22,.7,.18,1),
    opacity .38s ease,
    box-shadow .3s ease !important;

  will-change:
    transform,
    opacity;
}


/*
 * Шапка полностью уходит вверх при начале прокрутки.
 */

.site-header.site-header-premium.header-hidden {
  transform:
    translate3d(
      0,
      calc(-100% - 30px),
      0
    ) !important;

  opacity:0 !important;

  pointer-events:none !important;
}


/* На самом верху она чуть менее тяжёлая */

.site-header.site-header-premium:not(.header-hidden) {
  opacity:1;
}


/* ----------------------------------------------------------
   SCROLL TO TOP
   ---------------------------------------------------------- */

.scroll-top-button {
  width:54px;
  height:54px;

  position:fixed;

  right:28px;
  bottom:28px;

  z-index:900;

  padding:0;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(157,112,57,.20);

  border-radius:50%;

  cursor:pointer;

  color:#7e572d;

  background:
    linear-gradient(
      145deg,
      rgba(255,253,249,.96),
      rgba(239,226,208,.94)
    );

  box-shadow:
    0 13px 38px
    rgba(94,67,38,.13),
    inset 0 1px 0
    rgba(255,255,255,.85);

  backdrop-filter:
    blur(15px);

  opacity:0;

  visibility:hidden;

  transform:
    translateY(14px)
    scale(.92);

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .3s
    cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease,
    background .25s ease;
}


.scroll-top-button.is-visible {
  opacity:1;

  visibility:visible;

  transform:
    translateY(0)
    scale(1);
}


.scroll-top-button:hover {
  transform:
    translateY(-3px)
    scale(1.025);

  background:
    linear-gradient(
      145deg,
      #fffdfa,
      #ead8be
    );

  box-shadow:
    0 17px 44px
    rgba(94,67,38,.17);
}


.scroll-top-button svg {
  width:20px;
  height:20px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.7;

  stroke-linecap:round;

  stroke-linejoin:round;
}


/* Тонкая декоративная окружность */

.scroll-top-button::before {
  content:"";

  position:absolute;

  inset:5px;

  border:
    1px solid
    rgba(170,122,61,.10);

  border-radius:50%;

  pointer-events:none;
}


/* ----------------------------------------------------------
   SECTION DEPTH
   ---------------------------------------------------------- */

.games-section::before,
.calendar-section::before,
.news-section::before {
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  z-index:-1;

  border-radius:50%;

  pointer-events:none;

  filter:blur(65px);

  opacity:.16;
}


.games-section::before {
  left:-180px;
  top:12%;

  background:
    radial-gradient(
      circle,
      #d9b98c,
      transparent 68%
    );
}


.calendar-section::before {
  right:-190px;
  top:10%;

  background:
    radial-gradient(
      circle,
      #d5c0ad,
      transparent 68%
    );
}


.news-section::before {
  left:28%;
  bottom:-200px;

  background:
    radial-gradient(
      circle,
      #d6b98f,
      transparent 70%
    );
}


/* ----------------------------------------------------------
   HERO TYPOGRAPHY IMPROVEMENT
   ---------------------------------------------------------- */

.hero {
  padding-top:
    clamp(70px, 9vw, 130px) !important;
}


.hero .eyebrow {
  color:#a06e37 !important;

  font-size:10px !important;
}


.hero h1 {
  font-size:
    clamp(
      54px,
      7.3vw,
      108px
    ) !important;
}


.hero-copy,
.hero > div > p {
  max-width:680px;
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.button,
.lux-buy-button,
.account-choose-button,
.admin-button {
  letter-spacing:.01em;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}


.button:hover,
.lux-buy-button:hover,
.account-choose-button:hover,
.admin-button:hover {
  transform:
    translateY(-2px) !important;
}


/* ----------------------------------------------------------
   CALENDAR READABILITY
   ---------------------------------------------------------- */

.calendar-day {
  min-height:135px;

  background:
    rgba(255,253,249,.58) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.60);
}


.calendar-day strong,
.calendar-day .day-number {
  color:#3c342d;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:900px) {

  body {
    font-size:15px;
  }


  .hero h1 {
    font-size:
      clamp(
        44px,
        13vw,
        69px
      ) !important;
  }


  .scroll-top-button {
    width:49px;
    height:49px;

    right:17px;
    bottom:18px;
  }


  .ambient-a {
    width:300px !important;
    height:300px !important;

    left:-150px !important;
  }


  .ambient-b {
    width:330px !important;
    height:330px !important;

    right:-180px !important;
  }


  body::after {
    opacity:.10;

    background-size:
      44px 44px;
  }

}


@media(max-width:600px) {

  .hero {
    padding-top:
      55px !important;
  }


  .hero p,
  .game-card p,
  .about-grid p {
    line-height:
      1.68 !important;
  }


  body::before {
    opacity:.78;
  }

}



/* ==========================================================
   VISUAL SYSTEM V4
   porcelain / graphite / champagne / sage
   ========================================================== */

:root {
  --ag-bg: #f7f4ee;
  --ag-bg-soft: #fbf9f5;
  --ag-paper: rgba(255,253,249,.84);

  --ag-ink: #2e2a27;
  --ag-text: #514a44;
  --ag-muted: #81786f;

  --ag-gold: #b88745;
  --ag-gold-soft: #d5b37f;

  --ag-sage: #929b86;
  --ag-rose: #c5a39a;

  --ag-line: rgba(80,65,50,.11);
}


/* ==========================================================
   BODY / GLOBAL PALETTE
   ========================================================== */

html,
body {
  background:
    linear-gradient(
      145deg,
      #faf8f4 0%,
      #f5f0e9 46%,
      #faf7f2 100%
    ) !important;

  color:
    var(--ag-text) !important;
}


body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif !important;

  font-size:
    16px !important;

  line-height:
    1.72 !important;

  letter-spacing:
    -.008em !important;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
.hero h1,
.section-heading h2,
.news-card h2,
.admin-top h1,
.admin-section h2 {
  color:
    var(--ag-ink) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-weight:
    400 !important;

  letter-spacing:
    -.035em !important;
}


p {
  color:
    var(--ag-muted);
}


.section-kicker,
.eyebrow {
  color:
    #9b6a34 !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  letter-spacing:
    .17em !important;
}


/* ==========================================================
   HEADER — READABLE
   ========================================================== */

.site-header.site-header-premium {
  height:
    78px !important;

  background:
    rgba(252,250,246,.90) !important;

  border:
    1px solid
    rgba(92,73,53,.10) !important;

  box-shadow:
    0 12px 40px
    rgba(62,47,33,.065) !important;
}


.premium-brand-copy strong {
  color:
    #342e29 !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;

  letter-spacing:
    .14em !important;

  line-height:
    1.15 !important;
}


.premium-brand-copy small {
  margin-top:
    4px !important;

  color:
    #8b735d !important;

  font-size:
    11px !important;

  font-style:
    normal !important;

  letter-spacing:
    .01em !important;
}


.site-header-premium
.premium-nav > a {
  min-height:
    42px !important;

  padding:
    0 14px !important;

  color:
    #605851 !important;

  font-size:
    13px !important;

  font-weight:
    500 !important;

  letter-spacing:
    0 !important;
}


.site-header-premium
.premium-nav > a:hover {
  color:
    #8b622f !important;

  background:
    rgba(219,199,173,.26) !important;
}


.site-header-premium
.header-account-link {
  color:
    #463e37 !important;

  font-size:
    12px !important;

  background:
    rgba(255,255,255,.55) !important;
}


.site-header-premium
.header-logout {
  color:
    #75695e !important;

  font-size:
    12px !important;
}


/* ==========================================================
   3D DEPTH SCENE
   ========================================================== */

.ag-depth-scene {
  position:
    fixed;

  inset:
    0;

  z-index:
    -5;

  overflow:
    hidden;

  pointer-events:
    none;

  perspective:
    1100px;
}


.ag-depth-orb {
  position:
    absolute;

  border-radius:
    50%;

  transform-style:
    preserve-3d;

  will-change:
    transform;

  transition:
    transform .18s linear;
}


/* Большая левая сфера */

.ag-depth-orb.one {
  width:
    520px;

  height:
    520px;

  left:
    -170px;

  top:
    12vh;

  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(255,255,255,.90) 0%,
      rgba(220,192,154,.36) 24%,
      rgba(180,147,111,.15) 51%,
      rgba(150,120,91,.03) 70%,
      transparent 74%
    );

  box-shadow:
    inset -55px -60px 90px
    rgba(112,84,59,.12),
    inset 40px 35px 70px
    rgba(255,255,255,.46),
    0 80px 120px
    rgba(110,80,50,.08);

  filter:
    blur(.1px);
}


/* Правая верхняя сфера */

.ag-depth-orb.two {
  width:
    410px;

  height:
    410px;

  right:
    -120px;

  top:
    22vh;

  background:
    radial-gradient(
      circle at 31% 28%,
      rgba(255,255,255,.72),
      rgba(167,178,156,.25) 28%,
      rgba(123,137,116,.10) 58%,
      transparent 74%
    );

  box-shadow:
    inset -45px -50px 80px
    rgba(70,80,65,.09),
    inset 35px 30px 60px
    rgba(255,255,255,.36),
    0 70px 110px
    rgba(74,80,69,.06);
}


/* Нижняя сфера */

.ag-depth-orb.three {
  width:
    600px;

  height:
    600px;

  left:
    38%;

  bottom:
    -390px;

  background:
    radial-gradient(
      circle at 40% 26%,
      rgba(255,255,255,.58),
      rgba(207,170,153,.20) 28%,
      rgba(171,129,117,.07) 60%,
      transparent 74%
    );

  box-shadow:
    inset -50px -60px 100px
    rgba(118,81,73,.08),
    0 50px 130px
    rgba(100,72,61,.05);
}


/* Световой слой */

.ag-depth-light {
  position:
    absolute;

  width:
    64vw;

  height:
    64vw;

  left:
    18vw;

  top:
    -42vw;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.72),
      rgba(232,218,197,.12) 42%,
      transparent 70%
    );

  filter:
    blur(35px);
}


/* Слабая перспективная поверхность */

.ag-depth-plane {
  position:
    absolute;

  width:
    120vw;

  height:
    70vh;

  left:
    -10vw;

  bottom:
    -46vh;

  opacity:
    .22;

  background-image:
    linear-gradient(
      rgba(120,100,80,.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(120,100,80,.07) 1px,
      transparent 1px
    );

  background-size:
    74px 74px;

  transform:
    rotateX(66deg);

  transform-origin:
    center top;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0,0,0,.65)
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0,0,0,.65)
    );
}


/* ==========================================================
   CARDS
   ========================================================== */

.game-card,
.admin-section,
.account-empty,
.auth-card,
.calendar-day {
  background:
    rgba(255,253,249,.76) !important;

  border-color:
    rgba(94,73,51,.11) !important;

  box-shadow:
    0 20px 65px
    rgba(65,49,34,.055),
    inset 0 1px 0
    rgba(255,255,255,.88) !important;
}


/* ==========================================================
   NEWS — COMPLETE REDESIGN
   ========================================================== */

.news-section {
  padding-top:
    clamp(60px,8vw,120px) !important;

  padding-bottom:
    clamp(70px,9vw,130px) !important;
}


.news-card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    520px;

  padding:
    clamp(32px,4vw,64px) !important;

  border:
    1px solid
    rgba(255,255,255,.08) !important;

  border-radius:
    34px !important;

  background:
    linear-gradient(
      135deg,
      #2b2a2b 0%,
      #33302e 46%,
      #252526 100%
    ) !important;

  box-shadow:
    0 36px 90px
    rgba(40,32,26,.18),
    inset 0 1px 0
    rgba(255,255,255,.06) !important;
}


/* Шампанское свечение */

.news-card::before {
  content:
    "";

  position:
    absolute;

  width:
    520px;

  height:
    520px;

  left:
    -210px;

  top:
    -240px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(204,160,99,.20),
      transparent 70%
    );

  pointer-events:
    none;
}


.news-card::after {
  content:
    "";

  position:
    absolute;

  width:
    370px;

  height:
    370px;

  right:
    20%;

  bottom:
    -260px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(135,151,129,.12),
      transparent 70%
    );

  pointer-events:
    none;
}


.news-card > * {
  position:
    relative;

  z-index:
    2;
}


.news-card .section-kicker,
.news-card .eyebrow {
  color:
    #d2aa70 !important;
}


.news-card h2 {
  color:
    #fbf7f0 !important;

  font-size:
    clamp(42px,5vw,75px) !important;

  line-height:
    .98 !important;

  letter-spacing:
    -.04em !important;
}


.news-card p {
  max-width:
    600px;

  color:
    rgba(244,237,228,.68) !important;

  font-size:
    16px !important;

  line-height:
    1.75 !important;
}


/* Фото */

.news-image {
  padding:
    10px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    28px;

  background:
    rgba(255,255,255,.035);

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.28);
}


.news-image img {
  width:
    100% !important;

  height:
    100% !important;

  min-height:
    390px;

  max-height:
    500px;

  object-fit:
    cover !important;

  border-radius:
    20px !important;
}


/* ==========================================================
   CALENDAR
   ========================================================== */

.calendar-day {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.calendar-day:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(174,127,68,.20) !important;

  box-shadow:
    0 18px 42px
    rgba(80,57,34,.08) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:900px) {

  .premium-brand-copy strong {
    font-size:
      10px !important;

    letter-spacing:
      .11em !important;
  }


  .site-header-premium
  .premium-nav > a {
    font-size:
      13px !important;
  }


  .news-card {
    min-height:
      auto;

    padding:
      28px !important;
  }


  .news-card h2 {
    font-size:
      clamp(38px,11vw,58px) !important;
  }


  .news-image img {
    min-height:
      280px;
  }


  .ag-depth-orb.one {
    width:
      330px;

    height:
      330px;

    left:
      -180px;
  }


  .ag-depth-orb.two {
    width:
      290px;

    height:
      290px;

    right:
      -170px;
  }


  .ag-depth-orb.three {
    width:
      400px;

    height:
      400px;
  }

}


/* ==========================================================
   REMOVE OLD 3D ORBS
   ========================================================== */

.ag-depth-orb,
.ambient-a,
.ambient-b {
  display:none !important;
}


/* ==========================================================
   COURSE EDITOR
   ========================================================== */

.admin-course-management {
  display:flex;
  flex-direction:column;
  gap:16px;
}


.admin-edit-course {
  overflow:hidden;

  border:
    1px solid
    rgba(91,71,51,.11);

  border-radius:22px;

  background:
    rgba(255,253,249,.80);

  box-shadow:
    0 14px 42px
    rgba(66,48,31,.045);
}


.admin-edit-course.is-disabled {
  opacity:.62;
}


.admin-edit-course-head {
  padding:21px 23px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}


.admin-edit-course-title {
  display:flex;
  align-items:flex-start;
  gap:13px;

  min-width:0;
}


.admin-course-heading-line {
  display:flex;
  align-items:center;
  gap:10px;
}


.admin-course-heading-line h3 {
  margin:0;

  color:#332e29;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:22px;
  font-weight:400;
}


.admin-course-meta {
  display:block;

  margin-top:5px;

  color:#93887d;

  font-size:10px;
}


.admin-course-summary {
  display:grid;

  grid-template-columns:
    repeat(3,minmax(85px,1fr));

  gap:8px;
}


.admin-course-summary > div {
  min-width:90px;

  padding:9px 13px;

  border:
    1px solid
    rgba(103,80,56,.08);

  border-radius:11px;

  background:
    rgba(248,243,236,.68);
}


.admin-course-summary small {
  display:block;

  color:#988d82;

  font-size:8px;

  text-transform:uppercase;
}


.admin-course-summary strong {
  display:block;

  margin-top:3px;

  color:#494039;

  font-size:12px;
}


.admin-course-details {
  border-top:
    1px solid
    rgba(100,78,54,.09);
}


.admin-course-details > summary {
  min-height:50px;

  padding:0 23px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  cursor:pointer;

  list-style:none;

  color:#8d673d;

  font-size:11px;
  font-weight:600;
}


.admin-course-details > summary::-webkit-details-marker {
  display:none;
}


.admin-details-arrow {
  transition:transform .2s ease;
}


.admin-course-details[open]
.admin-details-arrow {
  transform:rotate(180deg);
}


.admin-course-edit-form {
  padding:23px;

  border-top:
    1px solid
    rgba(100,78,54,.07);

  background:
    rgba(250,247,242,.62);
}


.admin-course-edit-grid {
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:13px;
}


.admin-course-edit-grid label > span,
.admin-course-description > span {
  display:block;

  margin-bottom:6px;

  color:#8e8379;

  font-size:9px;
  font-weight:600;

  text-transform:uppercase;
}


.admin-course-edit-grid input,
.admin-course-edit-grid select,
.admin-course-description textarea {
  width:100%;

  min-height:44px;

  padding:0 12px;

  border:
    1px solid
    rgba(151,110,59,.14);

  border-radius:11px;

  outline:none;

  color:#493f36;

  background:#fffdfa;

  font:inherit;
  font-size:11px;
}


.admin-course-description {
  display:block;

  margin-top:13px;
}


.admin-course-description textarea {
  min-height:120px;

  padding:12px;

  resize:vertical;
}


.admin-course-edit-bottom {
  margin-top:15px;

  padding-top:15px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  border-top:
    1px solid
    rgba(100,78,54,.08);
}


.admin-course-delete {
  padding:
    0 23px 18px;

  background:
    rgba(250,247,242,.62);
}


@media(max-width:1200px) {

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

}


@media(max-width:760px) {

  .admin-edit-course-head {
    flex-direction:column;
    align-items:flex-start;
  }


  .admin-course-summary {
    width:100%;
  }


  .admin-course-edit-grid {
    grid-template-columns:1fr;
  }


  .admin-course-edit-bottom {
    flex-direction:column;
    align-items:stretch;
  }

}


/* ==========================================================
   PREMIUM GAMES SCENE V5
   architectural depth / ivory / champagne
   ========================================================== */

:root {
  --scene-bg-1:#f7f1e8;
  --scene-bg-2:#f1e6d7;
  --scene-bg-3:#fbf8f3;

  --scene-ink:#302a25;
  --scene-text:#6f655c;
  --scene-muted:#9a8d80;

  --scene-gold:#b97921;
  --scene-gold-2:#d39b44;
  --scene-line:rgba(123,91,57,.13);

  --scene-card:rgba(255,252,247,.90);
}


/* ==========================================================
   GAMES SECTION
   ========================================================== */

.games-section {
  position:relative;

  overflow:hidden;

  padding:
    clamp(90px,9vw,150px)
    24px
    clamp(110px,11vw,170px) !important;

  isolation:isolate;

  background:
    radial-gradient(
      circle at 50% 9%,
      rgba(255,255,255,.88),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      var(--scene-bg-1) 0%,
      var(--scene-bg-2) 48%,
      var(--scene-bg-3) 100%
    );
}


.games-section::before {
  content:"";

  position:absolute;

  inset:0;

  z-index:-5;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.38),
      transparent 32%,
      rgba(188,145,91,.05) 56%,
      transparent 76%
    );
}


/* ==========================================================
   ARCHITECTURAL DEPTH BACKGROUND
   ========================================================== */

.games-section .depth-architecture {
  position:absolute;

  inset:0;

  z-index:-4;

  pointer-events:none;

  perspective:1200px;
}


/* left giant arch */

.games-section .depth-arch-left {
  position:absolute;

  width:560px;
  height:560px;

  left:-270px;
  top:150px;

  border:
    1px solid
    rgba(182,132,67,.22);

  border-radius:50%;

  box-shadow:
    inset -55px -40px 85px
    rgba(130,96,62,.08),
    inset 35px 30px 75px
    rgba(255,255,255,.55),
    18px 35px 80px
    rgba(111,79,48,.07);

  background:
    radial-gradient(
      circle at 32% 30%,
      rgba(255,255,255,.84),
      rgba(236,221,201,.55) 42%,
      rgba(214,190,160,.24) 67%,
      transparent 72%
    );

  transform:
    translateZ(40px);
}


.games-section .depth-arch-left::after {
  content:"";

  position:absolute;

  inset:34px;

  border:
    1px solid
    rgba(188,139,76,.25);

  border-radius:50%;
}


/* right giant arch */

.games-section .depth-arch-right {
  position:absolute;

  width:650px;
  height:650px;

  right:-330px;
  top:205px;

  border:
    1px solid
    rgba(183,135,74,.18);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 42% 28%,
      rgba(255,255,255,.72),
      rgba(232,215,195,.38) 38%,
      rgba(204,178,148,.16) 66%,
      transparent 72%
    );

  box-shadow:
    inset 45px 35px 90px
    rgba(255,255,255,.40),
    inset -65px -55px 100px
    rgba(111,82,55,.07);

  transform:
    translateZ(20px);
}


.games-section .depth-arch-right::before {
  content:"";

  position:absolute;

  inset:52px;

  border:
    1px solid
    rgba(184,135,70,.22);

  border-radius:50%;
}


/* bottom platform */

.games-section .depth-platform {
  position:absolute;

  width:980px;
  height:230px;

  left:50%;
  bottom:-120px;

  transform:
    translateX(-50%)
    perspective(900px)
    rotateX(66deg);

  transform-origin:center top;

  border:
    1px solid
    rgba(178,127,64,.22);

  border-radius:50%;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.64),
      rgba(224,205,180,.35)
    );

  box-shadow:
    0 -30px 70px
    rgba(255,255,255,.22),
    0 35px 100px
    rgba(117,84,49,.10),
    inset 0 0 50px
    rgba(167,119,62,.06);
}


.games-section .depth-platform::before,
.games-section .depth-platform::after {
  content:"";

  position:absolute;

  border-radius:50%;

  border:
    1px solid
    rgba(183,132,68,.20);
}


.games-section .depth-platform::before {
  inset:30px 80px;
}


.games-section .depth-platform::after {
  inset:62px 160px;
}


/* architectural side slabs */

.games-section .depth-slab-left,
.games-section .depth-slab-right {
  position:absolute;

  width:270px;
  height:130px;

  bottom:30px;

  border:
    1px solid
    rgba(135,102,69,.10);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.70),
      rgba(221,203,181,.55)
    );

  box-shadow:
    0 30px 70px
    rgba(99,70,42,.08);

  transform:
    perspective(700px)
    rotateX(63deg)
    rotateZ(-4deg);
}


.games-section .depth-slab-left {
  left:-80px;
}


.games-section .depth-slab-right {
  right:-90px;

  transform:
    perspective(700px)
    rotateX(63deg)
    rotateZ(5deg);
}


/* golden subtle accent cube */

.games-section .depth-cube {
  position:absolute;

  width:70px;
  height:70px;

  right:10%;

  top:145px;

  transform:
    rotateX(58deg)
    rotateZ(45deg);

  background:
    linear-gradient(
      145deg,
      #d2a35d,
      #9c682e
    );

  box-shadow:
    15px 18px 36px
    rgba(99,64,29,.15);

  opacity:.38;
}


/* ==========================================================
   SECTION HEADER
   ========================================================== */

.games-section .section-heading {
  width:
    min(1120px,100%);

  margin:
    0 auto 54px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    300px;

  align-items:end;

  gap:42px;
}


.games-section .section-heading h2 {
  max-width:760px;

  margin:0;

  color:var(--scene-ink) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(52px,5.7vw,84px) !important;

  font-weight:400 !important;

  line-height:.98 !important;

  letter-spacing:-.05em !important;
}


.games-section .section-heading p {
  margin:0;

  color:#746b63 !important;

  font-size:14px !important;

  line-height:1.7 !important;
}


.games-section .section-kicker {
  margin-bottom:14px;

  color:#a26a2c !important;

  font-size:10px !important;

  font-weight:700 !important;

  letter-spacing:.17em !important;
}


/* ==========================================================
   3 CARDS EXACTLY IN ONE ROW
   ========================================================== */

.games-grid {
  width:
    min(1120px,100%);

  margin:
    0 auto;

  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  justify-content:center !important;

  align-items:stretch;

  gap:22px !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.game-card {
  width:100% !important;

  min-width:0 !important;

  min-height:610px;

  padding:
    29px 27px 24px !important;

  display:flex;

  flex-direction:column;

  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(137,101,61,.13) !important;

  border-radius:
    24px !important;

  background:
    linear-gradient(
      150deg,
      rgba(255,253,249,.96),
      rgba(248,240,230,.93)
    ) !important;

  box-shadow:
    0 28px 60px
    rgba(72,52,33,.095),
    inset 0 1px 0
    rgba(255,255,255,.92) !important;

  backdrop-filter:
    blur(12px);

  transition:
    transform .28s cubic-bezier(.2,.75,.2,1),
    box-shadow .28s ease,
    border-color .28s ease;
}


.game-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(181,128,60,.26) !important;

  box-shadow:
    0 38px 80px
    rgba(72,52,33,.14),
    inset 0 1px 0
    rgba(255,255,255,.95) !important;
}


.game-card::before {
  content:"";

  position:absolute;

  width:190px;
  height:190px;

  right:-110px;
  top:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(211,161,93,.10),
      transparent 68%
    );

  pointer-events:none;
}


/* ==========================================================
   CARD HEADER
   ========================================================== */

.game-card-top {
  margin-bottom:25px;

  display:flex;

  align-items:center;

  justify-content:space-between;
}


.game-number {
  color:#80766d !important;

  font-size:10px !important;
}


.game-type {
  padding:
    7px 11px !important;

  border:
    1px solid
    rgba(183,129,58,.16) !important;

  border-radius:
    999px !important;

  color:#a36d2b !important;

  background:
    rgba(255,248,237,.76) !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;

  letter-spacing:
    .12em !important;
}


/* ==========================================================
   CARD TYPOGRAPHY
   ========================================================== */

.game-card h3 {
  margin:
    0 0 14px !important;

  color:
    #332d28 !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(27px,2vw,35px) !important;

  font-weight:
    400 !important;

  line-height:
    1.03 !important;

  letter-spacing:
    -.035em !important;
}


.game-card p {
  min-height:104px;

  margin:
    0 !important;

  color:
    #756c64 !important;

  font-size:
    13px !important;

  line-height:
    1.68 !important;
}


/* ==========================================================
   INFO ROW
   ========================================================== */

.game-details {
  margin-top:22px !important;

  padding:
    17px 0 !important;

  border-top:
    1px solid
    var(--scene-line) !important;

  border-bottom:
    1px solid
    var(--scene-line) !important;

  display:grid !important;

  grid-template-columns:
    1fr 1fr !important;

  gap:17px !important;
}


.game-details small,
.game-price small {
  display:block;

  color:
    #9b9086 !important;

  font-size:
    9px !important;
}


.game-details strong {
  display:block;

  margin-top:5px;

  color:
    #403831 !important;

  font-size:
    11px !important;
}


/* ==========================================================
   PRICE
   ========================================================== */

.game-price-row {
  padding:
    18px 0 !important;

  border-bottom:
    1px solid
    var(--scene-line) !important;
}


.game-price strong {
  display:block;

  margin-top:5px;

  color:
    #3d352f !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    25px !important;

  font-weight:
    400 !important;
}


/* ==========================================================
   BUY FORM
   ========================================================== */

.buy-form {
  margin-top:auto !important;

  padding-top:18px;
}


.buy-form label {
  display:block;

  margin-bottom:12px;
}


.buy-form label > span {
  margin-bottom:6px !important;

  color:#9a8e83 !important;

  font-size:8px !important;

  font-weight:600;

  letter-spacing:.08em !important;
}


.buy-form select,
.buy-form input {
  min-height:
    46px !important;

  border:
    1px solid
    rgba(170,120,56,.18) !important;

  border-radius:
    10px !important;

  background:
    rgba(255,255,255,.72) !important;

  color:
    #4e453e !important;

  font-size:
    11px !important;
}


.buy-form select:focus,
.buy-form input:focus {
  border-color:
    rgba(184,125,52,.48) !important;

  box-shadow:
    0 0 0 3px
    rgba(190,135,66,.07) !important;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.lux-buy-button {
  min-height:
    50px !important;

  margin-top:
    15px !important;

  padding:
    0 15px !important;

  border:
    0 !important;

  border-radius:
    11px !important;

  color:
    #fffaf2 !important;

  background:
    linear-gradient(
      100deg,
      #aa6d1c,
      #d19a43
    ) !important;

  box-shadow:
    0 13px 26px
    rgba(169,106,27,.18) !important;

  font-size:
    11px !important;

  font-weight:
    600 !important;
}


.lux-buy-button:hover {
  transform:
    translateY(-2px) !important;

  box-shadow:
    0 18px 34px
    rgba(169,106,27,.23) !important;
}


/* ==========================================================
   DECORATIVE CENTER LINE
   ========================================================== */

.games-grid::before {
  content:"";

  position:absolute;

  width:210px;
  height:1px;

  left:50%;
  top:-30px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(190,135,66,.55),
      transparent
    );
}


.games-grid {
  position:relative;
}


/* ==========================================================
   SMALL GOLD STAR
   ========================================================== */

.games-grid::after {
  content:"◆";

  position:absolute;

  left:50%;
  top:-39px;

  transform:
    translateX(-50%)
    rotate(45deg);

  color:
    #ce9542;

  font-size:
    9px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1100px) {

  .games-grid {
    width:
      min(920px,100%);

    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    gap:14px !important;
  }


  .game-card {
    padding:
      24px 20px 20px !important;
  }


  .game-card h3 {
    font-size:
      27px !important;
  }


  .games-section .section-heading {
    width:
      min(920px,100%);
  }

}


@media(max-width:860px) {

  .games-section .section-heading {
    grid-template-columns:
      1fr;

    gap:20px;
  }


  .games-grid {
    grid-template-columns:
      1fr !important;

    max-width:
      520px;
  }


  .game-card {
    min-height:
      auto;
  }


  .game-card p {
    min-height:
      auto;
  }


  .depth-cube,
  .depth-slab-left,
  .depth-slab-right {
    display:none;
  }

}


@media(max-width:560px) {

  .games-section {
    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }


  .games-section
  .section-heading h2 {
    font-size:
      clamp(43px,13vw,61px) !important;
  }


  .game-card {
    border-radius:
      20px !important;
  }

}


/* ==========================================================
   GLOBAL ARCHITECTURAL DEPTH V6
   applies to every page
   ========================================================== */

html {
  background:#f7f1e8;
}

body {
  position:relative;
  isolation:isolate;
  min-height:100vh;

  background:
    radial-gradient(
      ellipse at 50% -8%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.48) 27%,
      transparent 55%
    ),
    linear-gradient(
      138deg,
      #faf7f1 0%,
      #f4eadc 42%,
      #f8f2e9 72%,
      #fbf8f4 100%
    ) !important;
}


/*
 * Очень тонкая фактура вместо пустой заливки.
 */

body::before {
  content:"";

  position:fixed;
  inset:0;

  z-index:-10;

  pointer-events:none;

  opacity:.27;

  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(95,73,52,.016) 0px,
      rgba(95,73,52,.016) 1px,
      transparent 1px,
      transparent 6px
    );

  mix-blend-mode:multiply;
}


/*
 * Глобальная световая дымка.
 */

body::after {
  content:"";

  position:fixed;

  width:80vw;
  height:80vw;

  left:10vw;
  top:-60vw;

  z-index:-9;

  pointer-events:none;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.94),
      rgba(241,224,201,.12) 42%,
      transparent 70%
    );

  filter:blur(32px);
}


/* ----------------------------------------------------------
   GLOBAL 3D SCENE
   ---------------------------------------------------------- */

.global-depth-scene {
  position:fixed;

  inset:0;

  z-index:-8;

  overflow:hidden;

  pointer-events:none;

  perspective:1200px;

  transform-style:preserve-3d;
}


/* LEFT ARCH */

.global-depth-arch-left {
  position:absolute;

  width:640px;
  height:640px;

  left:-400px;
  top:8vh;

  border:
    1px solid
    rgba(177,127,66,.20);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 38% 31%,
      rgba(255,255,255,.58),
      rgba(232,215,193,.20) 48%,
      transparent 70%
    );

  box-shadow:
    inset -50px -45px 100px
    rgba(116,85,52,.055),
    inset 40px 35px 80px
    rgba(255,255,255,.36);

  transform:
    translateZ(35px);
}


.global-depth-arch-left::before,
.global-depth-arch-left::after {
  content:"";

  position:absolute;

  border-radius:50%;

  border:
    1px solid
    rgba(183,133,71,.17);
}


.global-depth-arch-left::before {
  inset:44px;
}


.global-depth-arch-left::after {
  inset:95px;
}


/* RIGHT ARCH */

.global-depth-arch-right {
  position:absolute;

  width:720px;
  height:720px;

  right:-480px;
  top:31vh;

  border:
    1px solid
    rgba(181,131,68,.18);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 38% 30%,
      rgba(255,255,255,.48),
      rgba(218,197,170,.16) 48%,
      transparent 72%
    );

  box-shadow:
    inset 45px 40px 90px
    rgba(255,255,255,.28),
    inset -65px -60px 110px
    rgba(95,71,48,.045);

  transform:
    translateZ(15px);
}


.global-depth-arch-right::before {
  content:"";

  position:absolute;

  inset:70px;

  border:
    1px solid
    rgba(182,130,65,.17);

  border-radius:50%;
}


/* HORIZONTAL FLOATING RING */

.global-depth-ring {
  position:absolute;

  width:660px;
  height:240px;

  left:50%;
  bottom:-135px;

  border:
    1px solid
    rgba(182,127,61,.19);

  border-radius:50%;

  transform:
    translateX(-50%)
    rotateX(68deg);

  transform-origin:center;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.28),
      rgba(221,199,172,.10)
    );

  box-shadow:
    0 25px 70px
    rgba(91,65,39,.06),
    inset 0 0 60px
    rgba(177,124,61,.045);
}


.global-depth-ring::before,
.global-depth-ring::after {
  content:"";

  position:absolute;

  border-radius:50%;

  border:
    1px solid
    rgba(186,133,67,.14);
}


.global-depth-ring::before {
  inset:25px 70px;
}


.global-depth-ring::after {
  inset:55px 145px;
}


/* SOFT RIBBON */

.global-depth-ribbon {
  position:absolute;

  width:720px;
  height:130px;

  right:-190px;
  bottom:18vh;

  border-radius:
    50% 10% 45% 20%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(224,204,180,.27),
      rgba(255,255,255,.55),
      rgba(207,178,145,.17),
      transparent
    );

  filter:blur(1px);

  transform:
    rotate(-13deg)
    skewX(-20deg)
    translateZ(30px);

  opacity:.72;
}


/* GOLD LINE */

.global-depth-gold-line {
  position:absolute;

  width:420px;
  height:1px;

  left:-80px;
  bottom:26vh;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(184,127,58,.65),
      rgba(216,170,102,.30),
      transparent
    );

  transform:
    rotate(-18deg);

  opacity:.65;
}


/* ----------------------------------------------------------
   MAKE PAGE PANELS FLOAT ABOVE BACKGROUND
   ---------------------------------------------------------- */

.site-header,
.hero,
.about-section,
.games-section,
.calendar-section,
.news-section,
.closing-section,
.account-page,
.admin-shell,
.legal-page,
.auth-shell {
  position:relative;
  z-index:1;
}


/*
 * Убираем отдельный фон games-section.
 * Теперь секция является частью общей сцены.
 */

.games-section {
  background:transparent !important;
}


/*
 * Старую локальную архитектуру раздела курсов скрываем,
 * чтобы не было двойного рисунка.
 */

.depth-architecture {
  display:none !important;
}


/* ==========================================================
   GLOBAL TYPOGRAPHY REFINEMENT
   ========================================================== */

body {
  color:#4f4740 !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size:16px !important;

  line-height:1.68 !important;
}


h1,
h2,
h3,
h4,
.hero h1,
.section-heading h2,
.news-card h2,
.admin-top h1,
.admin-section h2,
.account-page h1,
.account-page h2 {
  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    "Book Antiqua",
    Georgia,
    "Times New Roman",
    serif !important;

  color:#302a25 !important;

  font-weight:400 !important;

  letter-spacing:-.038em !important;
}


.hero h1,
.games-section .section-heading h2 {
  letter-spacing:-.052em !important;
}


p,
.game-card p,
.news-card p,
.admin-section p {
  color:#756b62 !important;
}


input,
select,
textarea,
button {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
}


/* ==========================================================
   ADMIN CREATE COURSE GRID AFTER SLUG REMOVAL
   ========================================================== */

#courses .admin-create-grid,
#courses .admin-form-grid {
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    ) !important;
}


@media(max-width:900px) {

  .global-depth-arch-left {
    width:420px;
    height:420px;

    left:-300px;
  }


  .global-depth-arch-right {
    width:480px;
    height:480px;

    right:-350px;
  }


  .global-depth-ribbon {
    width:480px;

    right:-280px;
  }


  #courses .admin-create-grid,
  #courses .admin-form-grid {
    grid-template-columns:
      1fr !important;
  }

}


/* ==========================================================
   NEWS — READABILITY V7
   graphite / ivory / champagne
   ========================================================== */

.news-card {
  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.075) !important;

  background:
    linear-gradient(
      135deg,
      #272624 0%,
      #302d2a 46%,
      #242322 100%
    ) !important;

  box-shadow:
    0 34px 90px
    rgba(38,29,22,.20),
    inset 0 1px 0
    rgba(255,255,255,.055) !important;
}


/* более мягкое золото */

.news-card::before {
  opacity:.78 !important;

  background:
    radial-gradient(
      circle,
      rgba(202,153,89,.22),
      rgba(202,153,89,.07) 42%,
      transparent 72%
    ) !important;
}


/* убираем влияние глобальных правил h2/p */

.news-card h2,
.news-card .news-title {
  color:
    #f6f0e7 !important;

  text-shadow:
    0 1px 0
    rgba(255,255,255,.025);

  opacity:1 !important;
}


.news-card p,
.news-card .news-copy,
.news-card .news-text {
  color:
    rgba(246,239,230,.75) !important;

  opacity:1 !important;
}


.news-card .section-kicker,
.news-card .eyebrow {
  color:
    #d7aa69 !important;

  opacity:1 !important;
}


/* Если старые глобальные стили слишком агрессивны */

.news-card * {
  text-decoration-color:
    currentColor;
}


.news-card h2 {
  margin-bottom:
    22px !important;

  max-width:
    620px;

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    "Book Antiqua",
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(44px,5vw,72px) !important;

  font-weight:
    400 !important;

  line-height:
    .98 !important;

  letter-spacing:
    -.045em !important;
}


.news-card p {
  max-width:
    650px;

  font-size:
    16px !important;

  line-height:
    1.75 !important;

  letter-spacing:
    -.006em !important;
}


/* картинка чуть лучше отделяется от фона */

.news-image {
  border:
    1px solid
    rgba(255,255,255,.10) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    ) !important;

  box-shadow:
    0 28px 65px
    rgba(0,0,0,.28),
    inset 0 1px 0
    rgba(255,255,255,.06) !important;
}


.news-image img {
  filter:
    saturate(.96)
    contrast(1.03);
}


/* ==========================================================
   PREMIUM SELECT SYSTEM
   ========================================================== */

select {
  width:100%;

  min-height:
    48px;

  padding:
    0 46px 0 14px !important;

  border:
    1px solid
    rgba(150,107,57,.16) !important;

  border-radius:
    12px !important;

  outline:
    none !important;

  color:
    #4a423a !important;

  background-color:
    rgba(255,253,249,.88) !important;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #9c713d 50%
    ),
    linear-gradient(
      135deg,
      #9c713d 50%,
      transparent 50%
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(154,111,58,.12)
    ) !important;

  background-position:
    calc(100% - 19px) 21px,
    calc(100% - 14px) 21px,
    calc(100% - 42px) 50% !important;

  background-size:
    5px 5px,
    5px 5px,
    1px 24px !important;

  background-repeat:
    no-repeat !important;

  appearance:
    none !important;

  -webkit-appearance:
    none !important;

  -moz-appearance:
    none !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size:
    12px !important;

  font-weight:
    500 !important;

  line-height:
    1 !important;

  cursor:
    pointer;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.74),
    0 7px 20px
    rgba(78,56,34,.035);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    transform .18s ease;
}


select:hover {
  border-color:
    rgba(171,119,54,.28) !important;

  background-color:
    #fffdf9 !important;
}


select:focus {
  border-color:
    rgba(181,125,58,.50) !important;

  background-color:
    #fffefa !important;

  box-shadow:
    0 0 0 4px
    rgba(183,126,58,.075),
    0 9px 24px
    rgba(78,56,34,.05) !important;
}


/*
 * options контролируются браузером не полностью,
 * но задаём максимально единый вид.
 */

select option {
  color:#433b34;

  background:#fffaf3;

  font-size:13px;
}


/* ==========================================================
   BUY FORM SELECT
   ========================================================== */

.buy-form select {
  min-height:
    48px !important;

  border-radius:
    11px !important;

  background-color:
    rgba(255,255,255,.84) !important;
}


.buy-form select:hover {
  transform:
    translateY(-1px);
}


/* ==========================================================
   ADMIN SELECT
   ========================================================== */

.admin-section select,
.admin-course-edit-grid select,
.admin-panel select {
  min-height:
    46px !important;

  color:
    #493f36 !important;

  background-color:
    #fffdfa !important;
}


/* ==========================================================
   INPUTS — MATCH SELECTS
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
input[type="password"],
textarea {
  border-color:
    rgba(150,107,57,.15) !important;

  background:
    rgba(255,253,249,.88) !important;

  color:
    #4a423a !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.72);
}


input:focus,
textarea:focus {
  border-color:
    rgba(181,125,58,.48) !important;

  box-shadow:
    0 0 0 4px
    rgba(183,126,58,.07) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:720px) {

  .news-card h2 {
    font-size:
      clamp(38px,11vw,56px) !important;
  }


  .news-card p {
    font-size:
      15px !important;
  }


  select {
    min-height:
      50px;
  }

}


/* ==========================================================
   AUTH / REGISTER V2
   ========================================================== */

.auth-page-split {
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;

  padding:
    clamp(70px,8vw,120px)
    0
    100px;

  display:grid;

  grid-template-columns:
    minmax(0,.92fr)
    minmax(460px,1fr);

  gap:clamp(45px,7vw,100px);

  align-items:center;
}


.auth-card-premium {
  padding:clamp(30px,4vw,50px) !important;

  border:
    1px solid
    rgba(158,111,55,.13) !important;

  border-radius:28px !important;

  background:
    rgba(255,253,249,.89) !important;

  box-shadow:
    0 30px 85px rgba(66,48,31,.09),
    inset 0 1px 0 rgba(255,255,255,.90)
    !important;

  backdrop-filter:blur(18px);
}


.auth-card-kicker {
  margin-bottom:12px;

  color:#a56e2f;

  font-size:9px;
  font-weight:700;

  letter-spacing:.18em;
}


.auth-card-premium h2 {
  margin:0 0 9px;

  font-size:clamp(34px,3.5vw,48px);
  font-weight:400;
}


.auth-notice {
  margin:19px 0;

  padding:14px 16px;

  border:
    1px solid
    rgba(125,151,111,.18);

  border-radius:13px;

  color:#52604c;

  background:
    rgba(226,235,219,.52);

  font-size:12px;
  line-height:1.55;
}


.auth-register-link {
  margin-top:25px;
  padding-top:21px;

  display:flex;
  justify-content:center;

  gap:5px;

  border-top:
    1px solid
    rgba(140,102,61,.10);

  color:#8b8177;

  font-size:12px;
}


.auth-register-link a {
  color:#9d672b;

  font-weight:600;

  text-decoration:none;
}


.auth-register-link a:hover {
  text-decoration:underline;
}


.register-fields {
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:12px;
}


.registration-consents {
  margin-top:5px;

  padding:20px;

  border:
    1px solid
    rgba(150,107,56,.11);

  border-radius:17px;

  background:
    rgba(249,244,237,.66);
}


.consent-heading {
  margin-bottom:15px;

  color:#665b50;

  font-size:10px;
  font-weight:700;

  letter-spacing:.10em;

  text-transform:uppercase;
}


.registration-consents .check {
  padding:10px 0;

  display:flex;

  align-items:flex-start;

  gap:10px;
}


.registration-consents
.check + .check {
  border-top:
    1px solid
    rgba(130,98,64,.07);
}


.registration-consents .check span {
  color:#655d55;

  font-size:11px;

  line-height:1.55;
}


.registration-consents .check a {
  color:#9d672b;
}


.registration-consents .check small {
  display:block;

  margin-top:3px;

  color:#9a9087;

  font-size:9px;
}


.registration-consents
input[type="checkbox"] {
  width:17px;
  height:17px;

  margin-top:2px;

  accent-color:#ad7735;
}


.optional-consent {
  opacity:.89;
}


/* ==========================================================
   ADMIN USERS / CSV
   ========================================================== */

.admin-user-tools {
  margin:16px 0 22px;

  padding:14px 16px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  border:
    1px solid
    rgba(147,103,52,.10);

  border-radius:14px;

  background:
    rgba(250,246,239,.65);
}


.admin-user-tools span {
  color:#91867c;

  font-size:10px;

  line-height:1.45;
}


.admin-export-button {
  flex:0 0 auto;

  text-decoration:none;
}


@media(max-width:900px) {

  .auth-page-split {
    width:
      min(600px,calc(100% - 24px));

    grid-template-columns:1fr;

    gap:35px;

    padding-top:45px;
  }


  .register-fields {
    grid-template-columns:1fr;
  }


  .admin-user-tools {
    align-items:stretch;

    flex-direction:column;
  }


  .admin-export-button {
    text-align:center;
  }

}


/* ==========================================================
   REGISTER ALIGNMENT + COURSE CARDS V8
   ========================================================== */


/* ----------------------------------------------------------
   REGISTRATION — левый блок поднимаем к верхней границе формы
   ---------------------------------------------------------- */

.register-page.auth-page-split {
  align-items:start !important;
}


.register-page .auth-intro {
  align-self:start !important;

  padding-top:
    38px !important;
}


.register-page .auth-card {
  align-self:start !important;
}


/* Чуть уменьшаем избыточный вертикальный разрыв слева */

.register-page .auth-intro h1 {
  margin-top:
    20px !important;

  margin-bottom:
    20px !important;
}


.register-page .auth-intro p {
  margin-top:
    0 !important;
}


/* ==========================================================
   COURSE CARDS — CENTERED EDITORIAL LAYOUT
   ========================================================== */

.games-grid {
  align-items:stretch !important;
}


/*
 * Все карточки строятся одинаково:
 * верх / описание / параметры / цена / CTA.
 */
.game-card {
  min-height:
    610px !important;

  padding:
    30px 28px 24px !important;

  display:flex !important;

  flex-direction:column !important;

  text-align:center !important;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.game-card-top {
  width:100%;

  margin-bottom:
    24px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;
}


.game-number {
  font-size:
    9px !important;

  color:
    #95897e !important;
}


.game-type {
  font-size:
    9px !important;

  letter-spacing:
    .13em !important;
}


/* ----------------------------------------------------------
   TITLE
   ---------------------------------------------------------- */

.game-card h3 {
  width:100%;

  max-width:
    290px;

  min-height:
    78px;

  margin:
    0 auto 14px !important;

  display:flex;

  align-items:center;

  justify-content:center;

  color:
    #332d28 !important;

  font-size:
    clamp(27px,2vw,34px) !important;

  line-height:
    1.05 !important;

  letter-spacing:
    -.035em !important;

  text-align:center !important;

  text-wrap:balance;
}


/* ----------------------------------------------------------
   DESCRIPTION
   ---------------------------------------------------------- */

.game-card > p,
.game-card .game-description {
  width:100%;

  max-width:
    290px;

  min-height:
    112px;

  margin:
    0 auto !important;

  display:flex;

  align-items:flex-start;

  justify-content:center;

  color:
    #756b61 !important;

  font-size:
    13px !important;

  line-height:
    1.72 !important;

  text-align:center !important;
}


/* Если описание очень короткое */

.game-card > p:empty,
.game-card .game-description:empty {
  min-height:
    112px;
}


/* ----------------------------------------------------------
   DETAILS
   ---------------------------------------------------------- */

.game-details {
  width:100%;

  margin-top:
    20px !important;

  padding:
    18px 0 !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    18px !important;

  border-top:
    1px solid rgba(124,92,57,.13) !important;

  border-bottom:
    1px solid rgba(124,92,57,.13) !important;
}


.game-details > div {
  min-width:0;

  text-align:center;
}


.game-details small {
  margin-bottom:
    5px;

  color:
    #978b80 !important;

  font-size:
    9px !important;

  letter-spacing:
    .025em;
}


.game-details strong {
  color:
    #403832 !important;

  font-size:
    12px !important;

  font-weight:
    600 !important;

  line-height:
    1.45 !important;
}


/* ----------------------------------------------------------
   PRICE
   ---------------------------------------------------------- */

.game-price-row {
  width:100%;

  min-height:
    108px;

  padding:
    20px 0 !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  border-bottom:
    1px solid rgba(124,92,57,.13) !important;
}


.game-price {
  text-align:center !important;
}


.game-price small {
  margin-bottom:
    7px;

  color:
    #978b80 !important;

  font-size:
    9px !important;
}


.game-price strong {
  color:
    #3c342e !important;

  font-size:
    28px !important;

  line-height:
    1 !important;

  letter-spacing:
    -.02em !important;
}


/* ----------------------------------------------------------
   LOGGED IN BUY FORM
   ---------------------------------------------------------- */

.buy-form {
  width:100%;

  margin-top:auto !important;

  padding-top:
    18px !important;

  text-align:left !important;
}


.buy-form label > span {
  display:block;

  margin-bottom:
    7px !important;

  color:
    #93867b !important;

  font-size:
    8px !important;

  font-weight:
    650 !important;

  letter-spacing:
    .08em !important;

  text-transform:
    uppercase;
}


.buy-form select,
.buy-form input {
  text-align:left !important;
}


/* ----------------------------------------------------------
   CTA BUTTON
   ---------------------------------------------------------- */

.lux-buy-button,
.game-card .button {
  width:100%;

  min-height:
    52px !important;

  margin-top:
    auto !important;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  padding:
    0 17px !important;

  border-radius:
    12px !important;

  font-size:
    12px !important;

  font-weight:
    650 !important;

  letter-spacing:
    0 !important;
}


/* Незалогиненный CTA чуть визуально спокойнее */

.game-card a.lux-buy-button,
.game-card a.button {
  text-decoration:none !important;
}


/* ----------------------------------------------------------
   CARD BACKGROUNDS — subtle distinction
   ---------------------------------------------------------- */

.games-grid .game-card:nth-child(1) {
  background:
    linear-gradient(
      150deg,
      rgba(255,253,249,.97),
      rgba(249,243,235,.95)
    ) !important;
}


.games-grid .game-card:nth-child(2) {
  background:
    linear-gradient(
      150deg,
      rgba(255,252,246,.97),
      rgba(246,236,222,.95)
    ) !important;
}


.games-grid .game-card:nth-child(3) {
  background:
    linear-gradient(
      150deg,
      rgba(255,251,246,.97),
      rgba(248,235,223,.95)
    ) !important;
}


/* ----------------------------------------------------------
   HOVER
   ---------------------------------------------------------- */

.game-card:hover h3 {
  color:
    #9a6528 !important;

  transition:
    color .22s ease;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1100px) {

  .game-card {
    padding:
      25px 20px 21px !important;
  }


  .game-card h3 {
    min-height:
      72px;

    font-size:
      27px !important;
  }


  .game-card > p,
  .game-card .game-description {
    font-size:
      12px !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:860px) {

  .game-card {
    min-height:
      auto !important;
  }


  .game-card h3 {
    min-height:
      auto;

    max-width:
      390px;
  }


  .game-card > p,
  .game-card .game-description {
    min-height:
      auto;

    max-width:
      390px;

    margin-bottom:
      10px !important;
  }


  .game-price-row {
    min-height:
      auto;
  }


  .register-page .auth-intro {
    padding-top:
      0 !important;
  }

}


/* ==========================================================
   PREMIUM FOOTER V2
   ========================================================== */

.site-footer-premium {
  position:relative;

  z-index:2;

  width:
    min(1440px,calc(100% - 44px));

  margin:
    70px auto 20px;

  padding:
    0;

  border:
    1px solid
    rgba(121,91,58,.10);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,253,249,.80),
      rgba(247,239,228,.78)
    );

  box-shadow:
    0 20px 60px
    rgba(66,48,31,.055),
    inset 0 1px 0
    rgba(255,255,255,.78);

  backdrop-filter:
    blur(16px);

  overflow:hidden;
}


/* gold hairline */

.site-footer-premium::before {
  content:"";

  position:absolute;

  left:7%;
  right:7%;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(184,127,58,.32),
      rgba(212,167,102,.55),
      rgba(184,127,58,.32),
      transparent
    );
}


.premium-footer-inner {
  min-height:
    120px;

  padding:
    27px 32px;

  display:grid;

  grid-template-columns:
    minmax(280px,1fr)
    auto
    minmax(180px,.65fr);

  align-items:center;

  gap:
    40px;
}


/* ==========================================================
   BRAND
   ========================================================== */

.footer-brand-link {
  display:inline-flex;

  align-items:center;

  gap:13px;

  color:inherit;

  text-decoration:none;
}


.footer-ag {
  width:48px;
  height:48px;

  flex:
    0 0 48px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(175,123,58,.26);

  border-radius:50%;

  color:
    #a56d2e;

  background:
    radial-gradient(
      circle at 32% 27%,
      #fffefb,
      #f5eadb
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    19px;

  box-shadow:
    0 8px 22px
    rgba(105,74,39,.06);
}


.footer-brand-copy strong {
  display:block;

  color:#40372f;

  font-size:10px;

  font-weight:700;

  letter-spacing:.16em;
}


.footer-brand-copy small {
  display:block;

  margin-top:5px;

  color:#95816d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:10px;

  font-style:italic;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.premium-footer-nav {
  display:grid;

  grid-template-columns:
    repeat(2,max-content);

  gap:
    9px 28px;
}


.premium-footer-nav a {
  position:relative;

  color:#756b62;

  font-size:11px;

  font-weight:500;

  text-decoration:none;

  transition:
    color .18s ease,
    transform .18s ease;
}


.premium-footer-nav a::after {
  content:"";

  position:absolute;

  left:0;
  right:100%;
  bottom:-3px;

  height:1px;

  background:#b47b37;

  transition:right .22s ease;
}


.premium-footer-nav a:hover {
  color:#9c682d;

  transform:
    translateY(-1px);
}


.premium-footer-nav a:hover::after {
  right:0;
}


/* ==========================================================
   CONTACT
   ========================================================== */

.premium-footer-contact {
  justify-self:end;

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  gap:4px;
}


.premium-footer-contact span {
  color:#988d82;

  font-size:9px;

  letter-spacing:.10em;

  text-transform:uppercase;
}


.premium-footer-contact a {
  color:#473e36;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:16px;

  text-decoration:none;

  transition:color .18s ease;
}


.premium-footer-contact a:hover {
  color:#a66d2d;
}


/* ==========================================================
   BOTTOM
   ========================================================== */

.premium-footer-bottom {
  min-height:
    43px;

  padding:
    0 32px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  border-top:
    1px solid
    rgba(122,92,59,.08);

  color:#9a9087;

  font-size:9px;

  letter-spacing:.035em;
}


.footer-dot {
  color:
    rgba(178,123,55,.58);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:900px) {

  .site-footer-premium {
    width:
      calc(100% - 20px);

    margin-top:
      50px;

    border-radius:
      20px;
  }


  .premium-footer-inner {
    padding:
      25px 22px;

    grid-template-columns:
      1fr;

    gap:
      25px;
  }


  .premium-footer-nav {
    grid-template-columns:
      1fr 1fr;

    gap:
      12px 20px;
  }


  .premium-footer-contact {
    justify-self:start;

    align-items:flex-start;
  }


  .premium-footer-bottom {
    padding:
      14px 20px;

    flex-wrap:wrap;

    min-height:auto;
  }

}


@media(max-width:520px) {

  .premium-footer-nav {
    grid-template-columns:
      1fr;
  }


  .footer-brand-copy strong {
    font-size:9px;
  }

}



/* ==========================================================
   FOOTER V3 — FULL WIDTH EDITORIAL
   ========================================================== */


/*
 * Перебиваем предыдущий card-style footer.
 */

.site-footer.footer-wide {
  width:100% !important;

  max-width:none !important;

  margin:
    clamp(80px,10vw,150px)
    0
    0 !important;

  padding:
    0 !important;

  position:relative;

  overflow:hidden;

  border:
    0 !important;

  border-top:
    1px solid
    rgba(133,96,54,.15) !important;

  border-radius:
    0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(245,236,224,.96) 0%,
      rgba(251,247,241,.98) 45%,
      rgba(239,226,208,.96) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.80) !important;

  backdrop-filter:none !important;
}


/* ----------------------------------------------------------
   мягкое свечение
   ---------------------------------------------------------- */

.footer-wide-glow {
  position:absolute;

  width:600px;
  height:600px;

  left:-270px;
  top:-380px;

  border-radius:50%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(202,155,90,.13),
      transparent 68%
    );
}


.site-footer.footer-wide::after {
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-240px;
  bottom:-350px;

  border-radius:50%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(187,157,125,.12),
      transparent 68%
    );
}


/* ==========================================================
   MAIN
   ========================================================== */

.footer-wide-main {
  width:
    min(1400px,calc(100% - 80px));

  margin:
    0 auto;

  padding:
    62px 0 54px;

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(310px,1.35fr)
    minmax(150px,.65fr)
    minmax(250px,1fr)
    minmax(230px,.8fr);

  gap:
    clamp(40px,5vw,90px);

  align-items:start;
}


/* ==========================================================
   BRAND
   ========================================================== */

.footer-wide-brand-link {
  display:inline-flex;

  align-items:center;

  gap:15px;

  color:inherit;

  text-decoration:none;
}


.footer-wide-logo {
  width:58px;
  height:58px;

  flex:0 0 58px;

  display:grid;

  place-items:center;

  position:relative;

  border:
    1px solid
    rgba(171,116,48,.30);

  border-radius:50%;

  color:#a96e28;

  background:
    radial-gradient(
      circle at 32% 25%,
      #fffefb,
      #f4e5d0
    );

  box-shadow:
    0 10px 30px
    rgba(102,70,37,.075);

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    Georgia,
    "Times New Roman",
    serif;

  font-size:22px;

  letter-spacing:-.045em;
}


.footer-wide-logo::after {
  content:"";

  position:absolute;

  inset:5px;

  border:
    1px solid
    rgba(178,124,56,.15);

  border-radius:50%;
}


.footer-wide-brand-text strong {
  display:block;

  color:#38312b;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  font-size:12px;

  font-weight:700;

  line-height:1.2;

  letter-spacing:.15em;
}


.footer-wide-brand-text small {
  display:block;

  margin-top:6px;

  color:#8a7460;

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    Georgia,
    serif;

  font-size:13px;

  font-style:italic;

  line-height:1.25;
}


.footer-wide-brand > p {
  max-width:390px;

  margin:
    25px 0 0 !important;

  color:#756a60 !important;

  font-size:14px !important;

  font-weight:400;

  line-height:1.75 !important;

  letter-spacing:-.005em;
}


/* ==========================================================
   TITLES
   ========================================================== */

.footer-wide-title {
  margin-bottom:20px;

  color:#a36b2d;

  font-size:10px;

  font-weight:700;

  line-height:1;

  letter-spacing:.17em;

  text-transform:uppercase;
}


/* ==========================================================
   LINKS
   ========================================================== */

.footer-wide-column nav {
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:13px;
}


.footer-wide-column nav a {
  position:relative;

  color:#504840;

  font-size:14px;

  font-weight:500;

  line-height:1.45;

  letter-spacing:-.006em;

  text-decoration:none;

  transition:
    color .2s ease,
    transform .2s ease;
}


.footer-wide-column nav a::before {
  content:"";

  width:0;
  height:1px;

  position:absolute;

  left:0;
  bottom:-3px;

  background:
    linear-gradient(
      90deg,
      #a86f2e,
      #d0a15d
    );

  transition:
    width .22s ease;
}


.footer-wide-column nav a:hover {
  color:#996126;

  transform:
    translateX(2px);
}


.footer-wide-column nav a:hover::before {
  width:100%;
}


/* ==========================================================
   CONTACT
   ========================================================== */

.footer-wide-contact {
  display:flex;

  flex-direction:column;

  align-items:flex-start;
}


.footer-wide-contact strong {
  color:#403832;

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    Georgia,
    serif;

  font-size:18px;

  font-weight:400;

  line-height:1.3;
}


.footer-wide-contact > span {
  margin-top:7px;

  color:#8a8076;

  font-size:13px;
}


.footer-phone {
  margin-top:20px;

  color:#3c342e;

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    Georgia,
    serif;

  font-size:
    clamp(18px,1.5vw,23px);

  font-weight:400;

  line-height:1;

  letter-spacing:-.02em;

  text-decoration:none;

  transition:
    color .2s ease;
}


.footer-phone:hover {
  color:#a46a2b;
}


/* ==========================================================
   BOTTOM BAR
   ========================================================== */

.footer-wide-bottom {
  width:
    min(1400px,calc(100% - 80px));

  min-height:62px;

  margin:
    0 auto;

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  border-top:
    1px solid
    rgba(118,87,55,.11);

  color:#8e847a;

  font-size:11px;

  font-weight:400;

  line-height:1.4;

  letter-spacing:.01em;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1100px) {

  .footer-wide-main {
    width:
      calc(100% - 50px);

    grid-template-columns:
      1.2fr .7fr 1fr;

    gap:
      45px;
  }


  .footer-wide-contact {
    grid-column:
      1 / -1;

    padding-top:10px;

    display:grid;

    grid-template-columns:
      auto auto 1fr;

    align-items:center;

    gap:20px 35px;
  }


  .footer-wide-contact
  .footer-wide-title {
    grid-column:
      1 / -1;

    margin-bottom:0;
  }


  .footer-phone {
    margin-top:0;
  }


  .footer-wide-bottom {
    width:
      calc(100% - 50px);
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .site-footer.footer-wide {
    margin-top:
      75px !important;
  }


  .footer-wide-main {
    width:
      calc(100% - 36px);

    padding:
      46px 0 38px;

    grid-template-columns:
      1fr;

    gap:
      35px;
  }


  .footer-wide-brand > p {
    max-width:none;
  }


  .footer-wide-column nav {
    gap:12px;
  }


  .footer-wide-column nav a {
    font-size:15px;
  }


  .footer-wide-contact {
    grid-column:auto;

    padding-top:0;

    display:flex;

    gap:0;
  }


  .footer-wide-contact
  .footer-wide-title {
    margin-bottom:18px;
  }


  .footer-wide-contact > span {
    margin-top:6px;
  }


  .footer-phone {
    margin-top:18px;

    font-size:21px;
  }


  .footer-wide-bottom {
    width:
      calc(100% - 36px);

    min-height:auto;

    padding:
      20px 0 24px;

    flex-direction:column;

    align-items:flex-start;

    gap:6px;

    font-size:11px;
  }

}


/* ==========================================================
   NEWS V8 — MATCH FOOTER STYLE
   ========================================================== */

.news-section {
  padding-top:
    clamp(80px,9vw,130px) !important;

  padding-bottom:
    clamp(90px,10vw,140px) !important;
}


.news-card {
  position:relative;

  overflow:hidden;

  min-height:
    520px;

  padding:
    clamp(34px,4.5vw,64px) !important;

  border:
    1px solid
    rgba(133,96,54,.13) !important;

  border-radius:
    30px !important;

  background:
    linear-gradient(
      135deg,
      rgba(247,238,226,.96) 0%,
      rgba(252,248,242,.98) 48%,
      rgba(240,227,209,.96) 100%
    ) !important;

  box-shadow:
    0 34px 85px
    rgba(66,48,31,.09),
    inset 0 1px 0
    rgba(255,255,255,.88) !important;
}


/* gold top hairline */

.news-card::before {
  content:"" !important;

  position:absolute !important;

  left:7% !important;
  right:7% !important;
  top:0 !important;

  width:auto !important;
  height:1px !important;

  border-radius:0 !important;

  opacity:1 !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(184,127,58,.30),
      rgba(212,167,102,.55),
      rgba(184,127,58,.30),
      transparent
    ) !important;

  filter:none !important;
}


/* soft ambient glow */

.news-card::after {
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  left:-260px;
  bottom:-330px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(199,151,89,.12),
      transparent 68%
    );

  pointer-events:none;
}


.news-card > * {
  position:relative;

  z-index:2;
}


.news-card .section-kicker,
.news-card .eyebrow {
  color:
    #a46a2b !important;

  opacity:1 !important;
}


.news-card h2,
.news-card .news-title {
  max-width:
    620px;

  margin-bottom:
    22px !important;

  color:
    #342e29 !important;

  text-shadow:
    none !important;

  opacity:
    1 !important;

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    "Book Antiqua",
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(44px,5vw,70px) !important;

  font-weight:
    400 !important;

  line-height:
    .98 !important;

  letter-spacing:
    -.045em !important;
}


.news-card p,
.news-card .news-copy,
.news-card .news-text {
  max-width:
    650px;

  color:
    #746a61 !important;

  opacity:
    1 !important;

  font-size:
    16px !important;

  line-height:
    1.75 !important;

  letter-spacing:
    -.006em !important;
}


/* ==========================================================
   NEWS IMAGE
   ========================================================== */

.news-image {
  position:relative;

  padding:
    10px !important;

  border:
    1px solid
    rgba(132,95,52,.12) !important;

  border-radius:
    26px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(237,224,206,.58)
    ) !important;

  box-shadow:
    0 24px 60px
    rgba(72,52,33,.12),
    inset 0 1px 0
    rgba(255,255,255,.90) !important;
}


.news-image::before {
  content:"";

  position:absolute;

  inset:5px;

  border:
    1px solid
    rgba(179,124,56,.09);

  border-radius:
    21px;

  pointer-events:none;
}


.news-image img {
  width:
    100% !important;

  height:
    100% !important;

  min-height:
    390px;

  max-height:
    500px;

  object-fit:
    cover !important;

  border-radius:
    18px !important;

  filter:
    saturate(.94)
    contrast(1.02)
    brightness(.98) !important;
}


/* ==========================================================
   CALENDAR — DESKTOP REFINEMENT
   ========================================================== */

.calendar-section {
  overflow:hidden;
}


.calendar-grid {
  gap:
    12px !important;
}


.calendar-day {
  position:relative;

  min-height:
    138px !important;

  padding:
    15px 14px !important;

  border:
    1px solid
    rgba(137,101,61,.11) !important;

  border-radius:
    16px !important;

  background:
    rgba(255,253,249,.80) !important;

  box-shadow:
    0 12px 28px
    rgba(72,52,33,.045),
    inset 0 1px 0
    rgba(255,255,255,.82) !important;
}


.calendar-day.has-event {
  border-color:
    rgba(183,127,57,.24) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,252,246,.96),
      rgba(245,234,218,.90)
    ) !important;
}


.calendar-day.today {
  box-shadow:
    0 0 0 2px
    rgba(182,124,55,.12),
    0 14px 34px
    rgba(72,52,33,.055) !important;
}


/* ==========================================================
   MOBILE CALENDAR
   ========================================================== */

@media(max-width:720px) {

  .calendar-section {
    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }


  .calendar-grid {
    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    max-width:
      520px;

    margin:
      0 auto;

    gap:
      10px !important;

    overflow:
      visible !important;
  }


  .calendar-day {
    width:
      100% !important;

    min-height:
      auto !important;

    padding:
      15px 16px !important;

    display:grid !important;

    grid-template-columns:
      82px
      minmax(0,1fr);

    align-items:center;

    gap:
      15px;

    border-radius:
      15px !important;
  }


  .calendar-day-head,
  .calendar-day > div:first-child {
    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;
  }


  .calendar-day .weekday,
  .calendar-day > div:first-child > span:first-child {
    color:
      #9b8d80 !important;

    font-size:
      9px !important;

    font-weight:
      650 !important;

    letter-spacing:
      .08em;

    text-transform:
      uppercase;
  }


  .calendar-day .day-number,
  .calendar-day strong {
    margin-top:
      2px;

    color:
      #39312b !important;

    font-family:
      "Iowan Old Style",
      "Palatino Linotype",
      Georgia,
      serif !important;

    font-size:
      26px !important;

    font-weight:
      400 !important;

    line-height:
      1 !important;
  }


  .calendar-day .month {
    margin-top:
      2px;

    color:
      #91867c !important;

    font-size:
      10px !important;
  }


  .calendar-day-events {
    min-width:0;

    display:flex;

    flex-direction:column;

    gap:
      7px;
  }


  .calendar-event {
    width:100%;

    min-height:
      46px;

    padding:
      9px 11px !important;

    display:flex !important;

    align-items:center;

    justify-content:space-between;

    gap:
      10px;

    border:
      1px solid
      rgba(175,120,54,.13);

    border-radius:
      10px;

    background:
      rgba(255,255,255,.62);
  }


  .calendar-event-title {
    min-width:0;

    color:
      #4b4138 !important;

    font-size:
      11px !important;

    font-weight:
      600 !important;

    line-height:
      1.35 !important;

    overflow-wrap:
      anywhere;
  }


  .calendar-event-time {
    flex:
      0 0 auto;

    color:
      #a06a2f !important;

    font-size:
      10px !important;

    font-weight:
      650 !important;
  }


  .calendar-event-count {
    margin-top:
      3px;

    color:
      #95897e !important;

    font-size:
      9px !important;
  }


  .calendar-day:not(.has-event) {
    opacity:
      .68;
  }


  .calendar-day:not(.has-event)
  .calendar-day-events {
    color:
      #a39a91;

    font-size:
      10px;
  }


  .news-card {
    padding:
      28px !important;

    border-radius:
      22px !important;
  }


  .news-card h2 {
    font-size:
      clamp(38px,11vw,56px) !important;
  }


  .news-card p {
    font-size:
      15px !important;
  }


  .news-image {
    margin-top:
      24px;
  }


  .news-image img {
    min-height:
      260px;

    max-height:
      360px;
  }

}


/* ==========================================================
   GAME / COURSE UI V1
   ========================================================== */

.product-kind-field {
  position:relative;
}


.product-kind-help,
.course-days-field small {
  display:block;

  margin-top:7px;

  color:#968a7e;

  font-size:9px;

  line-height:1.45;
}


.product-kind-select {
  font-weight:650 !important;
}


.course-days-field[hidden],
.game-only-field[hidden] {
  display:none !important;
}


/* ----------------------------------------------------------
   PUBLIC CARD TYPE
   ---------------------------------------------------------- */

.product-kind-public {
  width:max-content;

  margin:
    -4px auto 12px;

  padding:
    5px 10px;

  border:
    1px solid
    rgba(168,111,45,.18);

  border-radius:
    999px;

  color:#9d672b;

  background:
    rgba(255,249,240,.72);

  font-size:8px;

  font-weight:750;

  line-height:1;

  letter-spacing:.16em;
}


.course-duration-public {
  width:100%;

  min-height:72px;

  margin-top:18px;

  padding:
    15px 0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:5px;

  border-top:
    1px solid
    rgba(124,92,57,.11);

  border-bottom:
    1px solid
    rgba(124,92,57,.11);
}


.course-duration-public small {
  color:#968a80;

  font-size:8px;

  font-weight:650;

  letter-spacing:.08em;
}


.course-duration-public strong {
  color:#40372f;

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    Georgia,
    serif;

  font-size:22px;

  font-weight:400;
}


/*
 * Игровые характеристики не нужны на карточке курса,
 * если существующий шаблон выводит их общей секцией.
 */
.game-card.product-course
.game-details {
  display:none !important;
}


/*
 * У курса нет календарного select.
 */
.game-card.product-course
select[name="game_date_id"] {
  display:none !important;
}


.course-only-field[hidden] {
  display:none !important;
}


/* ==========================================================
   COURSE PLATFORM V1
   ========================================================== */

.account-products-grid,
.course-materials,
.admin-course-content-list,
.admin-material-list,
.feedback-course-list,
.feedback-student-list {
  display:grid;
  gap:16px;
}


.account-product-card,
.course-room-block,
.admin-material-card,
.admin-content-course,
.feedback-course-card,
.feedback-student,
.admin-submissions {
  border:1px solid rgba(140,99,52,.11);
  background:rgba(255,253,249,.86);
  box-shadow:0 22px 55px rgba(62,44,27,.05);
}


.account-product-card {
  padding:28px;
  border-radius:22px;
}


.account-product-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}


.account-product-kind {
  color:#9e692e;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}


.account-product-card h2 {
  margin:22px 0 10px;
  font-size:32px;
}


.account-course-meta {
  margin-top:20px;
  padding:14px 0;
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(130,95,58,.10);
}


.account-open-course {
  min-height:50px;
  margin-top:16px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:12px;
  color:white;
  background:linear-gradient(135deg,#ad712c,#cf973d);
  text-decoration:none;
}


.course-room,
.admin-standalone {
  width:min(1220px,calc(100% - 40px));
  margin:0 auto;
  padding:70px 0 100px;
}


.course-back {
  display:inline-block;
  margin-bottom:24px;
  color:#99652b;
  font-size:12px;
  text-decoration:none;
}


.course-room-head {
  padding:clamp(30px,5vw,58px);
  display:flex;
  justify-content:space-between;
  gap:45px;
  border:1px solid rgba(139,98,51,.12);
  border-radius:28px;
  background:rgba(255,252,247,.89);
  box-shadow:0 28px 70px rgba(64,45,26,.06);
}


.course-room-head h1 {
  margin:12px 0;
  font-size:clamp(44px,6vw,70px);
}


.course-room-duration {
  min-width:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-left:1px solid rgba(130,93,52,.12);
}


.course-room-duration span,
.course-room-duration small {
  color:#95897e;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}


.course-room-duration strong {
  margin:7px 0;
  color:#a66c2c;
  font:400 50px Georgia,serif;
}


.course-room-block {
  margin-top:25px;
  padding:clamp(24px,4vw,44px);
  border-radius:24px;
}


.course-room-block-head {
  margin-bottom:26px;
  display:flex;
  gap:18px;
}


.course-room-block-head > span {
  color:#ad742f;
  font-size:10px;
  letter-spacing:.12em;
}


.course-room-block-head h2 {
  margin:0;
  font-size:33px;
}


.course-material {
  padding:22px;
  border:1px solid rgba(135,96,53,.10);
  border-radius:17px;
  background:rgba(255,255,255,.55);
}


.course-material.locked {
  opacity:.72;
}


.course-material-head {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:14px;
}


.course-material-head h3 {
  margin:0 0 6px;
  font-size:23px;
}


.course-material-number {
  color:#ae742e;
  font-size:10px;
}


.course-material-status {
  padding:7px 10px;
  border-radius:999px;
  color:#567052;
  background:rgba(192,220,187,.36);
  font-size:9px;
}


.course-material.locked .course-material-status {
  color:#81776e;
  background:rgba(210,201,190,.35);
}


.course-material-lock {
  margin-top:17px;
  padding:12px 14px;
  border-radius:10px;
  color:#85796e;
  background:rgba(242,234,223,.7);
  font-size:11px;
}


.course-reader {
  margin-top:18px;
}


.course-reader summary {
  padding:15px 17px;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  list-style:none;
  border-radius:11px;
  color:white;
  background:#aa702c;
}


.protected-course-document {
  position:relative;
  margin-top:14px;
  padding:clamp(24px,5vw,54px);
  overflow:hidden;
  border:1px solid rgba(129,92,51,.12);
  border-radius:16px;
  background:#fffdf9;
  user-select:none;
  -webkit-user-select:none;
}


.course-watermark-layer {
  position:absolute;
  inset:-100px;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-content:space-around;
  pointer-events:none;
  transform:rotate(-25deg);
  opacity:.075;
}


.course-watermark-layer span {
  color:#6f5234;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}


.course-document-content {
  position:relative;
  z-index:2;
  color:#37312c;
  font-size:16px;
  line-height:1.8;
}


.course-document-content table {
  width:100%;
  border-collapse:collapse;
}


.course-document-content th,
.course-document-content td {
  padding:9px;
  border:1px solid rgba(100,80,60,.15);
}


.course-homework-form,
.course-chat-form {
  display:grid;
  gap:14px;
}


.course-homework-form label {
  display:grid;
  gap:7px;
}


.course-submission-history {
  margin-top:28px;
}


.course-submission-row {
  padding:13px 0;
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(130,90,50,.09);
}


.course-submission-row div {
  display:flex;
  flex-direction:column;
}


.course-submission-row span,
.course-submission-row time {
  color:#978b80;
  font-size:10px;
}


.course-chat {
  max-height:560px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:11px;
  overflow-y:auto;
  border:1px solid rgba(137,98,54,.10);
  border-radius:16px;
  background:rgba(247,241,232,.48);
}


.course-message {
  width:min(78%,650px);
  padding:13px 15px;
  border-radius:15px;
  background:white;
}


.course-message.mine {
  margin-left:auto;
  background:rgba(236,218,191,.70);
}


.course-message.author {
  margin-right:auto;
}


.course-message > span {
  color:#a66e2c;
  font-size:9px;
  font-weight:700;
}


.course-message p {
  margin:7px 0 !important;
  color:#433b34 !important;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}


.course-message time {
  color:#999087;
  font-size:8px;
}


.course-chat-form {
  margin-top:14px;
  grid-template-columns:1fr auto;
}


.course-chat-form textarea {
  min-height:90px;
}


.admin-standalone-head {
  margin-bottom:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}


.admin-standalone-head h1 {
  margin:10px 0 0;
  font-size:clamp(40px,5vw,62px);
}


.admin-content-course,
.feedback-course-card,
.feedback-student {
  padding:21px 23px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  border-radius:16px;
  color:inherit;
  text-decoration:none;
}


.admin-content-course h2,
.feedback-course-card h2 {
  margin:4px 0;
  font-size:25px;
}


.admin-content-grid {
  display:grid;
  grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);
  gap:22px;
  align-items:start;
}


.admin-material-upload {
  position:sticky;
  top:25px;
}


.admin-material-card {
  padding:21px;
  border-radius:17px;
}


.admin-material-card-head {
  margin-bottom:18px;
  display:flex;
  gap:14px;
}


.admin-material-card form {
  display:grid;
  gap:10px;
}


.admin-material-actions {
  margin-top:13px;
  display:flex;
  gap:10px;
}


.feedback-unread {
  padding:6px 10px;
  border-radius:999px;
  color:#8b5720;
  background:rgba(227,184,124,.33);
  font-weight:700;
}


.feedback-student div {
  display:flex;
  flex-direction:column;
  gap:3px;
}


.feedback-student span,
.feedback-student small {
  color:#887d73;
  font-size:11px;
}


.admin-feedback-layout {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
  gap:23px;
}


.admin-submissions {
  padding:21px;
  border-radius:17px;
}


.admin-submissions article {
  padding:14px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid rgba(130,90,50,.09);
}


@media print {

  .protected-course-document {
    display:none !important;
  }

}


@media(max-width:800px) {

  .course-room,
  .admin-standalone {
    width:calc(100% - 20px);
    padding-top:40px;
  }


  .course-room-head {
    flex-direction:column;
  }


  .course-room-duration {
    padding-top:20px;
    border-left:0;
    border-top:1px solid rgba(130,93,52,.12);
  }


  .course-material-head {
    grid-template-columns:30px 1fr;
  }


  .course-material-status {
    grid-column:2;
    width:max-content;
  }


  .course-chat-form,
  .admin-content-grid,
  .admin-feedback-layout {
    grid-template-columns:1fr;
  }


  .course-message {
    width:90%;
  }


  .admin-material-upload {
    position:static;
  }


  .admin-standalone-head {
    align-items:flex-start;
    flex-direction:column;
  }

}


/* ==========================================================
   COURSE RELEASE MODE V2
   ========================================================== */

[data-delay-field][hidden] {
  display:none !important;
}

[data-delay-field] {
  animation:
    courseDelayFieldIn
    .18s ease both;
}

@keyframes courseDelayFieldIn {

  from {
    opacity:0;
    transform:translateY(-4px);
  }

  to {
    opacity:1;
    transform:translateY(0);
  }

}


/* ==========================================================
   AG PREMIUM COURSE UX V600
   ========================================================== */


/* =======================
   BACK BUTTON
   ======================= */

.ag-back-link {
  width:max-content;

  min-height:auto !important;

  padding:9px 15px !important;

  display:inline-flex;
  align-items:center;
  gap:8px;

  border:
    1px solid
    rgba(154,103,45,.16)
    !important;

  border-radius:
    999px
    !important;

  color:
    #936026
    !important;

  background:
    rgba(255,253,249,.74)
    !important;

  box-shadow:
    0 8px 25px
    rgba(61,43,26,.025)
    !important;

  font-size:
    10px
    !important;

  font-weight:600;

  text-decoration:none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.ag-back-link:hover {
  transform:
    translateX(-2px);

  border-color:
    rgba(169,111,44,.34)
    !important;

  background:
    #fffdf9
    !important;
}



/* =======================
   BELL
   ======================= */

.header-notification-bell {
  position:relative;

  width:41px;
  height:41px;

  flex:0 0 41px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(152,101,45,.14);

  border-radius:50%;

  color:#786b5f;

  background:
    rgba(255,253,249,.72);

  text-decoration:none;

  transition:.2s ease;
}


.header-notification-bell svg {
  width:18px;
  height:18px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.header-notification-bell:hover,
.header-notification-bell.has-unread {
  color:#a86d2a;

  border-color:
    rgba(173,113,43,.34);

  background:#fff9f0;
}


.header-notification-bell.has-unread svg {
  animation:
    agBellV600
    2.3s ease-in-out infinite;
}


.header-notification-count {
  position:absolute;

  top:-4px;
  right:-4px;

  min-width:19px;
  height:19px;

  padding:0 5px;

  display:grid;
  place-items:center;

  border:
    2px solid
    #fbf8f2;

  border-radius:999px;

  color:white;

  background:#b5762d;

  font-size:9px;
  font-weight:800;
}


@keyframes agBellV600 {

  0%,75%,100% {
    transform:rotate(0);
  }

  80% {
    transform:rotate(9deg);
  }

  85% {
    transform:rotate(-8deg);
  }

  90% {
    transform:rotate(5deg);
  }

}



/* =======================
   MATERIALS
   ======================= */

.admin-content-grid {
  gap:30px !important;

  align-items:start;
}


.admin-material-upload,
.admin-material-card {

  border:
    1px solid
    rgba(144,98,48,.115)
    !important;

  border-radius:
    24px
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,254,251,.98),
      rgba(249,244,236,.93)
    )
    !important;

  box-shadow:
    0 24px 65px
    rgba(60,42,24,.052)
    !important;
}


.admin-material-upload {
  padding:30px !important;
}


.admin-material-card {
  padding:27px !important;
}


.admin-material-upload h2 {
  margin:
    0 0 24px
    !important;

  font-family:
    Georgia,
    serif;

  font-size:29px;

  font-weight:400;
}


.admin-material-card-head {
  margin-bottom:22px !important;

  padding-bottom:18px;

  align-items:center;

  border-bottom:
    1px solid
    rgba(143,97,47,.09);
}


.admin-material-card-head > span {
  width:37px;
  height:37px;

  flex:0 0 37px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#a66b29;

  background:#f5eadb;

  font-size:10px;
}


.admin-material-card-head h3 {
  margin:0 0 4px;

  font-family:
    Georgia,
    serif;

  font-size:24px;

  font-weight:400;
}


.admin-material-card-head small {
  color:#a3978c;

  font-size:9px;
}


.admin-material-upload label,
.admin-material-card label {
  display:grid;

  gap:7px;

  margin-bottom:5px;
}


.admin-material-upload label > span,
.admin-material-card label > span {
  color:#8e8175;

  font-size:9px;

  font-weight:700;

  letter-spacing:.055em;

  text-transform:uppercase;
}


.admin-material-upload input,
.admin-material-upload textarea,
.admin-material-upload select,
.admin-material-card input,
.admin-material-card textarea,
.admin-material-card select {

  width:100%;

  min-height:48px;

  padding:
    11px 13px
    !important;

  border:
    1px solid
    rgba(151,102,50,.16)
    !important;

  border-radius:
    13px
    !important;

  outline:none;

  color:#40372f;

  background:
    rgba(255,254,251,.97)
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.84);

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}


.admin-material-upload textarea,
.admin-material-card textarea {
  min-height:105px;

  resize:vertical;
}


.admin-material-upload input:focus,
.admin-material-upload textarea:focus,
.admin-material-upload select:focus,
.admin-material-card input:focus,
.admin-material-card textarea:focus,
.admin-material-card select:focus {

  border-color:
    rgba(174,113,43,.43)
    !important;

  box-shadow:
    0 0 0 3px
    rgba(180,118,47,.075)
    !important;
}


.admin-material-actions {
  padding-top:15px;

  border-top:
    1px solid
    rgba(142,96,47,.08);
}



/* =======================
   TELEGRAM-LIKE CHAT
   ======================= */

.course-chat {

  height:
    min(560px,62vh);

  max-height:none
    !important;

  padding:22px
    !important;

  display:flex;

  flex-direction:column;

  gap:8px;

  overflow-y:auto;

  border:
    1px solid
    rgba(142,97,48,.11)
    !important;

  border-radius:
    23px
    !important;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(213,190,159,.18),
      transparent 30%
    ),
    linear-gradient(
      150deg,
      rgba(245,239,230,.92),
      rgba(252,249,244,.96)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.75);
}


.course-chat-empty {
  margin:auto;

  color:#968a7f;

  font-size:12px;

  text-align:center;
}


.course-message {
  width:100%
    !important;

  margin:3px 0
    !important;

  padding:0
    !important;

  display:grid;

  grid-template-columns:
    minmax(0,1fr);

  background:transparent
    !important;
}


.course-message.mine {
  justify-items:end;
}


.course-message.author {
  justify-items:start;
}


.course-message > span {
  margin:
    0 8px 3px;

  color:#a16a2d !important;

  font-size:8px !important;

  font-weight:700;
}


.course-message > p {
  width:max-content;

  max-width:
    min(72%,640px);

  margin:0
    !important;

  padding:
    11px 14px
    !important;

  border-radius:
    17px 17px 17px 5px;

  color:#3b332c
    !important;

  background:#fff
    !important;

  box-shadow:
    0 4px 14px
    rgba(55,41,28,.045);

  font-size:14px;

  line-height:1.55;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
}


.course-message.mine > p {
  border-radius:
    17px 17px 5px 17px;

  background:
    #eee0c7
    !important;
}


.course-message time {
  margin:
    4px 7px 0;

  color:#a3988e;

  font-size:8px;
}



/* =======================
   CHAT COMPOSER
   ======================= */

.course-chat-form.ag-chat-compose {

  position:relative;

  margin-top:
    11px
    !important;

  padding:
    9px 10px;

  display:grid
    !important;

  grid-template-columns:
    42px
    minmax(0,1fr)
    44px
    !important;

  gap:6px;

  align-items:end;

  border:
    1px solid
    rgba(143,98,48,.11);

  border-radius:19px;

  background:
    rgba(255,253,249,.97);

  box-shadow:
    0 8px 24px
    rgba(58,42,27,.035);
}


.ag-chat-compose
textarea[name="message"] {

  min-height:
    42px
    !important;

  max-height:140px;

  margin:0;

  padding:
    10px 7px
    !important;

  overflow-y:auto;

  border:0
    !important;

  outline:0
    !important;

  resize:none
    !important;

  color:#40372f;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  font:
    13px/1.5
    Arial,
    sans-serif;
}


.ag-emoji-wrap {
  position:relative;
}


.ag-emoji-toggle {
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border:0;

  border-radius:50%;

  color:#92857a;

  background:transparent;

  cursor:pointer;

  font-size:22px;

  transition:.15s ease;
}


.ag-emoji-toggle:hover {
  background:#f5ecdf;
}


.ag-emoji-panel {
  position:absolute;

  left:0;
  bottom:50px;

  z-index:200;

  width:270px;

  padding:10px;

  grid-template-columns:
    repeat(5,1fr);

  gap:4px;

  border:
    1px solid
    rgba(143,96,44,.13);

  border-radius:18px;

  background:#fffdf9;

  box-shadow:
    0 20px 50px
    rgba(54,38,22,.16);
}


.ag-emoji-panel:not([hidden]) {
  display:grid;
}


.ag-emoji-panel button {
  width:46px;
  height:40px;

  border:0;

  border-radius:9px;

  background:transparent;

  cursor:pointer;

  font-size:20px;
}


.ag-emoji-panel button:hover {
  background:#f5ecde;
}


.ag-chat-send {
  width:40px
    !important;

  min-width:40px
    !important;

  height:40px
    !important;

  min-height:40px
    !important;

  padding:0
    !important;

  display:grid
    !important;

  place-items:center;

  border:0
    !important;

  border-radius:50%
    !important;

  color:white
    !important;

  background:
    linear-gradient(
      145deg,
      #ad702b,
      #ca943f
    )
    !important;

  box-shadow:
    0 8px 20px
    rgba(168,107,39,.19)
    !important;

  font-size:15px;

  cursor:pointer;
}



/* =======================
   ADMIN FEEDBACK LAYOUT
   ======================= */

.admin-feedback-layout {
  grid-template-columns:
    minmax(0,1fr)
    minmax(250px,300px)
    !important;

  gap:18px
    !important;

  align-items:start;
}


.admin-submissions {
  padding:22px
    !important;

  border-radius:
    22px
    !important;

  background:
    rgba(255,253,249,.92)
    !important;
}


.admin-submissions h2 {
  font-family:
    Georgia,
    serif;

  font-size:23px;

  font-weight:400;
}



/* =======================
   MOBILE
   ======================= */

@media(max-width:800px) {

  .course-chat {
    height:
      min(500px,62vh);

    padding:
      13px
      !important;
  }


  .course-message > p {
    max-width:87%;
  }


  .course-chat-form.ag-chat-compose {
    grid-template-columns:
      40px
      minmax(0,1fr)
      42px
      !important;
  }


  .ag-emoji-panel {
    width:230px;

    grid-template-columns:
      repeat(4,1fr);
  }


  .admin-feedback-layout {
    grid-template-columns:
      1fr
      !important;
  }


  .header-notification-bell {
    width:38px;
    height:38px;

    flex-basis:38px;
  }

}




/* ==========================================================
   GAME PARTICIPATION RECOVERY V701
   ========================================================== */


/* Видимая стрелка select в материалах */

.admin-material-upload select,
.admin-material-card select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:48px !important;
  cursor:pointer;

  background-color:rgba(255,254,251,.97) !important;

  background-image:
    linear-gradient(45deg,transparent 50%,#aa702f 50%),
    linear-gradient(135deg,#aa702f 50%,transparent 50%),
    linear-gradient(
      to left,
      rgba(166,109,46,.09),
      rgba(166,109,46,.09)
    ) !important;

  background-position:
    calc(100% - 21px) 50%,
    calc(100% - 15px) 50%,
    calc(100% - 44px) 50% !important;

  background-size:
    6px 6px,
    6px 6px,
    1px 28px !important;

  background-repeat:no-repeat !important;
}


/* Доступность материала */

.course-material-status {
  min-width:92px !important;
  width:auto !important;
  height:36px !important;

  padding:0 14px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 auto;

  border-radius:999px !important;

  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap;

  font-size:10px !important;
  font-weight:600;
}

.course-material.available .course-material-status {
  color:#52795c !important;
  background:#e4f1e5 !important;
}

.course-material.locked .course-material-status {
  color:#897d71 !important;
  background:#f0ebe5 !important;
}


/* Emoji строго по центру */

.ag-emoji-wrap {
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
}

.ag-emoji-toggle {
  display:grid !important;
  place-items:center !important;

  margin:0 !important;
  padding:0 !important;

  line-height:1 !important;
}


/* DOCX в домашнем задании */

.admin-submissions a.admin-button {
  width:100% !important;
  min-height:44px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 16px !important;

  text-align:center !important;
  line-height:1.2 !important;
}


/* Кнопка возврата */

.ag-back-link {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:38px;

  padding:0 15px !important;

  border:1px solid rgba(164,109,48,.17);

  border-radius:999px !important;

  color:#9f6526 !important;

  background:
    rgba(255,253,249,.82);

  box-shadow:
    0 10px 24px rgba(66,45,26,.045);

  font-size:10px !important;
  font-weight:600 !important;

  text-decoration:none !important;
}


/* ==========================================================
   GAME PARTICIPATION
   ========================================================== */

.account-game-booking {
  margin-top:24px;
  padding-top:22px;

  border-top:
    1px solid rgba(146,99,48,.10);
}

.account-game-booking-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;

  margin-bottom:18px;
}

.account-game-eyebrow {
  display:block;

  margin-bottom:6px;

  color:#ae712e;

  font-size:9px;
  font-weight:700;

  letter-spacing:.14em;
}

.account-game-booking-head h3 {
  margin:0;

  color:#3b3129;

  font-family:Georgia,serif;
  font-size:22px;
  font-weight:400;
}

.account-game-booking-head p {
  max-width:310px;

  margin:2px 0 0;

  color:#91857a;

  font-size:11px;
  line-height:1.55;
}

.account-game-dates {
  display:grid;
  gap:12px;
}

.account-game-date {
  padding:17px;

  border:
    1px solid rgba(147,99,48,.12);

  border-radius:17px;

  background:
    rgba(255,254,251,.90);
}

.account-game-date.is-confirmed {
  border-color:
    rgba(83,139,94,.28);

  background:
    linear-gradient(
      145deg,
      rgba(247,252,247,.97),
      rgba(242,248,241,.90)
    );
}

.account-game-date-main {
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:20px;
}

.account-game-date time {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.account-game-date time strong {
  color:#3d342c;

  font-family:Georgia,serif;
  font-size:18px;
  font-weight:400;
}

.account-game-date time span {
  color:#aa6e2b;

  font-size:13px;
  font-weight:700;
}

.account-game-seats {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
}

.account-game-seats span {
  color:#9b8f84;
  font-size:9px;
}

.account-game-seats strong {
  color:#50443a;
  font-size:13px;
}

.account-game-state {
  margin-top:12px;

  padding:9px 11px;

  border-radius:10px;

  color:#887b70;
  background:#f5efe6;

  font-size:10px;
  line-height:1.45;
}

.account-game-state.confirmed {
  color:#52765a;
  background:#e7f2e8;
}

.account-game-state.declined {
  color:#8d7167;
  background:#f4ece8;
}

.account-game-actions {
  margin-top:12px;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;
}

.account-game-actions form {
  margin:0;
}

.account-game-actions button {
  width:100%;
  min-height:44px;

  padding:9px 13px;

  border-radius:12px;

  font-size:10px;
  font-weight:600;

  cursor:pointer;
}

.account-participation-confirm {
  border:
    1px solid rgba(174,113,43,.20);

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #ad702b,
      #c9933e
    );

  box-shadow:
    0 9px 20px rgba(168,106,39,.13);
}

.account-participation-confirm:disabled {
  opacity:.45;
  cursor:not-allowed;
}

.account-participation-decline {
  border:
    1px solid rgba(145,101,63,.14);

  color:#75695e;
  background:#fffdf9;
}

.account-game-no-dates {
  padding:18px;

  border:
    1px dashed rgba(148,101,51,.17);

  border-radius:14px;

  color:#91857a;

  background:
    rgba(255,253,249,.60);

  font-size:11px;
  line-height:1.6;
}


@media(max-width:700px) {

  .account-game-booking-head {
    display:block;
  }

  .account-game-booking-head p {
    margin-top:9px;
  }

  .account-game-actions {
    grid-template-columns:1fr;
  }

  .account-game-date-main {
    align-items:flex-start;
  }

}



/* ==========================================================
   AG GAME PARTICIPANTS V800
   ========================================================== */

.admin-existing-heading {

  margin-bottom:14px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:16px;
}


.admin-date-filters {

  display:flex;

  gap:5px;

  padding:4px;

  border:
    1px solid
    rgba(154,104,50,.10);

  border-radius:999px;

  background:
    rgba(249,245,238,.75);
}


.admin-date-filters button {

  min-height:32px;

  padding:0 13px;

  border:0;

  border-radius:999px;

  color:#8e8175;

  background:transparent;

  cursor:pointer;

  font-size:9px;
  font-weight:600;

  transition:.18s ease;
}


.admin-date-filters button:hover {

  color:#9f682b;

  background:
    rgba(255,253,249,.80);
}


.admin-date-filters button.active {

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #ad702b,
      #c7903d
    );

  box-shadow:
    0 6px 16px
    rgba(167,105,37,.13);
}



/* DATE HEADER */

.admin-date-head-right {

  display:flex;

  align-items:center;

  gap:7px;
}


.admin-date-time-state {

  min-height:27px;

  padding:0 10px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  border-radius:999px;

  font-size:8px;
  font-weight:700;
}


.admin-date-time-state.future {

  color:#806329;

  background:#f5ead1;
}


.admin-date-time-state.past {

  color:#8e857d;

  background:#eeeae5;
}



/* DATE STATS */

.admin-date-stat-grid {

  margin:
    16px 0 14px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:8px;
}


.admin-date-stat-grid > div {

  min-height:61px;

  padding:11px 12px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:4px;

  border:
    1px solid
    rgba(145,99,52,.09);

  border-radius:13px;

  background:
    rgba(250,247,242,.72);
}


.admin-date-stat-grid small {

  color:#9a8f84;

  font-size:8px;
}


.admin-date-stat-grid strong {

  color:#463b32;

  font-size:15px;
}



/* PARTICIPANTS */

.admin-participants {

  margin:
    4px 0 17px;

  border:
    1px solid
    rgba(147,99,48,.11);

  border-radius:16px;

  overflow:hidden;

  background:
    rgba(255,254,251,.69);
}


.admin-participants summary {

  min-height:49px;

  padding:
    0 15px;

  display:grid;

  grid-template-columns:
    1fr
    auto
    20px;

  align-items:center;

  gap:10px;

  cursor:pointer;

  list-style:none;

  color:#67584c;

  font-size:10px;
  font-weight:600;
}


.admin-participants summary::-webkit-details-marker {

  display:none;
}


.admin-participants summary strong {

  min-width:25px;
  height:25px;

  padding:0 7px;

  display:grid;
  place-items:center;

  border-radius:999px;

  color:#a66d2c;

  background:#f4e9d8;

  font-size:9px;
}


.admin-participants-arrow {

  color:#ad722f;

  font-size:12px;

  transition:
    transform .2s ease;
}


.admin-participants[open]
.admin-participants-arrow {

  transform:
    rotate(180deg);
}


.admin-participants-body {

  padding:
    4px 12px 12px;

  display:grid;

  gap:7px;

  border-top:
    1px solid
    rgba(146,99,49,.07);
}


.admin-participants-empty {

  padding:20px;

  color:#9b9187;

  text-align:center;

  font-size:10px;
}


.admin-participant-row {

  padding:
    11px 12px;

  display:grid;

  grid-template-columns:
    38px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:11px;

  border:
    1px solid
    rgba(144,98,48,.075);

  border-radius:13px;

  background:
    rgba(255,255,255,.76);
}


.admin-participant-avatar {

  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(171,112,44,.15);

  border-radius:50%;

  color:#a86d2b;

  background:#f8efe2;

  font-family:Georgia,serif;

  font-size:15px;
}


.admin-participant-main {

  min-width:0;

  display:flex;

  flex-direction:column;

  gap:3px;
}


.admin-participant-main strong {

  color:#443930;

  font-size:11px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.admin-participant-main a {

  width:max-content;

  max-width:100%;

  color:#85786d;

  font-size:9px;

  text-decoration:none;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.admin-participant-main a:hover {

  color:#a66a29;
}


.admin-participant-meta {

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  gap:5px;
}


.admin-participant-status {

  min-height:27px;

  padding:0 9px;

  display:inline-flex;

  align-items:center;

  border-radius:999px;

  font-size:8px;
  font-weight:700;
}


.admin-participant-status.status-confirmed {

  color:#52775b;

  background:#e4f0e5;
}


.admin-participant-status.status-pending {

  color:#896b2c;

  background:#f4ead3;
}


.admin-participant-status.status-declined {

  color:#926c62;

  background:#f3e7e3;
}


.admin-participant-status.status-cancelled {

  color:#867d75;

  background:#ece8e4;
}


.admin-participant-meta small {

  color:#a39991;

  font-size:7px;
}



/* MOBILE */

@media(max-width:800px) {

  .admin-existing-heading {

    align-items:flex-start;

    flex-direction:column;
  }


  .admin-date-filters {

    width:100%;
  }


  .admin-date-filters button {

    flex:1;
  }


  .admin-date-stat-grid {

    grid-template-columns:
      repeat(2,1fr);
  }


  .admin-date-head-right {

    align-items:flex-end;

    flex-direction:column;
  }


  .admin-participant-row {

    grid-template-columns:
      36px
      minmax(0,1fr);
  }


  .admin-participant-meta {

    grid-column:
      1 / -1;

    padding-left:47px;

    align-items:flex-start;
  }

}



/* ==========================================================
   ADMIN DATES PREMIUM V810
   ========================================================== */

.admin-date-card {
  padding:20px !important;

  border:
    1px solid rgba(149,102,50,.10)
    !important;

  border-radius:20px !important;

  background:
    rgba(255,254,251,.94)
    !important;

  box-shadow:
    0 15px 38px
    rgba(64,45,27,.045);
}


.admin-date-card-head {
  align-items:flex-start !important;
}


.admin-date-card-head > div:first-child strong {
  display:block;

  margin-bottom:5px;

  color:#3f352d;

  font-family:Georgia,serif;

  font-size:22px;

  font-weight:400;

  line-height:1.2;
}


.admin-date-card-head > div:first-child span {
  color:#91857a;

  font-size:10px;
}


/* ---------------------------
   TOP BADGES
   --------------------------- */

.admin-date-head-right {
  display:flex !important;

  align-items:center !important;

  gap:7px !important;
}


.admin-date-time-state,
.admin-date-status {
  height:28px !important;

  min-height:28px !important;

  padding:0 11px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;

  line-height:1 !important;

  white-space:nowrap;

  font-size:8px !important;
  font-weight:700 !important;

  text-align:center !important;
}


.admin-date-time-state.future {
  color:#8a6826 !important;
  background:#f7ecc4 !important;
}


.admin-date-time-state.past {
  color:#857d76 !important;
  background:#ece8e3 !important;
}


.admin-date-status.active {
  color:#52775b !important;
  background:#e3f1e4 !important;
}


/* ---------------------------
   STATS
   --------------------------- */

.admin-date-stat-grid {
  margin:18px 0 14px !important;

  gap:9px !important;
}


.admin-date-stat-grid > div {
  min-height:73px !important;

  padding:13px 14px !important;

  border:
    1px solid rgba(144,97,47,.09)
    !important;

  border-radius:14px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(249,245,239,.70)
    )
    !important;
}


.admin-date-stat-grid small {
  margin-bottom:7px;

  color:#9c9085 !important;

  font-size:8px !important;

  letter-spacing:.015em;
}


.admin-date-stat-grid strong {
  color:#41372f !important;

  font-size:20px !important;

  font-weight:500;
}


/* ---------------------------
   PARTICIPANTS DETAILS
   --------------------------- */

.admin-participants {
  margin:
    0 0 18px
    !important;

  border:
    1px solid rgba(146,99,49,.10)
    !important;

  border-radius:15px !important;

  background:
    #fffdf9
    !important;
}


.admin-participants summary {
  min-height:50px !important;

  padding:
    0 15px
    !important;

  grid-template-columns:
    1fr
    auto
    18px
    !important;
}


.admin-participants summary > span:first-child {
  color:#55483e;

  font-size:10px;
  font-weight:700;
}


.admin-participants summary strong {
  min-width:28px !important;

  height:28px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 8px !important;

  border-radius:999px !important;

  color:#a66b29 !important;

  background:#f6ead7 !important;

  line-height:1 !important;
}


/* ---------------------------
   PARTICIPANTS TABLE
   --------------------------- */

.admin-participants-body {
  padding:
    0 12px 12px
    !important;
}


.admin-participants-table {
  overflow:hidden;

  border:
    1px solid rgba(144,98,48,.08);

  border-radius:13px;

  background:
    rgba(255,255,255,.78);
}


.admin-participants-table-head,
.admin-participants-table-row {
  display:grid;

  grid-template-columns:
    minmax(180px,1.45fr)
    minmax(125px,.9fr)
    minmax(180px,1.25fr)
    minmax(105px,.75fr)
    minmax(120px,.85fr);

  gap:12px;

  align-items:center;
}


.admin-participants-table-head {
  min-height:37px;

  padding:0 12px;

  border-bottom:
    1px solid rgba(145,99,50,.08);

  color:#9a8e83;

  background:#faf7f2;

  font-size:8px;
  font-weight:700;
}


.admin-participants-table-row {
  min-height:64px;

  padding:9px 12px;

  border-bottom:
    1px solid rgba(144,98,48,.065);
}


.admin-participants-table-row:last-child {
  border-bottom:0;
}


/* PERSON */

.admin-participant-person {
  min-width:0;

  display:flex;

  align-items:center;

  gap:10px;
}


.admin-participant-avatar {
  width:36px !important;
  height:36px !important;

  flex:0 0 36px;

  display:grid !important;
  place-items:center !important;

  border:
    1px solid rgba(171,112,44,.16)
    !important;

  border-radius:50% !important;

  color:#a76c2a !important;

  background:#faf0e2 !important;

  font-family:Georgia,serif;

  font-size:14px !important;
}


.admin-participant-person-text {
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:3px;
}


.admin-participant-person-text strong {
  overflow:hidden;

  color:#41372f;

  font-size:10px;
  font-weight:700;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.admin-participant-person-text small {
  color:#a1988f;

  font-size:7px;
}


/* CELLS */

.admin-participant-cell {
  min-width:0;

  color:#65584e;

  font-size:9px;
}


.admin-participant-cell a {
  display:block;

  max-width:100%;

  overflow:hidden;

  color:#65584e;

  text-decoration:none;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.admin-participant-cell a:hover {
  color:#a56a29;
}


.admin-participant-empty-value {
  color:#bbb1a8;
}


.admin-participant-date {
  color:#978b80;

  font-size:8px;
}


/* STATUS BADGES */

.admin-participant-status {
  min-height:27px !important;

  padding:
    0 10px
    !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;

  line-height:1 !important;

  white-space:nowrap;

  font-size:8px !important;
  font-weight:700 !important;
}


.admin-participant-status.status-confirmed {
  color:#4f7859 !important;
  background:#dff1e3 !important;
}


.admin-participant-status.status-pending {
  color:#886925 !important;
  background:#f4e8c8 !important;
}


.admin-participant-status.status-declined {
  color:#a24944 !important;
  background:#fae1df !important;
}


.admin-participant-status.status-cancelled {
  color:#817970 !important;
  background:#ece8e4 !important;
}


/* ---------------------------
   FORM BELOW
   --------------------------- */

.admin-date-form {
  margin-top:17px !important;
}


/* ---------------------------
   MOBILE
   --------------------------- */

@media(max-width:1000px) {

  .admin-participants-table {
    overflow-x:auto;
  }


  .admin-participants-table-head,
  .admin-participants-table-row {
    min-width:780px;
  }

}


@media(max-width:700px) {

  .admin-date-head-right {
    flex-direction:row !important;

    flex-wrap:wrap;
  }


  .admin-date-stat-grid {
    grid-template-columns:
      repeat(2,1fr)
      !important;
  }


  .admin-participants-body {
    padding:
      0 8px 9px
      !important;
  }

}



/* ==========================================================
   ADMIN FEEDBACK BELL V820
   ========================================================== */

.admin-nav-feedback {
  position:relative;

  display:grid !important;

  grid-template-columns:
    24px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:8px;
}


.admin-feedback-bell {
  width:24px;
  height:24px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:#a89d91;

  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}


.admin-feedback-bell svg {
  width:14px;
  height:14px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.admin-feedback-bell.has-unread {
  color:#a86722;

  background:#f5e5c6;

  box-shadow:
    0 5px 15px
    rgba(166,103,31,.12);

  animation:
    adminBellRing
    3s ease-in-out infinite;
}


.admin-feedback-unread-count {
  min-width:22px;
  height:22px;

  padding:0 7px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  border-radius:999px;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #aa6a26,
      #cb933b
    );

  font-size:8px;
  font-weight:800;

  line-height:1;
}


.admin-feedback-unread-count[hidden] {
  display:none !important;
}


.admin-nav-feedback.has-unread {
  color:#704b22 !important;
}


@keyframes adminBellRing {

  0%,
  78%,
  100% {
    transform:rotate(0);
  }

  82% {
    transform:rotate(10deg);
  }

  86% {
    transform:rotate(-9deg);
  }

  90% {
    transform:rotate(6deg);
  }

  94% {
    transform:rotate(-3deg);
  }

}



/* ==========================================================
   ADMIN HOMEWORK PANEL V830
   ========================================================== */


/*
 * Не расширяем sidebar.
 * Чат сохраняет основную ширину страницы.
 */

.admin-feedback-layout {
  grid-template-columns:
    minmax(0,1fr)
    minmax(285px,310px)
    !important;

  gap:20px !important;
}


.admin-homework-panel {
  position:sticky;

  top:24px;

  padding:20px !important;

  border:
    1px solid rgba(145,98,48,.10)
    !important;

  border-radius:22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,254,251,.97),
      rgba(249,245,239,.92)
    )
    !important;

  box-shadow:
    0 20px 50px
    rgba(64,44,25,.055)
    !important;
}


/* HEADER */

.admin-homework-head {
  margin-bottom:17px;

  padding-bottom:15px;

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  border-bottom:
    1px solid rgba(145,98,48,.09);
}


.admin-homework-kicker {
  display:block;

  margin-bottom:6px;

  color:#ad702d;

  font-size:7px;
  font-weight:700;

  letter-spacing:.13em;
}


.admin-homework-head h2 {
  margin:0 !important;

  color:#3d332b;

  font-family:Georgia,serif;

  font-size:23px !important;

  font-weight:400;
}


.admin-homework-count {
  min-width:29px;
  height:29px;

  padding:0 8px;

  display:grid;

  place-items:center;

  border-radius:999px;

  color:#9d672a;

  background:#f5e8d4;

  font-size:9px;
  font-weight:700;
}


/* LIST */

.admin-homework-list {
  display:grid;

  gap:11px;
}


.admin-homework-card {
  padding:14px !important;

  border:
    1px solid rgba(145,98,48,.09)
    !important;

  border-radius:15px;

  background:
    rgba(255,255,255,.75);

  box-shadow:
    0 8px 22px
    rgba(53,37,22,.025);
}


/* CARD HEADER */

.admin-homework-card-top {
  display:grid;

  grid-template-columns:
    28px
    minmax(0,1fr);

  gap:9px;

  align-items:start;
}


.admin-homework-number {
  width:28px;
  height:28px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:#a96e2c;

  background:#f8eee0;

  font-size:8px;
  font-weight:700;
}


.admin-homework-title {
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:5px;
}


.admin-homework-title strong {
  overflow:hidden;

  color:#463b32;

  font-size:11px;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.admin-homework-title time {
  display:flex;

  align-items:center;

  gap:4px;

  color:#9a8e83;

  font-size:8px;

  font-variant-numeric:
    tabular-nums;
}


/* FILE */

.admin-homework-file {
  margin-top:12px;

  padding:10px;

  display:grid;

  grid-template-columns:
    38px
    minmax(0,1fr);

  gap:9px;

  align-items:center;

  border-radius:11px;

  background:#faf6ef;
}


.admin-homework-file-icon {
  width:38px;
  height:34px;

  display:grid;

  place-items:center;

  border-radius:8px;

  color:#9f6527;

  background:#f2e3cb;

  font-size:7px;
  font-weight:800;

  letter-spacing:.04em;
}


.admin-homework-file-name {
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:3px;
}


.admin-homework-file-name > span {
  color:#a0958b;

  font-size:7px;
}


.admin-homework-file-name strong {
  overflow:hidden;

  color:#62564c;

  font-size:9px;
  font-weight:600;

  text-overflow:ellipsis;

  white-space:nowrap;
}


/* COMMENT */

.admin-homework-comment {
  margin-top:10px;

  padding:10px 11px;

  border-left:
    2px solid rgba(177,114,42,.35);

  border-radius:
    0 9px 9px 0;

  background:
    rgba(247,241,231,.74);
}


.admin-homework-comment > span {
  display:block;

  margin-bottom:5px;

  color:#a0958a;

  font-size:7px;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.07em;
}


.admin-homework-comment p {
  margin:0 !important;

  color:#65594e;

  font-size:9px;

  line-height:1.55;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
}


/* DOWNLOAD */

.admin-homework-download {
  width:100%;

  min-height:39px;

  margin-top:11px;

  padding:0 12px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  border:
    1px solid rgba(169,108,40,.13);

  border-radius:10px;

  color:#fff !important;

  background:
    linear-gradient(
      145deg,
      #ae712d,
      #c7903c
    );

  box-shadow:
    0 8px 18px
    rgba(163,101,31,.11);

  font-size:9px;

  font-weight:700;

  text-decoration:none !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}


.admin-homework-download:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 11px 23px
    rgba(163,101,31,.16);
}


/* EMPTY */

.admin-homework-empty {
  min-height:140px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:8px;

  color:#a0968d;

  text-align:center;
}


.admin-homework-empty > span {
  color:#bd813a;

  font-size:22px;
}


.admin-homework-empty p {
  margin:0;

  font-size:10px;
}


/* ----------------------------------------------------------
   TABLET / MOBILE
   ---------------------------------------------------------- */

@media(max-width:1050px) {

  .admin-feedback-layout {
    grid-template-columns:
      minmax(0,1fr)
      280px
      !important;
  }

}


@media(max-width:850px) {

  .admin-feedback-layout {
    grid-template-columns:
      1fr
      !important;
  }


  .admin-homework-panel {
    position:static;

    order:2;
  }

}



/* ==========================================================
   ADMIN HOMEWORK PANEL WIDER V831
   ========================================================== */

.admin-feedback-layout {
  grid-template-columns:
    minmax(0,1fr)
    minmax(350px,390px)
    !important;

  gap:24px !important;
}


.admin-homework-panel {
  padding:22px !important;
}


.admin-homework-card {
  padding:16px !important;
}


.admin-homework-title strong {
  font-size:12px !important;
}


.admin-homework-title time {
  font-size:8.5px !important;
}


.admin-homework-file {
  grid-template-columns:
    42px
    minmax(0,1fr)
    !important;

  padding:11px !important;
}


.admin-homework-file-icon {
  width:42px !important;
  height:38px !important;
}


.admin-homework-file-name strong {
  font-size:10px !important;
}


.admin-homework-comment p {
  font-size:10px !important;

  line-height:1.6 !important;
}


.admin-homework-download {
  min-height:42px !important;

  font-size:9.5px !important;
}


/* средние экраны */

@media(max-width:1200px) {

  .admin-feedback-layout {
    grid-template-columns:
      minmax(0,1fr)
      minmax(320px,350px)
      !important;
  }

}


/* планшет */

@media(max-width:950px) {

  .admin-feedback-layout {
    grid-template-columns:
      1fr
      !important;
  }

  .admin-homework-panel {
    position:static !important;
  }

}



/* ==========================================================
   USERS + BROADCAST UI V840
   ========================================================== */


/* ----------------------------------------------------------
   CSV BUTTON
   ---------------------------------------------------------- */

#users .admin-users-export {

  min-width:152px;
  min-height:46px;

  padding:0 20px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  border:
    1px solid rgba(159,100,31,.14)
    !important;

  border-radius:14px !important;

  color:#fff !important;

  background:
    linear-gradient(
      145deg,
      #ad702b,
      #c9913d
    )
    !important;

  box-shadow:
    0 12px 28px
    rgba(157,94,25,.14)
    !important;

  font-size:10px !important;
  font-weight:700 !important;

  line-height:1 !important;

  text-align:center;

  text-decoration:none !important;

  white-space:nowrap;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}


#users .admin-users-export:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 16px 34px
    rgba(157,94,25,.19)
    !important;

  filter:
    brightness(1.025);
}


/* ----------------------------------------------------------
   USERS SEARCH
   ---------------------------------------------------------- */

#users .admin-users-search {

  min-width:0;
}


#users .admin-users-search input {

  font-size:13px !important;
}


#users .admin-users-found {

  min-width:100px;

  text-align:right;
}


/* ----------------------------------------------------------
   BROADCAST — FULL WIDTH
   ---------------------------------------------------------- */

/*
 * После удаления правого списка пользователей
 * старый layout всё ещё может оставаться
 * двухколоночным. Принудительно превращаем
 * внутренние сетки Рассылки в одну колонку.
 */

#broadcast .admin-grid,
#broadcast .admin-two-col,
#broadcast .admin-two-column,
#broadcast .admin-split,
#broadcast .admin-broadcast-grid,
#broadcast .admin-section-grid {

  grid-template-columns:
    minmax(0,1fr)
    !important;

  width:100% !important;
}


#broadcast .admin-panel,
#broadcast form {

  width:100% !important;

  max-width:none !important;

  box-sizing:border-box;
}


/*
 * На текущей странице форма визуально слишком узкая.
 * Даём ей полноценный внутренний контейнер.
 */

#broadcast .admin-panel {

  padding:26px 28px !important;

  border:
    1px solid rgba(153,104,50,.10)
    !important;

  border-radius:20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,254,251,.96),
      rgba(250,246,240,.88)
    )
    !important;

  box-shadow:
    0 15px 42px
    rgba(62,43,25,.04)
    !important;
}


/* поля рассылки */

#broadcast label {

  display:block;

  width:100%;
}


#broadcast label > span {

  display:block;

  margin-bottom:7px;

  color:#94877b;

  font-size:9px;
  font-weight:600;

  letter-spacing:.055em;

  text-transform:uppercase;
}


#broadcast input,
#broadcast select,
#broadcast textarea {

  width:100% !important;

  box-sizing:border-box;

  border-radius:13px !important;
}


#broadcast input,
#broadcast select {

  min-height:48px !important;
}


#broadcast textarea {

  min-height:190px !important;

  padding:15px !important;

  line-height:1.6;
}


/*
 * Если форма использует admin-stack —
 * увеличим ритм между элементами.
 */

#broadcast .admin-stack {

  gap:14px !important;
}


/* нижняя панель */

#broadcast .admin-form-footer,
#broadcast .admin-panel-footer {

  width:100%;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;
}


#broadcast button.admin-button {

  min-width:210px;

  min-height:46px;

  margin-left:auto;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:13px !important;
}


/* ----------------------------------------------------------
   USERS TABLE — READABILITY
   ---------------------------------------------------------- */

#users .admin-users-table td {

  padding-top:17px !important;
  padding-bottom:17px !important;
}


#users .admin-users-person-copy strong {

  font-size:12px !important;
}


#users .admin-users-person-copy span {

  margin-top:2px;

  font-size:10px !important;
}


#users .admin-users-phone,
#users .admin-users-date {

  font-size:10px !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:760px) {

  #users .admin-users-export {

    width:100%;

  }


  #users .admin-users-found {

    text-align:left;

  }


  #broadcast .admin-panel {

    padding:18px !important;

  }


  #broadcast button.admin-button {

    width:100%;

    min-width:0;

  }

}



/* ==========================================================
   BROADCAST SPACING V841
   ========================================================== */

#broadcast .admin-panel {
  padding:
    30px 32px
    28px
    !important;
}


/*
 * Основной вертикальный ритм формы.
 */

#broadcast .admin-stack {
  display:flex !important;

  flex-direction:column !important;

  gap:0 !important;
}


/*
 * Каждое поле получает собственное пространство.
 */

#broadcast .admin-stack > label {
  display:block !important;

  margin:
    0 0 20px
    !important;
}


#broadcast .admin-stack > label > span {
  margin-bottom:
    9px
    !important;

  line-height:1.2;
}


/*
 * Поля немного выше и легче читаются.
 */

#broadcast input,
#broadcast select {
  min-height:
    50px
    !important;

  padding-left:
    15px
    !important;

  padding-right:
    46px
    !important;
}


#broadcast textarea {
  min-height:
    205px
    !important;

  padding:
    16px
    !important;
}


/*
 * Между темой и большим текстовым полем
 * чуть больше воздуха.
 */

#broadcast label:has(textarea) {
  margin-top:
    2px
    !important;

  margin-bottom:
    24px
    !important;
}


/*
 * Нижняя часть формы отделена от полей.
 */

#broadcast .admin-form-footer,
#broadcast .admin-panel-footer {

  margin-top:
    4px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(148,101,51,.10);
}


/*
 * Если текущая разметка footer не имеет
 * отдельного класса — визуально отделяем
 * последнюю строку формы.
 */

#broadcast .admin-stack > div:last-child {
  margin-top:
    4px;
}


/*
 * Кнопка не должна прилипать к textarea.
 */

#broadcast button.admin-button {
  min-height:
    48px !important;

  padding:
    0 28px !important;
}


/* desktop */

@media(min-width:1200px) {

  #broadcast .admin-panel {
    padding:
      32px 36px
      30px
      !important;
  }

}


/* mobile */

@media(max-width:700px) {

  #broadcast .admin-panel {
    padding:
      20px
      !important;
  }


  #broadcast .admin-stack > label {
    margin-bottom:
      17px
      !important;
  }

}



/* ==========================================================
   GAME / COURSE SPLIT V850
   ========================================================== */

.admin-edit-course.admin-product-course {
  border-color:
    rgba(166,113,47,.15)
    !important;
}

.admin-edit-course.admin-product-game {
  border-color:
    rgba(185,133,64,.13)
    !important;
}

.admin-product-overview {
  margin:0 22px 18px;

  padding:13px;

  display:grid;

  grid-template-columns:
    minmax(125px,.9fr)
    repeat(3,minmax(95px,.72fr))
    minmax(160px,1.15fr)
    minmax(125px,.85fr);

  align-items:stretch;

  gap:9px;

  border:
    1px solid
    rgba(151,102,49,.09);

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(253,250,245,.85),
      rgba(248,241,230,.58)
    );
}

.admin-product-kind,
.admin-product-metric {
  min-width:0;

  padding:10px 11px;

  border-radius:12px;

  background:
    rgba(255,255,255,.60);
}

.admin-product-kind {
  display:flex;

  align-items:center;

  gap:9px;
}

.admin-product-kind-icon {
  width:31px;
  height:31px;

  flex:0 0 31px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:#ae702c;

  background:#f7ead5;

  font-size:14px;
}

.admin-product-kind > div {
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:3px;
}

.admin-product-kind small,
.admin-product-metric small {
  color:#9a8e83;

  font-size:7px;

  font-weight:600;

  letter-spacing:.04em;

  text-transform:uppercase;
}

.admin-product-kind strong {
  color:#493d33;

  font-family:Georgia,serif;

  font-size:15px;

  font-weight:400;
}

.admin-product-metric {
  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:6px;
}

.admin-product-metric > strong {
  color:#42372f;

  font-size:17px;

  font-weight:500;

  line-height:1.15;
}

.admin-product-metric > strong span {
  color:#95897e;

  font-size:8px;

  font-weight:500;
}

.admin-product-text-value {
  overflow:hidden;

  font-size:10px !important;

  line-height:1.35 !important;

  text-overflow:ellipsis;
}

.admin-product-date-value {
  font-size:10px !important;

  line-height:1.35 !important;

  white-space:nowrap;
}

.admin-product-participants {
  color:#a06a29;

  font-size:7px;
}

.admin-product-action {
  min-width:0;

  min-height:54px;

  padding:0 13px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  border:
    1px solid
    rgba(169,109,42,.13);

  border-radius:12px;

  color:#9d6627 !important;

  background:
    rgba(255,252,246,.76);

  font-size:8px;

  font-weight:700;

  line-height:1.25;

  text-decoration:none !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.admin-product-action:hover {
  transform:translateY(-1px);

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 8px 20px
    rgba(116,75,29,.07);
}

.admin-product-action span {
  font-size:13px;
}

@media(max-width:1200px) {

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

}

@media(max-width:760px) {

  .admin-product-overview {
    margin:0 12px 14px;

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

  .admin-product-kind,
  .admin-product-next-date,
  .admin-product-action {
    grid-column:1 / -1;
  }

}



/* ==========================================================
   GAME / COURSE READABILITY V851
   ========================================================== */


/* Общий блок теперь немного выше и просторнее */

.admin-product-overview {

  margin:
    0 22px 20px
    !important;

  padding:
    16px
    !important;

  gap:
    11px
    !important;

  border-radius:
    18px
    !important;
}


/* Каждая ячейка */

.admin-product-kind,
.admin-product-metric {

  min-height:
    66px;

  padding:
    13px 14px
    !important;

  box-sizing:
    border-box;
}


/* Тип программы */

.admin-product-kind {

  gap:
    11px
    !important;
}


.admin-product-kind-icon {

  width:
    38px
    !important;

  height:
    38px
    !important;

  flex:
    0 0 38px
    !important;

  font-size:
    17px
    !important;
}


/* маленькие заголовки */

.admin-product-kind small,
.admin-product-metric small {

  font-size:
    9px
    !important;

  line-height:
    1.25;

  letter-spacing:
    .035em
    !important;
}


/* Курс / Игра */

.admin-product-kind strong {

  font-size:
    18px
    !important;

  line-height:
    1.15;
}


/* 90 мин, 21 дн, 2 даты */

.admin-product-metric > strong {

  font-size:
    21px
    !important;

  line-height:
    1.15
    !important;
}


.admin-product-metric > strong span {

  margin-left:
    2px;

  font-size:
    10px
    !important;
}


/* Индивидуальный / Базовый */

.admin-product-text-value {

  font-size:
    13px
    !important;

  line-height:
    1.35
    !important;
}


/* дата */

.admin-product-date-value {

  font-size:
    12px
    !important;

  line-height:
    1.4
    !important;
}


/* 1 / 6 подтвердили */

.admin-product-participants {

  margin-top:
    1px;

  font-size:
    9px
    !important;

  line-height:
    1.3;
}


/* Кнопки Материалы / Даты */

.admin-product-action {

  min-height:
    66px
    !important;

  padding:
    0 16px
    !important;

  font-size:
    10px
    !important;

  line-height:
    1.35
    !important;

  border-radius:
    13px
    !important;
}


.admin-product-action span {

  font-size:
    17px
    !important;
}


/* Сам заголовок редактирования тоже чуть крупнее */

.admin-course-details > summary {

  min-height:
    52px;

  display:flex;

  align-items:center;

  padding-left:
    22px;

  padding-right:
    22px;

  font-size:
    11px
    !important;
}


/* Верхняя карточка программы */

.admin-course-title {

  font-size:
    24px
    !important;

  line-height:
    1.15
    !important;
}


/*
 * На больших мониторах не пытаемся
 * запихнуть всё слишком плотно.
 */

@media(min-width:1450px) {

  .admin-product-overview {

    grid-template-columns:
      minmax(150px,.95fr)
      minmax(130px,.8fr)
      minmax(130px,.8fr)
      minmax(130px,.8fr)
      minmax(210px,1.2fr)
      minmax(170px,.9fr)
      !important;

  }

}


/* Средний экран */

@media(max-width:1250px) {

  .admin-product-overview {

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      )
      !important;

  }


  .admin-product-action {

    min-height:
      58px
      !important;

  }

}


/* Телефон */

@media(max-width:760px) {

  .admin-product-overview {

    margin:
      0 12px 15px
      !important;

    padding:
      11px
      !important;

    grid-template-columns:
      1fr
      1fr
      !important;

  }


  .admin-product-kind,
  .admin-product-next-date,
  .admin-product-action {

    grid-column:
      1 / -1;

  }


  .admin-product-kind small,
  .admin-product-metric small {

    font-size:
      8px
      !important;

  }


  .admin-product-metric > strong {

    font-size:
      18px
      !important;

  }

}



/* ==========================================================
   PRODUCT EDIT FORM SPLIT V860
   ========================================================== */


/* ----------------------------------------------------------
   FORM BODY
   ---------------------------------------------------------- */

.admin-course-details[open] {

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.28),
      rgba(250,245,236,.34)
    );
}


.admin-course-details form[
  action^="/admin/courses/"
] {

  padding:
    4px 22px 22px;
}


/* ----------------------------------------------------------
   MAIN GRID
   ---------------------------------------------------------- */

.admin-course-details
.admin-form-grid {

  gap:
    17px 16px
    !important;
}


/* ----------------------------------------------------------
   SECTION HEADINGS
   ---------------------------------------------------------- */

.admin-edit-section-title {

  grid-column:
    1 / -1;

  min-height:
    62px;

  margin:
    9px 0 2px;

  padding:
    12px 15px;

  display:flex;

  align-items:center;

  gap:
    12px;

  border:
    1px solid
    rgba(157,107,49,.10);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.86),
      rgba(248,241,230,.60)
    );
}


.admin-edit-section-number {

  width:
    35px;

  height:
    35px;

  flex:
    0 0 35px;

  display:grid;

  place-items:center;

  border-radius:
    50%;

  color:
    #ad702c;

  background:
    #f5e6cc;

  font-size:
    9px;

  font-weight:
    800;
}


.admin-edit-section-title > div:last-child {

  display:flex;

  flex-direction:column;

  gap:
    4px;
}


.admin-edit-section-title strong {

  color:
    #46392f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    18px;

  font-weight:
    400;
}


.admin-edit-section-title span {

  color:
    #988b7f;

  font-size:
    9px;

  line-height:
    1.4;
}


/* ----------------------------------------------------------
   COURSE IDENTIFIER
   ---------------------------------------------------------- */

.admin-edit-section-course {

  border-color:
    rgba(174,113,41,.14);

  background:
    linear-gradient(
      145deg,
      rgba(255,253,248,.92),
      rgba(246,235,216,.76)
    );
}


/* ----------------------------------------------------------
   GAME IDENTIFIER
   ---------------------------------------------------------- */

.admin-edit-section-game {

  border-color:
    rgba(190,133,53,.13);

  background:
    linear-gradient(
      145deg,
      rgba(255,253,248,.92),
      rgba(250,241,224,.72)
    );
}


/* ----------------------------------------------------------
   LABELS
   ---------------------------------------------------------- */

.admin-course-details
.admin-form-grid > label {

  margin:
    0 !important;

  padding:
    13px 14px;

  border:
    1px solid
    rgba(143,103,61,.09);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.46);

  box-sizing:
    border-box;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.admin-course-details
.admin-form-grid > label:focus-within {

  border-color:
    rgba(184,120,40,.27);

  background:
    rgba(255,255,255,.80);

  box-shadow:
    0 7px 18px
    rgba(103,69,31,.045);
}


/* labels text */

.admin-course-details
.admin-form-grid
label > span {

  display:block;

  margin-bottom:
    8px;

  color:
    #8d8176;

  font-size:
    9px
    !important;

  font-weight:
    650;

  line-height:
    1.3;

  letter-spacing:
    .045em;

  text-transform:
    uppercase;
}


/* controls */

.admin-course-details
.admin-form-grid
input,

.admin-course-details
.admin-form-grid
select {

  min-height:
    48px
    !important;

  font-size:
    12px
    !important;
}


/* ----------------------------------------------------------
   COURSE FIELDS
   ---------------------------------------------------------- */

.admin-course-details
.course-only-field {

  border-left:
    3px solid
    rgba(176,113,40,.40)
    !important;
}


/* ----------------------------------------------------------
   GAME FIELDS
   ---------------------------------------------------------- */

.admin-course-details
.game-only-field {

  border-left:
    3px solid
    rgba(196,139,59,.34)
    !important;
}


/* hidden fields remain truly hidden */

.admin-course-details
.game-only-field[hidden],

.admin-course-details
.course-only-field[hidden] {

  display:
    none !important;
}


/* ----------------------------------------------------------
   DESCRIPTION
   ---------------------------------------------------------- */

.admin-course-details
.admin-textarea-label {

  margin-top:
    18px
    !important;

  padding:
    15px
    !important;

  border:
    1px solid
    rgba(143,103,61,.10);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.48);
}


.admin-course-details
.admin-textarea-label > span {

  display:block;

  margin-bottom:
    9px;

  color:
    #8d8176;

  font-size:
    9px;

  font-weight:
    650;

  letter-spacing:
    .045em;

  text-transform:
    uppercase;
}


.admin-course-details
.admin-textarea-label textarea {

  min-height:
    135px
    !important;

  padding:
    14px
    !important;

  box-sizing:
    border-box;

  font-size:
    12px
    !important;

  line-height:
    1.6;
}


/* ----------------------------------------------------------
   SAVE AREA
   ---------------------------------------------------------- */

.admin-course-details
.admin-panel-footer {

  margin-top:
    20px;

  padding-top:
    18px;

  border-top:
    1px solid
    rgba(143,103,61,.10);
}


.admin-course-details
.admin-panel-footer
.admin-button {

  min-width:
    210px;

  min-height:
    48px;
}


/* ----------------------------------------------------------
   DELETE AREA
   ---------------------------------------------------------- */

.admin-course-delete {

  margin:
    0 22px 22px;

  padding-top:
    14px;

  border-top:
    1px solid
    rgba(155,104,49,.08);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:760px) {

  .admin-course-details form[
    action^="/admin/courses/"
  ] {

    padding:
      4px 12px 16px;

  }


  .admin-edit-section-title {

    min-height:
      56px;

    padding:
      10px 12px;

  }


  .admin-edit-section-title strong {

    font-size:
      16px;

  }


  .admin-course-details
  .admin-form-grid {

    grid-template-columns:
      1fr
      !important;

  }


  .admin-course-details
  .admin-panel-footer
  .admin-button {

    width:
      100%;

    min-width:
      0;

  }

}



/* ==========================================================
   EDIT FORM CLEANUP V861
   remove accidental gold vertical field stripes
   ========================================================== */

.admin-course-details
.admin-form-grid > label,

.admin-course-details
.game-only-field,

.admin-course-details
.course-only-field,

.admin-course-details
.product-kind-field,

.admin-course-details
.course-days-field {

  border-left-width:1px !important;

  border-left-style:solid !important;

  border-left-color:
    rgba(143,103,61,.09)
    !important;
}


/*
 * На screenshot золотая полоса идёт внутри ряда.
 * Убираем также возможные псевдоэлементы.
 */

.admin-course-details
.admin-form-grid > label::before,

.admin-course-details
.admin-form-grid > label::after,

.admin-course-details
.game-only-field::before,

.admin-course-details
.course-only-field::before {

  border-left:0 !important;

  box-shadow:none !important;
}


/*
 * Поле остаётся визуально выделенным только
 * мягкой рамкой при фокусе — без вертикальной полосы.
 */

.admin-course-details
.admin-form-grid > label:focus-within {

  border:
    1px solid
    rgba(183,121,43,.25)
    !important;

  box-shadow:
    0 7px 20px
    rgba(103,69,31,.045)
    !important;
}



/* ==========================================================
   DELETE PRODUCT BUTTON V861
   ========================================================== */


/*
 * Нижняя зона удаления.
 */

.admin-course-delete {

  margin:
    0 22px 22px
    !important;

  padding:
    18px 0 0
    !important;

  border-top:
    1px solid
    rgba(123,83,47,.09)
    !important;
}


/*
 * Поддерживаем разные возможные классы,
 * существовавшие в проекте в разные моменты.
 */

.admin-course-delete
.admin-danger-button,

.admin-course-delete
button,

.admin-course-delete
a {

  min-width:
    158px;

  min-height:
    44px;

  padding:
    0 18px
    !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px;

  border:
    1px solid
    rgba(181,55,55,.22)
    !important;

  border-radius:
    12px
    !important;

  color:
    #b33d3d
    !important;

  background:
    rgba(189,61,61,.065)
    !important;

  box-shadow:
    none
    !important;

  font-size:
    10px
    !important;

  font-weight:
    700
    !important;

  line-height:
    1
    !important;

  text-align:
    center
    !important;

  text-decoration:
    none
    !important;

  cursor:
    pointer;

  opacity:
    1
    !important;

  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}


/*
 * Hover становится явно красным,
 * но остаётся в премиальном стиле сайта.
 */

.admin-course-delete
.admin-danger-button:hover,

.admin-course-delete
button:hover,

.admin-course-delete
a:hover {

  color:
    #fff
    !important;

  background:
    linear-gradient(
      145deg,
      #b94444,
      #9f3434
    )
    !important;

  border-color:
    rgba(150,42,42,.40)
    !important;

  box-shadow:
    0 10px 24px
    rgba(153,42,42,.16)
    !important;

  transform:
    translateY(-1px);
}


/*
 * Нажатие.
 */

.admin-course-delete
.admin-danger-button:active,

.admin-course-delete
button:active,

.admin-course-delete
a:active {

  transform:
    translateY(0);

  box-shadow:
    0 4px 10px
    rgba(153,42,42,.12)
    !important;
}


/*
 * Если старая тема делала кнопку слишком бледной.
 */

.admin-course-delete
.admin-danger-button:disabled,

.admin-course-delete
button:disabled {

  opacity:
    .45
    !important;

  cursor:
    not-allowed;
}


/* Mobile */

@media(max-width:760px) {

  .admin-course-delete {

    margin:
      0 12px 16px
      !important;

  }


  .admin-course-delete
  .admin-danger-button,

  .admin-course-delete
  button,

  .admin-course-delete
  a {

    width:
      100%;

  }

}



/* ==========================================================
   CREATE GAME / COURSE — PREMIUM SPLIT V3
   ========================================================== */

.admin-create-course[data-create-product-form] {
  position: relative;
  overflow: hidden;
  padding: 30px;
}

.admin-create-course[data-create-product-form]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(191, 132, 43, .07),
      transparent 34%
    );
}

.admin-create-course[data-create-product-form] > * {
  position: relative;
  z-index: 1;
}


/* ---------- grid ---------- */

.admin-create-course[data-create-product-form]
.admin-form-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
  align-items: start;
}


/* ---------- labels ---------- */

.admin-create-course[data-create-product-form]
.admin-form-grid > label {
  min-width: 0;
}

.admin-create-course[data-create-product-form]
label > span {
  display: block;
  margin-bottom: 8px;
}


/* ---------- product kind ---------- */

.admin-create-course[data-create-product-form]
.product-kind-field {
  grid-column: span 1;
}

.admin-create-course[data-create-product-form]
.product-kind-help {
  display: block;
  margin-top: 8px;
  line-height: 1.45;
  opacity: .66;
}


/* ---------- description ---------- */

.admin-create-course[data-create-product-form]
[data-create-description-field] {
  display: block;
  margin-top: 26px;
}

.admin-create-course[data-create-product-form]
[data-create-description-field] textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.65;
}


/* ---------- footer ---------- */

.admin-create-course[data-create-product-form]
.admin-panel-footer {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid
    rgba(143, 102, 48, .14);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.admin-create-course[data-create-product-form]
[data-create-product-footer] {
  max-width: 650px;
  line-height: 1.55;
  opacity: .7;
}

.admin-create-course[data-create-product-form]
[data-create-product-submit] {
  min-width: 190px;
  flex: 0 0 auto;
}


/* ---------- visual mode ---------- */

.admin-create-course.is-create-game
.product-kind-field select {
  border-color:
    rgba(190, 126, 34, .28);
}

.admin-create-course.is-create-course
.product-kind-field select {
  border-color:
    rgba(190, 126, 34, .28);
}


/* hidden must always win */

.admin-create-course[data-create-product-form]
[hidden] {
  display: none !important;
}


/* ---------- responsive ---------- */

@media (max-width: 1180px) {

  .admin-create-course[data-create-product-form]
  .admin-form-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 720px) {

  .admin-create-course[data-create-product-form] {
    padding: 20px;
  }

  .admin-create-course[data-create-product-form]
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-create-course[data-create-product-form]
  .admin-panel-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-create-course[data-create-product-form]
  [data-create-product-submit] {
    width: 100%;
  }

}


/* ==========================================================
   ACCOUNT COURSE / GAME SPLIT V880
   ========================================================== */


/* summary */

.account-product-summary {

  max-width:560px;

  margin:
    0 auto 28px;

  padding:
    14px 20px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:22px;

  border:
    1px solid
    rgba(151,102,49,.10);

  border-radius:
    999px;

  background:
    rgba(255,253,249,.76);

  box-shadow:
    0 12px 30px
    rgba(61,43,25,.035);
}


.account-summary-item {

  display:flex;

  align-items:center;

  gap:10px;
}


.account-summary-item span {

  color:#8e8175;

  font-size:10px;

  font-weight:600;
}


.account-summary-item strong {

  min-width:28px;
  height:28px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:#9d6628;

  background:#f4e5cf;

  font-size:10px;
}


.account-summary-divider {

  width:1px;
  height:22px;

  background:
    rgba(146,101,53,.13);
}


/* grid */

.account-products-grid {

  gap:
    24px
    !important;

  align-items:
    stretch;
}


/* common card */

.account-product-card {

  position:relative;

  min-height:
    340px;

  padding:
    28px
    !important;

  display:flex;

  flex-direction:column;

  overflow:hidden;

  border-radius:
    24px
    !important;

  box-shadow:
    0 20px 48px
    rgba(64,44,25,.055)
    !important;

  transition:
    transform .20s ease,
    box-shadow .20s ease;
}


.account-product-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 26px 58px
    rgba(64,44,25,.075)
    !important;
}


/* course */

.account-product-course {

  border:
    1px solid
    rgba(165,110,44,.16)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,254,251,.97),
      rgba(247,239,226,.90)
    )
    !important;
}


/* game */

.account-product-game {

  border:
    1px solid
    rgba(176,126,59,.13)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,254,251,.97),
      rgba(250,243,231,.91)
    )
    !important;
}


/* top */

.account-product-top {

  margin-bottom:
    20px;
}


.account-product-card
.account-product-kind {

  min-height:
    30px;

  padding:
    0 11px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(168,109,41,.13);

  border-radius:
    999px;

  color:#9f6626;

  background:
    rgba(249,235,213,.86);

  font-size:
    9px
    !important;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.account-product-course
.account-product-kind::before {

  content:"◇";

  margin-right:
    6px;
}


.account-product-game
.account-product-kind::before {

  content:"○";

  margin-right:
    6px;
}


/* title */

.account-product-card > h2 {

  margin:
    0 0 14px
    !important;

  color:#3d332b;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    28px
    !important;

  font-weight:
    400;

  line-height:
    1.16;
}


/* description */

.account-product-card > p {

  margin:
    0 0 22px
    !important;

  color:#74685d;

  font-size:
    12px
    !important;

  line-height:
    1.65;
}


/* meta */

.account-course-meta {

  margin-top:auto;

  padding:
    15px 16px
    !important;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  border:
    1px solid
    rgba(148,102,51,.09);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.58);
}


.account-course-meta span {

  color:#998c80;

  font-size:
    9px
    !important;
}


.account-course-meta strong {

  color:#4b4037;

  font-size:
    12px
    !important;

  text-align:right;
}


/* course CTA */

.account-open-course {

  min-height:
    50px;

  margin-top:
    13px;

  padding:
    0 17px
    !important;

  display:flex !important;

  align-items:center;
  justify-content:space-between;

  border-radius:
    13px;

  color:#fff !important;

  background:
    linear-gradient(
      145deg,
      #ab6d2a,
      #c68d3a
    )
    !important;

  box-shadow:
    0 11px 25px
    rgba(157,95,28,.13);

  font-size:
    10px
    !important;

  font-weight:
    700;

  text-decoration:
    none !important;
}


.account-open-course:hover {

  transform:
    translateY(-1px);
}


/* responsive */

@media(max-width:760px) {

  .account-product-summary {

    margin-bottom:
      20px;

    padding:
      12px 15px;

    gap:
      13px;

  }


  .account-product-card {

    min-height:
      0;

    padding:
      21px
      !important;

  }


  .account-product-card > h2 {

    font-size:
      23px
      !important;

  }

}



/* =========================================================
   AG COURSE WORKSPACE V890
   ========================================================= */

.ag-course-workspace {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 34px;
}

.ag-course-sidebar {
  position: sticky;
  top: 112px;

  display: flex;
  flex-direction: column;

  min-height: 520px;

  padding: 20px 16px;

  border: 1px solid rgba(181, 128, 53, .16);
  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 248, .98),
      rgba(250, 245, 235, .92)
    );

  box-shadow:
    0 18px 50px rgba(88, 61, 29, .07);
}

.ag-course-sidebar-head {
  padding: 8px 12px 20px;
  margin-bottom: 8px;

  border-bottom:
    1px solid rgba(181, 128, 53, .13);
}

.ag-course-sidebar-kicker {
  display: block;

  margin-bottom: 9px;

  color: #b27324;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

.ag-course-sidebar-head strong {
  display: block;

  color: #3c3229;

  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

.ag-course-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;

  margin-top: 8px;
}

.ag-course-nav-item {
  position: relative;

  width: 100%;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 13px 12px;

  border: 1px solid transparent;
  border-radius: 15px;

  background: transparent;

  color: #756c63;

  text-align: left;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.ag-course-nav-item:hover {
  background: rgba(190, 135, 55, .07);
  color: #5e4123;
}

.ag-course-nav-item.is-active {
  background:
    linear-gradient(
      135deg,
      #f4e5c4,
      #f0ddb6
    );

  border-color:
    rgba(183, 124, 38, .10);

  color: #9a601d;
}

.ag-course-nav-item.is-active::before {
  content: "";

  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;

  width: 3px;

  border-radius: 10px;

  background: #c98525;
}

.ag-course-nav-icon {
  position: relative;

  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(184, 127, 45, .15);
  border-radius: 50%;

  background:
    rgba(255, 253, 248, .75);

  color: #ad7129;

  font-size: 10px;
  font-weight: 700;
}

.ag-course-nav-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ag-course-nav-copy strong {
  color: inherit;

  font-size: 13px;
  font-weight: 600;
}

.ag-course-nav-copy small {
  overflow: hidden;

  color: #9b9186;

  font-size: 10px;
  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-course-feedback-icon {
  overflow: visible;
}

.ag-course-unread {
  position: absolute;
  top: -7px;
  right: -7px;

  min-width: 18px;
  height: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 5px;

  border: 2px solid #fbf8f1;
  border-radius: 999px;

  background: #c98122;
  color: #fff;

  box-shadow:
    0 5px 14px rgba(174, 105, 23, .25);

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.ag-course-unread[hidden] {
  display: none !important;
}

.ag-course-sidebar-back {
  margin-top: auto;

  padding: 18px 12px 6px;

  border-top:
    1px solid rgba(181, 128, 53, .13);

  color: #9b8e80;

  font-size: 11px;
  text-decoration: none;

  transition: color .2s ease;
}

.ag-course-sidebar-back:hover {
  color: #a96820;
}

.ag-course-content {
  min-width: 0;
}

.ag-course-panel {
  margin: 0 !important;
}

.ag-course-panel[hidden] {
  display: none !important;
}

.ag-course-panel.is-active {
  animation:
    agCoursePanelIn .24s ease both;
}

@keyframes agCoursePanelIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   COURSE CHAT — COMPACT PREMIUM MESSAGES
   ========================================================= */

.ag-course-content .course-chat {
  min-height: 470px;
  max-height: 600px;

  padding: 24px 22px;

  border-radius: 22px;
}

.ag-course-content .course-message {
  width: fit-content;
  max-width: min(520px, 72%);

  margin-bottom: 17px;
}

.ag-course-content .course-message.mine {
  margin-left: auto;
  margin-right: 0;
}

.ag-course-content .course-message.author {
  margin-left: 0;
  margin-right: auto;
}

.ag-course-content .course-message > p {
  width: auto;
  min-width: 110px;
  max-width: 100%;

  margin: 5px 0 4px;

  padding: 14px 17px;

  border-radius: 18px;

  font-size: 14px;
  line-height: 1.55;

  overflow-wrap: anywhere;
  word-break: normal;
}

.ag-course-content .course-message.mine > p {
  border-bottom-right-radius: 6px;
}

.ag-course-content .course-message.author > p {
  border-bottom-left-radius: 6px;
}

.ag-course-content .course-message > span {
  display: block;

  margin: 0 7px 4px;

  font-size: 9px;
  letter-spacing: .04em;
}

.ag-course-content .course-message.mine > span {
  text-align: right;
}

.ag-course-content .course-message time {
  display: block;

  margin: 4px 7px 0;

  color: #aaa097;

  font-size: 9px;
}

.ag-course-content .course-message.mine time {
  text-align: right;
}


/* Compose */

.ag-course-content .course-chat-form {
  margin-top: 14px;

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

  align-items: end;

  padding: 12px;

  border:
    1px solid rgba(177, 126, 53, .14);
  border-radius: 20px;

  background:
    rgba(255, 253, 248, .9);
}

.ag-course-content .course-chat-form textarea {
  min-height: 52px;
  max-height: 150px;

  padding: 15px 17px;

  border:
    1px solid rgba(177, 126, 53, .13);
  border-radius: 14px;

  background:
    rgba(255, 255, 255, .72);

  resize: vertical;

  font-size: 13px;
  line-height: 1.45;
}

.ag-course-content .course-chat-form .button {
  min-width: 126px;
  min-height: 52px;

  padding: 0 20px;

  border-radius: 14px;
}


/* =========================================================
   HOMEWORK
   ========================================================= */

.ag-course-content .course-homework-form {
  border-radius: 22px;
}

.ag-course-content .course-submission-history {
  margin-top: 24px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .ag-course-workspace {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
  }

  .ag-course-sidebar {
    padding: 16px 12px;
  }

}

@media (max-width: 820px) {

  .ag-course-workspace {
    display: block;
  }

  .ag-course-sidebar {
    position: static;

    min-height: 0;

    margin-bottom: 18px;
  }

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

  .ag-course-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .ag-course-nav-item {
    min-height: 70px;
  }

  .ag-course-nav-copy small {
    display: none;
  }

  .ag-course-sidebar-back {
    display: none;
  }

  .ag-course-content .course-message {
    max-width: 82%;
  }

}

@media (max-width: 620px) {

  .ag-course-nav {
    grid-template-columns: 1fr;
  }

  .ag-course-nav-item {
    min-height: auto;
  }

  .ag-course-nav-copy small {
    display: block;
  }

  .ag-course-content .course-chat {
    min-height: 420px;

    padding: 17px 13px;
  }

  .ag-course-content .course-message {
    max-width: 88%;
  }

  .ag-course-content .course-message > p {
    padding: 12px 14px;

    font-size: 13px;
  }

  .ag-course-content .course-chat-form {
    grid-template-columns: 1fr;
  }

  .ag-course-content .course-chat-form .button {
    width: 100%;
  }

}



/* =========================================================
   AG COURSE WORKSPACE POLISH V891
   ========================================================= */


/* =========================================================
   1. WORKSPACE PROPORTIONS
   ========================================================= */

.ag-course-workspace {
  grid-template-columns:
    300px
    minmax(0, 1fr)
    !important;

  gap:
    34px
    !important;
}


.ag-course-content {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}



/* =========================================================
   2. SIDEBAR
   ========================================================= */

.ag-course-sidebar {
  padding:
    22px 17px
    !important;

  border-radius:
    27px
    !important;

  box-shadow:
    0 22px 55px
    rgba(81, 55, 28, .075)
    !important;
}


.ag-course-nav {
  gap:
    10px
    !important;
}


.ag-course-nav-item {
  min-height:
    68px;

  padding:
    13px 13px
    !important;

  border-radius:
    16px
    !important;
}


.ag-course-nav-item.is-active {
  box-shadow:
    inset 0 0 0 1px
    rgba(190, 130, 42, .05);
}


.ag-course-nav-item.is-active::before {
  left:
    4px
    !important;

  top:
    12px
    !important;

  bottom:
    12px
    !important;

  width:
    4px
    !important;
}


.ag-course-nav-icon {
  width:
    36px
    !important;

  height:
    36px
    !important;

  flex-basis:
    36px
    !important;
}


.ag-course-nav-copy strong {
  font-size:
    13px
    !important;
}


.ag-course-nav-copy small {
  margin-top:
    2px;

  font-size:
    9px
    !important;
}



/* =========================================================
   3. PREMIUM "ВСЕ ПРОГРАММЫ"
   ========================================================= */

.ag-course-sidebar-back {
  position:
    relative;

  min-height:
    72px;

  margin:
    auto 0 0
    !important;

  padding:
    15px 17px
    !important;

  display:
    grid
    !important;

  grid-template-columns:
    25px 1fr;

  grid-template-rows:
    auto auto;

  column-gap:
    8px;

  align-items:
    center;

  border:
    1px solid
    rgba(183, 117, 33, .55)
    !important;

  border-radius:
    16px
    !important;

  color:
    #644526
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 248, .95),
      rgba(250, 243, 232, .88)
    );

  box-shadow:
    0 10px 25px
    rgba(96, 61, 25, .055);

  font-size:
    13px
    !important;

  font-weight:
    650;

  line-height:
    1.25;

  text-decoration:
    none
    !important;

  transition:
    transform .17s ease,
    border-color .17s ease,
    box-shadow .17s ease,
    background .17s ease;
}


.ag-course-sidebar-back > span {
  grid-column:
    1;

  grid-row:
    1 / 3;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ad6d25;

  font-size:
    18px;
}


.ag-course-sidebar-back::after {
  content:
    "Вернуться в личный кабинет";

  grid-column:
    2;

  grid-row:
    2;

  margin-top:
    3px;

  color:
    #a0968c;

  font-size:
    9px;

  font-weight:
    400;

  line-height:
    1.25;
}


.ag-course-sidebar-back:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(178, 108, 26, .78)
    !important;

  color:
    #9b601e
    !important;

  background:
    rgba(255, 253, 248, .99);

  box-shadow:
    0 14px 30px
    rgba(105, 65, 24, .09);
}



/* =========================================================
   4. FEEDBACK PANEL
   ========================================================= */

.ag-course-content
[data-course-panel="dialog"] {
  width:
    100%;

  min-width:
    0;
}


.ag-course-content
[data-course-panel="dialog"]
> .section-heading {
  max-width:
    none;
}



/* =========================================================
   5. CHAT CONTAINER
   ========================================================= */

.ag-course-content .course-chat {
  width:
    100%
    !important;

  min-height:
    500px
    !important;

  max-height:
    610px
    !important;

  padding:
    24px
    !important;

  display:
    flex
    !important;

  flex-direction:
    column
    !important;

  align-items:
    stretch
    !important;

  box-sizing:
    border-box;

  overflow-x:
    hidden;

  border-radius:
    22px
    !important;
}



/* =========================================================
   6. MESSAGE ROWS
   ========================================================= */

/*
 * Главное исправление:
 * сама строка сообщения занимает только свою ширину.
 * Сообщение автора фиксируется слева,
 * сообщение пользователя — строго справа.
 */

.ag-course-content
.course-chat
.course-message {
  flex:
    0 0 auto;

  width:
    fit-content
    !important;

  min-width:
    0
    !important;

  max-width:
    min(420px, 62%)
    !important;

  margin-top:
    0
    !important;

  margin-bottom:
    18px
    !important;

  padding:
    0
    !important;

  display:
    block
    !important;

  box-sizing:
    border-box;
}


.ag-course-content
.course-chat
.course-message.author {
  align-self:
    flex-start
    !important;

  margin-left:
    0
    !important;

  margin-right:
    auto
    !important;

  text-align:
    left;
}


.ag-course-content
.course-chat
.course-message.mine {
  align-self:
    flex-end
    !important;

  margin-left:
    auto
    !important;

  margin-right:
    0
    !important;

  text-align:
    right;
}



/* =========================================================
   7. MESSAGE LABEL
   ========================================================= */

.ag-course-content
.course-message > span {
  width:
    auto
    !important;

  margin:
    0 6px 5px
    !important;

  padding:
    0
    !important;

  display:
    block
    !important;

  color:
    #a86622;

  font-size:
    9px
    !important;

  font-weight:
    700;

  line-height:
    1.2;
}


.ag-course-content
.course-message.mine > span {
  text-align:
    right
    !important;
}


.ag-course-content
.course-message.author > span {
  text-align:
    left
    !important;
}



/* =========================================================
   8. MESSAGE BUBBLE
   ========================================================= */

.ag-course-content
.course-message > p {
  width:
    fit-content
    !important;

  min-width:
    0
    !important;

  max-width:
    100%
    !important;

  margin:
    0
    !important;

  padding:
    13px 16px
    !important;

  display:
    block;

  box-sizing:
    border-box;

  font-size:
    13px
    !important;

  line-height:
    1.5
    !important;

  text-align:
    left;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  word-break:
    normal;
}


/* Анна */

.ag-course-content
.course-message.author > p {
  margin-right:
    auto
    !important;

  border-radius:
    16px 16px 16px 6px
    !important;

  background:
    rgba(255, 255, 255, .94)
    !important;

  box-shadow:
    0 8px 22px
    rgba(62, 44, 26, .05)
    !important;
}


/* Пользователь */

.ag-course-content
.course-message.mine > p {
  margin-left:
    auto
    !important;

  border-radius:
    16px 16px 6px 16px
    !important;

  background:
    linear-gradient(
      145deg,
      #f2e2bc,
      #eedbb1
    )
    !important;

  box-shadow:
    0 8px 22px
    rgba(112, 75, 30, .055)
    !important;
}



/* =========================================================
   9. MESSAGE TIME
   ========================================================= */

.ag-course-content
.course-message time {
  width:
    auto
    !important;

  margin:
    5px 6px 0
    !important;

  display:
    block;

  color:
    #aaa198;

  font-size:
    8px
    !important;

  line-height:
    1.2;
}


.ag-course-content
.course-message.mine time {
  text-align:
    right
    !important;
}


.ag-course-content
.course-message.author time {
  text-align:
    left
    !important;
}



/* =========================================================
   10. COMPOSER
   ========================================================= */

.ag-course-content .course-chat-form {
  width:
    100%;

  min-height:
    74px;

  margin-top:
    12px
    !important;

  padding:
    10px 12px
    !important;

  display:
    grid
    !important;

  grid-template-columns:
    minmax(0, 1fr)
    46px
    !important;

  gap:
    10px
    !important;

  align-items:
    center
    !important;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(176, 122, 48, .14)
    !important;

  border-radius:
    20px
    !important;

  background:
    rgba(255, 253, 248, .93)
    !important;

  box-shadow:
    0 11px 30px
    rgba(79, 53, 26, .045);
}


.ag-course-content
.course-chat-form textarea {
  width:
    100%;

  min-height:
    48px
    !important;

  max-height:
    120px;

  margin:
    0;

  padding:
    14px 16px
    !important;

  box-sizing:
    border-box;

  border:
    0
    !important;

  border-radius:
    13px
    !important;

  outline:
    none;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  font-size:
    12px
    !important;

  line-height:
    1.45;

  resize:
    none;
}


.ag-course-content
.course-chat-form
.button {
  width:
    44px
    !important;

  min-width:
    44px
    !important;

  height:
    44px
    !important;

  min-height:
    44px
    !important;

  padding:
    0
    !important;

  display:
    grid
    !important;

  place-items:
    center;

  border-radius:
    50%
    !important;

  font-size:
    0
    !important;

  box-shadow:
    0 8px 20px
    rgba(176, 109, 27, .17);
}


.ag-course-content
.course-chat-form
.button::after {
  content:
    "➤";

  margin-left:
    2px;

  color:
    #fff;

  font-size:
    15px;

  line-height:
    1;
}



/* =========================================================
   11. EMOJI BUTTON
   ========================================================= */

.ag-course-content
.course-chat-form
.emoji-button,

.ag-course-content
.course-chat-form
[data-emoji-button] {
  align-self:
    center;

  justify-self:
    center;
}



/* =========================================================
   12. DESKTOP LARGE
   ========================================================= */

@media (min-width: 1500px) {

  .ag-course-content
  .course-chat
  .course-message {
    max-width:
      min(440px, 58%)
      !important;
  }

}



/* =========================================================
   13. TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .ag-course-workspace {
    grid-template-columns:
      250px
      minmax(0, 1fr)
      !important;

    gap:
      20px
      !important;
  }


  .ag-course-content
  .course-chat
  .course-message {
    max-width:
      min(410px, 72%)
      !important;
  }

}



/* =========================================================
   14. MOBILE
   ========================================================= */

@media (max-width: 820px) {

  .ag-course-workspace {
    display:
      block
      !important;
  }


  .ag-course-sidebar-back {
    display:
      grid
      !important;

    margin-top:
      15px
      !important;
  }


  .ag-course-content
  .course-chat
  .course-message {
    max-width:
      82%
      !important;
  }

}


@media (max-width: 620px) {

  .ag-course-content
  .course-chat {
    min-height:
      420px
      !important;

    padding:
      15px 12px
      !important;
  }


  .ag-course-content
  .course-chat
  .course-message {
    max-width:
      88%
      !important;
  }


  .ag-course-content
  .course-message > p {
    padding:
      11px 13px
      !important;

    font-size:
      12px
      !important;
  }


  .ag-course-content
  .course-chat-form {
    grid-template-columns:
      minmax(0, 1fr)
      44px
      !important;
  }

}



/* =========================================================
   AG COURSE CHAT COMPOSER V892
   Fix V891 2-column regression
   ========================================================= */


/*
 * JS добавляет:
 *
 * 1. .ag-emoji-wrap
 * 2. textarea
 * 3. .ag-chat-send
 *
 * Поэтому composer ОБЯЗАТЕЛЬНО имеет три колонки.
 */

.ag-course-content
.course-chat-form.ag-chat-compose {

  position:
    relative;

  width:
    100%;

  min-height:
    72px;

  margin:
    12px 0 0
    !important;

  padding:
    9px 11px
    !important;

  display:
    grid
    !important;

  grid-template-columns:
    44px
    minmax(0, 1fr)
    46px
    !important;

  grid-template-rows:
    minmax(50px, auto)
    !important;

  column-gap:
    9px
    !important;

  row-gap:
    0
    !important;

  align-items:
    center
    !important;

  box-sizing:
    border-box;

  overflow:
    visible;

  border:
    1px solid
    rgba(176, 122, 48, .15)
    !important;

  border-radius:
    19px
    !important;

  background:
    rgba(255, 253, 248, .96)
    !important;

  box-shadow:
    0 12px 30px
    rgba(79, 53, 26, .05)
    !important;
}



/* =========================================================
   HIDDEN CSRF MUST NOT OCCUPY GRID CELL
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
input[type="hidden"] {

  display:
    none
    !important;
}



/* =========================================================
   EMOJI — COLUMN 1
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-emoji-wrap {

  grid-column:
    1
    !important;

  grid-row:
    1
    !important;

  width:
    44px;

  height:
    44px;

  align-self:
    center;

  justify-self:
    center;

  display:
    grid;

  place-items:
    center;

  position:
    relative;

  margin:
    0
    !important;

  padding:
    0
    !important;
}


.ag-course-content
.course-chat-form.ag-chat-compose
.ag-emoji-toggle {

  width:
    40px
    !important;

  height:
    40px
    !important;

  min-width:
    40px
    !important;

  min-height:
    40px
    !important;

  margin:
    0
    !important;

  padding:
    0
    !important;

  display:
    grid
    !important;

  place-items:
    center;

  border:
    0
    !important;

  border-radius:
    50%
    !important;

  color:
    #918479
    !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  font-size:
    20px
    !important;

  line-height:
    1
    !important;
}


.ag-course-content
.course-chat-form.ag-chat-compose
.ag-emoji-toggle:hover {

  color:
    #a76b25
    !important;

  background:
    #f5ecdf
    !important;
}



/* =========================================================
   EMOJI PANEL
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-emoji-panel {

  left:
    0
    !important;

  bottom:
    52px
    !important;

  z-index:
    300;

  width:
    270px;

  max-width:
    min(270px, 80vw);

  box-sizing:
    border-box;
}



/* =========================================================
   TEXTAREA — COLUMN 2
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
textarea[name="message"] {

  grid-column:
    2
    !important;

  grid-row:
    1
    !important;

  width:
    100%
    !important;

  min-width:
    0;

  min-height:
    50px
    !important;

  max-height:
    130px
    !important;

  margin:
    0
    !important;

  padding:
    15px 8px
    !important;

  align-self:
    center;

  box-sizing:
    border-box;

  overflow-y:
    auto;

  border:
    0
    !important;

  border-radius:
    0
    !important;

  outline:
    none
    !important;

  color:
    #50463d;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  resize:
    none
    !important;

  font-family:
    inherit;

  font-size:
    13px
    !important;

  line-height:
    1.45
    !important;
}


.ag-course-content
.course-chat-form.ag-chat-compose
textarea[name="message"]::placeholder {

  color:
    #9a9189;

  opacity:
    1;
}



/* =========================================================
   SEND — COLUMN 3
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"] {

  grid-column:
    3
    !important;

  grid-row:
    1
    !important;

  align-self:
    center;

  justify-self:
    center;

  width:
    44px
    !important;

  min-width:
    44px
    !important;

  max-width:
    44px
    !important;

  height:
    44px
    !important;

  min-height:
    44px
    !important;

  max-height:
    44px
    !important;

  margin:
    0
    !important;

  padding:
    0
    !important;

  display:
    grid
    !important;

  place-items:
    center;

  overflow:
    hidden;

  border:
    0
    !important;

  border-radius:
    50%
    !important;

  color:
    #fff
    !important;

  background:
    linear-gradient(
      145deg,
      #b87320,
      #d5972b
    )
    !important;

  box-shadow:
    0 9px 22px
    rgba(175, 104, 22, .20)
    !important;

  cursor:
    pointer;

  font-size:
    0
    !important;

  line-height:
    1
    !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}


.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send:hover,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"]:hover {

  transform:
    translateY(-1px);

  filter:
    brightness(1.03);

  box-shadow:
    0 12px 27px
    rgba(175, 104, 22, .26)
    !important;
}



/*
 * Старый enhancement уже может добавлять
 * собственную стрелку.
 * Оставляем только одну.
 */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::before {

  display:
    none
    !important;
}


.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::after,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"]::after {

  content:
    "➤"
    !important;

  display:
    block;

  margin:
    0 0 0 2px
    !important;

  color:
    #fff;

  font-family:
    Arial,
    sans-serif;

  font-size:
    15px
    !important;

  font-weight:
    400;

  line-height:
    1
    !important;
}



/* =========================================================
   REMOVE V891 GENERIC COMPOSER SIDE EFFECTS
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
> * {

  box-sizing:
    border-box;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .ag-course-content
  .course-chat-form.ag-chat-compose {

    grid-template-columns:
      42px
      minmax(0, 1fr)
      44px
      !important;

    padding:
      8px 9px
      !important;

    column-gap:
      6px
      !important;

  }


  .ag-course-content
  .course-chat-form.ag-chat-compose
  textarea[name="message"] {

    min-height:
      46px
      !important;

    padding:
      13px 5px
      !important;

    font-size:
      12px
      !important;

  }


  .ag-course-content
  .course-chat-form.ag-chat-compose
  .ag-chat-send,

  .ag-course-content
  .course-chat-form.ag-chat-compose
  button[type="submit"] {

    width:
      42px
      !important;

    min-width:
      42px
      !important;

    max-width:
      42px
      !important;

    height:
      42px
      !important;

    min-height:
      42px
      !important;

    max-height:
      42px
      !important;

  }

}



/* =========================================================
   AG COURSE CHAT VISUAL POLISH V893
   Compact bubbles + optically centered send icon
   ========================================================= */


/* =========================================================
   1. MESSAGE CONTAINER
   ========================================================= */

/*
 * Убираем остаточное растягивание от старых chat styles.
 */

.ag-course-content
.course-chat
.course-message {

  width:
    auto
    !important;

  min-width:
    0
    !important;

  max-width:
    min(360px, 58%)
    !important;

  padding:
    0
    !important;

  margin-bottom:
    17px
    !important;

  flex:
    0 0 auto
    !important;
}


/* Анна строго слева */

.ag-course-content
.course-chat
.course-message.author {

  align-self:
    flex-start
    !important;

  margin-left:
    0
    !important;

  margin-right:
    auto
    !important;
}


/* Пользователь строго справа */

.ag-course-content
.course-chat
.course-message.mine {

  align-self:
    flex-end
    !important;

  margin-left:
    auto
    !important;

  margin-right:
    0
    !important;
}



/* =========================================================
   2. AUTHOR LABEL
   ========================================================= */

.ag-course-content
.course-chat
.course-message > span {

  width:
    auto
    !important;

  max-width:
    max-content;

  margin:
    0 6px 5px
    !important;

  padding:
    0
    !important;

  display:
    block
    !important;

  font-size:
    9px
    !important;

  line-height:
    1.15
    !important;
}


.ag-course-content
.course-chat
.course-message.mine > span {

  text-align:
    right
    !important;
}



/* =========================================================
   3. MESSAGE BUBBLE
   ========================================================= */

/*
 * Ключевой момент:
 *
 * inline-block + width:auto
 *
 * заставляют короткий bubble действительно
 * оборачиваться вокруг текста, а не занимать
 * лишнее место.
 */

.ag-course-content
.course-chat
.course-message > p {

  width:
    auto
    !important;

  min-width:
    0
    !important;

  max-width:
    100%
    !important;

  margin:
    0
    !important;

  padding:
    11px 14px
    !important;

  display:
    inline-block
    !important;

  box-sizing:
    border-box;

  font-size:
    13px
    !important;

  line-height:
    1.45
    !important;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  word-break:
    normal;
}



/* =========================================================
   4. AUTHOR BUBBLE
   ========================================================= */

.ag-course-content
.course-chat
.course-message.author > p {

  float:
    none
    !important;

  margin-right:
    auto
    !important;

  border-radius:
    15px 15px 15px 5px
    !important;

  background:
    rgba(255,255,255,.96)
    !important;

  box-shadow:
    0 8px 20px
    rgba(60,43,28,.045)
    !important;
}



/* =========================================================
   5. USER BUBBLE
   ========================================================= */

.ag-course-content
.course-chat
.course-message.mine > p {

  float:
    none
    !important;

  margin-left:
    auto
    !important;

  border-radius:
    15px 15px 5px 15px
    !important;

  background:
    linear-gradient(
      145deg,
      #f4e4b8,
      #f0dba6
    )
    !important;

  box-shadow:
    0 8px 20px
    rgba(110,72,28,.05)
    !important;

  text-align:
    left
    !important;
}



/* =========================================================
   6. TIME
   ========================================================= */

.ag-course-content
.course-chat
.course-message time {

  width:
    auto
    !important;

  margin:
    5px 6px 0
    !important;

  padding:
    0
    !important;

  display:
    block
    !important;

  color:
    #aaa198;

  font-size:
    8px
    !important;

  line-height:
    1.15;
}


.ag-course-content
.course-chat
.course-message.mine time {

  text-align:
    right
    !important;
}



/* =========================================================
   7. COMPOSER HEIGHT
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose {

  min-height:
    68px
    !important;

  padding:
    8px 11px
    !important;

  border-radius:
    18px
    !important;
}


.ag-course-content
.course-chat-form.ag-chat-compose
textarea[name="message"] {

  min-height:
    48px
    !important;

  padding:
    14px 7px
    !important;

}



/* =========================================================
   8. SEND BUTTON
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"] {

  position:
    relative;

  width:
    44px
    !important;

  min-width:
    44px
    !important;

  max-width:
    44px
    !important;

  height:
    44px
    !important;

  min-height:
    44px
    !important;

  max-height:
    44px
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  padding:
    0
    !important;

  overflow:
    hidden;

  border-radius:
    50%
    !important;

  font-size:
    0
    !important;

  line-height:
    0
    !important;
}



/* =========================================================
   9. REMOVE OLD ARROWS COMPLETELY
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::before,

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::after,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"]::before,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"]::after {

  content:
    none
    !important;

  display:
    none
    !important;
}



/* =========================================================
   10. PRECISE CSS PAPER PLANE
   ========================================================= */

/*
 * Используем внутренний span не можем —
 * markup не меняем.
 *
 * Поэтому рисуем стрелку фоном самого button
 * через mask-independent clip-path layer.
 */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send {

  isolation:
    isolate;
}


/*
 * Возвращаем один pseudo-element уже после
 * полного сброса старых стрелок.
 */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::after {

  content:
    ""
    !important;

  display:
    block
    !important;

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    15px;

  height:
    15px;

  margin:
    0
    !important;

  background:
    #fff;

  clip-path:
    polygon(
      0 8%,
      100% 50%,
      0 92%,
      23% 54%,
      23% 46%
    );

  transform:
    translate(
      -45%,
      -50%
    );

  pointer-events:
    none;

  z-index:
    2;
}



/* =========================================================
   11. BUTTON FOCUS
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send:focus-visible {

  outline:
    2px solid
    rgba(194,128,35,.35)
    !important;

  outline-offset:
    3px;
}



/* =========================================================
   12. EMOJI CENTER
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-emoji-wrap {

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;
}


.ag-course-content
.course-chat-form.ag-chat-compose
.ag-emoji-toggle {

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  line-height:
    1
    !important;
}



/* =========================================================
   13. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1450px) {

  .ag-course-content
  .course-chat
  .course-message {

    max-width:
      min(380px, 52%)
      !important;
  }

}



/* =========================================================
   14. TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .ag-course-content
  .course-chat
  .course-message {

    max-width:
      min(350px, 68%)
      !important;
  }

}



/* =========================================================
   15. MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .ag-course-content
  .course-chat
  .course-message {

    max-width:
      82%
      !important;
  }


  .ag-course-content
  .course-chat
  .course-message > p {

    padding:
      10px 12px
      !important;

    font-size:
      12px
      !important;
  }


  .ag-course-content
  .course-chat-form.ag-chat-compose {

    min-height:
      64px
      !important;
  }

}



/* =========================================================
   AG ACCOUNT READABILITY V894
   + precise send arrow
   ========================================================= */


/* =========================================================
   1. CHAT SEND BUTTON — RESET OLD ICON
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::before,

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::after,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"]::before,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"]::after {

  content:"" !important;

  position:absolute;

  display:block !important;

  pointer-events:none;

  background:none;

  clip-path:none;

}


/* =========================================================
   2. SEND BUTTON POSITIONING
   ========================================================= */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"] {

  position:relative !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  overflow:hidden;

  color:transparent !important;
}


/*
 * Линия самолётика.
 */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::before,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"]::before {

  left:50%;
  top:50%;

  width:11px;
  height:2px;

  border-radius:2px;

  background:#fff !important;

  transform:
    translate(-58%, -50%);

}


/*
 * Наконечник.
 */

.ag-course-content
.course-chat-form.ag-chat-compose
.ag-chat-send::after,

.ag-course-content
.course-chat-form.ag-chat-compose
button[type="submit"]::after {

  left:50%;
  top:50%;

  width:7px;
  height:7px;

  border-top:
    2px solid #fff;

  border-right:
    2px solid #fff;

  transform:
    translate(-5%, -50%)
    rotate(45deg);

}


/* =========================================================
   3. ACCOUNT PRODUCT TITLE
   ========================================================= */

.account-product-card > h2 {

  font-size:
    30px
    !important;

  line-height:
    1.18
    !important;

  letter-spacing:
    -.015em;
}


/* =========================================================
   4. DESCRIPTION
   ========================================================= */

.account-product-card > p {

  color:
    #6f645a
    !important;

  font-size:
    14px
    !important;

  line-height:
    1.7
    !important;

  font-weight:
    400;

}


/* =========================================================
   5. ACTIVE STATUS
   ========================================================= */

.account-product-card
> .pill,

.account-product-card
.pill {

  min-height:
    31px;

  padding:
    0 12px;

  font-size:
    10px
    !important;

  font-weight:
    700;

}


/* =========================================================
   6. COURSE / GAME LABEL
   ========================================================= */

.account-product-kind {

  min-height:
    31px
    !important;

  padding:
    0 12px
    !important;

  font-size:
    10px
    !important;

  letter-spacing:
    .07em
    !important;

}


/* =========================================================
   7. META ROWS
   ========================================================= */

.account-course-meta {

  min-height:
    54px;

  padding:
    16px 17px
    !important;
}


.account-course-meta span {

  color:
    #8d8176
    !important;

  font-size:
    11px
    !important;

  line-height:
    1.35;
}


.account-course-meta strong {

  color:
    #43382f
    !important;

  font-size:
    14px
    !important;

  font-weight:
    650;

}


/* =========================================================
   8. COURSE CTA
   ========================================================= */

.account-open-course {

  min-height:
    54px
    !important;

  padding:
    0 18px
    !important;

  font-size:
    12px
    !important;

  font-weight:
    700
    !important;

  letter-spacing:
    .005em;
}


.account-open-course > span {

  font-size:
    18px
    !important;

}


/* =========================================================
   9. GAME PARTICIPATION SECTION
   ========================================================= */

/*
 * Заголовки внутри игрового блока.
 */

.account-product-game h3,
.account-product-game h4 {

  color:#40362e;

  font-size:
    20px
    !important;

  line-height:
    1.3
    !important;

}


/*
 * Даты.
 */

.account-product-game
[class*="date"] strong,

.account-product-game
[class*="date"] h3,

.account-product-game
[class*="date"] h4 {

  font-size:
    17px
    !important;

  line-height:
    1.35
    !important;

}


/*
 * Обычные подписи в игровом интерфейсе.
 */

.account-product-game
[class*="date"] span,

.account-product-game
[class*="date"] small,

.account-product-game
[class*="particip"] span,

.account-product-game
[class*="particip"] small {

  font-size:
    11px
    !important;

  line-height:
    1.45
    !important;

}


/* =========================================================
   10. GAME BUTTONS
   ========================================================= */

.account-product-game
button {

  min-height:
    46px;

  font-size:
    11px
    !important;

  font-weight:
    650
    !important;

  line-height:
    1.3;

}


/* =========================================================
   11. GAME STATUS BARS
   ========================================================= */

.account-product-game
[class*="status"] {

  font-size:
    11px
    !important;

  line-height:
    1.4
    !important;

}


/* =========================================================
   12. GENERIC SMALL TEXT INSIDE PRODUCT CARDS
   ========================================================= */

.account-product-card small {

  font-size:
    10px;

  line-height:
    1.4;

}


/* =========================================================
   13. MAIN "МОИ ПРОГРАММЫ" HEADING
   ========================================================= */

.account-main h1,
.account-page h1,
.account-shell h1 {

  font-size:
    clamp(
      38px,
      4vw,
      56px
    )
    !important;

  line-height:
    1.08;

}


/* =========================================================
   14. SUMMARY
   ========================================================= */

.account-summary-item span {

  font-size:
    11px
    !important;

}


.account-summary-item strong {

  font-size:
    11px
    !important;

}


/* =========================================================
   15. MOBILE
   ========================================================= */

@media(max-width:760px) {

  .account-product-card > h2 {

    font-size:
      25px
      !important;

  }


  .account-product-card > p {

    font-size:
      13px
      !important;

    line-height:
      1.65
      !important;

  }


  .account-course-meta span {

    font-size:
      10px
      !important;

  }


  .account-course-meta strong {

    font-size:
      13px
      !important;

  }


  .account-open-course {

    font-size:
      11px
      !important;

  }


  .account-product-game button {

    font-size:
      10px
      !important;

  }

}



/* =========================================================
   AG COURSE MATERIALS PREMIUM V900
   ========================================================= */


/* =========================================================
   1. MATERIAL PANEL
   ========================================================= */

.ag-course-content
[data-course-panel="materials"] {

  width:
    100%;
}


/* =========================================================
   2. MATERIALS OVERVIEW
   ========================================================= */

.course-material-overview {

  margin:
    0 0 22px;

  padding:
    20px 22px;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(220px,320px);

  gap:
    28px;

  align-items:
    center;

  border:
    1px solid
    rgba(171,114,43,.13);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,254,250,.97),
      rgba(249,241,226,.84)
    );

  box-shadow:
    0 16px 40px
    rgba(74,49,24,.045);
}


.course-material-overview-copy {

  min-width:
    0;
}


.course-material-overview-copy > span {

  display:
    block;

  margin-bottom:
    7px;

  color:
    #ad6e27;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .14em;
}


.course-material-overview-copy > strong {

  display:
    block;

  margin-bottom:
    6px;

  color:
    #40352d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    22px;

  font-weight:
    400;

  line-height:
    1.25;
}


.course-material-overview-copy > small {

  display:
    block;

  max-width:
    620px;

  color:
    #8f8378;

  font-size:
    11px;

  line-height:
    1.55;
}


/* =========================================================
   3. PROGRESS
   ========================================================= */

.course-material-progress {

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:
    12px;

  align-items:
    center;
}


.course-material-progress-track {

  height:
    8px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(151,111,69,.10);
}


.course-material-progress-track > span {

  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #b87320,
      #d99a35
    );

  transition:
    width .35s ease;
}


.course-material-progress > strong {

  min-width:
    38px;

  color:
    #9d6324;

  font-size:
    11px;

  text-align:
    right;
}


/* =========================================================
   4. MATERIAL LIST
   ========================================================= */

.course-materials {

  display:
    grid;

  gap:
    17px
    !important;
}


/* =========================================================
   5. MATERIAL CARD
   ========================================================= */

.course-material {

  position:
    relative;

  padding:
    20px 21px
    !important;

  overflow:
    hidden;

  border:
    1px solid
    rgba(148,103,55,.11)
    !important;

  border-radius:
    19px
    !important;

  background:
    rgba(255,254,251,.93)
    !important;

  box-shadow:
    0 13px 34px
    rgba(70,47,25,.04);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}


.course-material.available:hover {

  transform:
    translateY(-1px);

  border-color:
    rgba(177,115,42,.20)
    !important;

  box-shadow:
    0 17px 38px
    rgba(70,47,25,.06);
}


.course-material.locked {

  background:
    linear-gradient(
      145deg,
      rgba(251,249,245,.92),
      rgba(247,243,237,.82)
    )
    !important;

  opacity:
    1
    !important;
}


/* =========================================================
   6. MATERIAL HEADER
   ========================================================= */

.course-material-head {

  display:
    grid
    !important;

  grid-template-columns:
    42px
    minmax(0,1fr)
    auto;

  gap:
    15px;

  align-items:
    start;

  margin:
    0
    !important;
}


.course-material-head > div {

  min-width:
    0;
}


.course-material-number {

  width:
    40px
    !important;

  height:
    40px
    !important;

  display:
    grid
    !important;

  place-items:
    center;

  border:
    1px solid
    rgba(183,119,42,.17);

  border-radius:
    50%
    !important;

  color:
    #a96822;

  background:
    #fbf1df;

  font-size:
    10px
    !important;

  font-weight:
    750;
}


.course-material-head h3 {

  margin:
    1px 0 7px
    !important;

  color:
    #3e342c;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    20px
    !important;

  font-weight:
    400;

  line-height:
    1.25;
}


.course-material-head p {

  max-width:
    760px;

  margin:
    0
    !important;

  color:
    #7e7267;

  font-size:
    12px
    !important;

  line-height:
    1.6;
}


/* =========================================================
   7. STATUS BADGES
   ========================================================= */

.course-material-status {

  min-width:
    82px;

  min-height:
    32px;

  padding:
    0 11px
    !important;

  display:
    inline-flex
    !important;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px
    !important;

  font-size:
    9px
    !important;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;
}


.course-material-status.is-available {

  border:
    1px solid
    rgba(74,145,91,.10);

  color:
    #4d7d59
    !important;

  background:
    #e4f2e5
    !important;
}


.course-material-status.is-locked {

  border:
    1px solid
    rgba(121,107,93,.08);

  color:
    #8b8178
    !important;

  background:
    #f2efeb
    !important;
}


/* =========================================================
   8. LOCK MESSAGE
   ========================================================= */

.course-material-lock {

  margin:
    15px 0 0 57px
    !important;

  padding:
    11px 13px
    !important;

  border:
    1px solid
    rgba(151,113,72,.08);

  border-radius:
    11px;

  color:
    #877b70
    !important;

  background:
    rgba(245,240,232,.73)
    !important;

  font-size:
    10px
    !important;

  line-height:
    1.45;
}


/* =========================================================
   9. READER
   ========================================================= */

.course-reader {

  margin:
    17px 0 0 57px
    !important;

  overflow:
    hidden;

  border:
    0
    !important;

  border-radius:
    14px;
}


.course-reader > summary {

  min-height:
    48px;

  padding:
    0 15px
    !important;

  display:
    flex
    !important;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  border:
    1px solid
    rgba(172,111,41,.13);

  border-radius:
    13px;

  color:
    #fff
    !important;

  background:
    linear-gradient(
      145deg,
      #b87320,
      #d49a3c
    )
    !important;

  box-shadow:
    0 9px 22px
    rgba(155,91,24,.12);

  font-size:
    11px
    !important;

  font-weight:
    700;

  cursor:
    pointer;

  list-style:
    none;
}


.course-reader > summary::-webkit-details-marker {

  display:
    none;
}


.course-reader > summary span {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    17px;

  transition:
    transform .2s ease;
}


.course-reader[open] > summary span {

  transform:
    rotate(90deg);
}


/* =========================================================
   10. PROTECTED DOCUMENT
   ========================================================= */

.course-reader[open]
.protected-course-document {

  margin-top:
    12px
    !important;

  border:
    1px solid
    rgba(143,102,56,.11);

  border-radius:
    15px;

  background:
    #fffdf9;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.85);
}


.course-document-content {

  padding:
    30px
    !important;

  color:
    #403a34;

  font-size:
    14px
    !important;

  line-height:
    1.75
    !important;
}


.course-document-content p {

  margin:
    0 0 1em;
}


.course-document-content h1,
.course-document-content h2,
.course-document-content h3 {

  color:
    #332b25;

  line-height:
    1.3;
}


/* =========================================================
   11. EMPTY STATE
   ========================================================= */

.course-materials .course-empty {

  min-height:
    150px;

  display:
    grid;

  place-items:
    center;

  padding:
    25px;

  border:
    1px dashed
    rgba(164,115,57,.18);

  border-radius:
    18px;

  color:
    #94887d;

  background:
    rgba(255,253,249,.52);

  font-size:
    12px;
}


/* =========================================================
   12. TABLET
   ========================================================= */

@media(max-width:900px) {

  .course-material-overview {

    grid-template-columns:
      1fr;

    gap:
      15px;
  }


  .course-material-progress {

    max-width:
      420px;
  }

}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media(max-width:620px) {

  .course-material-overview {

    padding:
      16px;

    border-radius:
      17px;
  }


  .course-material-overview-copy > strong {

    font-size:
      19px;
  }


  .course-material {

    padding:
      16px
      !important;
  }


  .course-material-head {

    grid-template-columns:
      38px
      minmax(0,1fr);

    gap:
      11px;
  }


  .course-material-number {

    width:
      36px
      !important;

    height:
      36px
      !important;
  }


  .course-material-status {

    grid-column:
      2;

    justify-self:
      start;

    margin-top:
      5px;
  }


  .course-material-head h3 {

    font-size:
      18px
      !important;
  }


  .course-material-lock,
  .course-reader {

    margin-left:
      0
      !important;
  }


  .course-document-content {

    padding:
      20px 17px
      !important;

    font-size:
      13px
      !important;
  }

}



/* =========================================================
   AG COURSE HOMEWORK PREMIUM V910
   ========================================================= */


/* =========================================================
   1. PANEL
   ========================================================= */

.ag-course-content
[data-course-panel="homework"] {

  width:
    100%;
}


/* =========================================================
   2. OVERVIEW
   ========================================================= */

.course-homework-overview {

  margin:
    0 0 22px;

  padding:
    20px 22px;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:
    25px;

  align-items:
    center;

  border:
    1px solid
    rgba(173,114,43,.13);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,254,250,.97),
      rgba(248,241,228,.84)
    );

  box-shadow:
    0 16px 40px
    rgba(74,49,24,.045);
}


.course-homework-overview-copy > span {

  display:
    block;

  margin-bottom:
    7px;

  color:
    #ac6c24;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .14em;
}


.course-homework-overview-copy > strong {

  display:
    block;

  margin-bottom:
    6px;

  color:
    #40352d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    22px;

  font-weight:
    400;

  line-height:
    1.25;
}


.course-homework-overview-copy > small {

  display:
    block;

  max-width:
    650px;

  color:
    #8e8278;

  font-size:
    11px;

  line-height:
    1.55;
}


/* =========================================================
   3. DOCX FORMAT CARD
   ========================================================= */

.course-homework-format {

  min-width:
    215px;

  padding:
    12px 14px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  border:
    1px solid
    rgba(175,115,43,.11);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.55);
}


.course-homework-format > span {

  flex:
    0 0 42px;

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    11px;

  color:
    #a7651e;

  background:
    #f5e4bf;

  font-size:
    9px;

  font-weight:
    800;
}


.course-homework-format div {

  min-width:
    0;
}


.course-homework-format strong {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #51453b;

  font-size:
    11px;
}


.course-homework-format small {

  display:
    block;

  color:
    #9a8f84;

  font-size:
    9px;

  line-height:
    1.35;
}


/* =========================================================
   4. CREATE CARD
   ========================================================= */

.course-homework-create {

  padding:
    21px;

  border:
    1px solid
    rgba(153,106,55,.11);

  border-radius:
    20px;

  background:
    rgba(255,254,251,.94);

  box-shadow:
    0 14px 38px
    rgba(70,47,25,.045);
}


.course-homework-create-head {

  margin-bottom:
    20px;

  padding-bottom:
    17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid
    rgba(158,112,60,.10);
}


.course-homework-create-head
> div
> span {

  display:
    block;

  margin-bottom:
    6px;

  color:
    #ae6e25;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .14em;
}


.course-homework-create-head h3 {

  margin:
    0;

  color:
    #3f352d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    21px;

  font-weight:
    400;
}


.course-homework-secure {

  min-height:
    31px;

  padding:
    0 11px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(174,112,39,.12);

  border-radius:
    999px;

  color:
    #a96b24;

  background:
    #faf0dd;

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   5. FORM GRID
   ========================================================= */

.course-homework-form {

  display:
    grid
    !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    18px 20px
    !important;

  margin:
    0
    !important;

  padding:
    0
    !important;

  border:
    0
    !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;
}


.course-homework-form label {

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  margin:
    0
    !important;
}


.course-homework-form label > span {

  color:
    #8e8175;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


/*
 * Комментарий занимает правую колонку,
 * но высотой гармонично совпадает с выбором.
 */

.course-homework-form textarea {

  min-height:
    108px;

  padding:
    14px 15px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(160,111,57,.15);

  border-radius:
    13px;

  outline:
    none;

  color:
    #4e443b;

  background:
    rgba(255,253,249,.92);

  font-family:
    inherit;

  font-size:
    12px;

  line-height:
    1.55;

  resize:
    vertical;
}


.course-homework-form select {

  min-height:
    49px;

  padding:
    0 42px 0 14px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(160,111,57,.15);

  border-radius:
    13px;

  color:
    #50453c;

  background-color:
    rgba(255,253,249,.94);

  font-size:
    12px;
}


.course-homework-form textarea:focus,
.course-homework-form select:focus {

  border-color:
    rgba(187,119,39,.45);

  box-shadow:
    0 0 0 3px
    rgba(187,119,39,.06);
}


/* =========================================================
   6. FILE UPLOAD
   ========================================================= */

/*
 * File label занимает всю ширину.
 */

.course-homework-form
label:has(input[type="file"]) {

  grid-column:
    1 / -1;

  padding:
    15px;

  border:
    1px dashed
    rgba(177,116,44,.28);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(253,249,242,.90),
      rgba(249,242,230,.72)
    );
}


.course-homework-form
input[type="file"] {

  width:
    100%;

  min-height:
    45px;

  box-sizing:
    border-box;

  color:
    #766b61;

  font-size:
    11px;
}


.course-homework-form
input[type="file"]::file-selector-button {

  min-height:
    38px;

  margin-right:
    12px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(177,112,38,.14);

  border-radius:
    10px;

  color:
    #9e631f;

  background:
    #fffaf1;

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    650;

  cursor:
    pointer;
}


/* =========================================================
   7. SUBMIT BUTTON
   ========================================================= */

.course-homework-form
> .button {

  grid-column:
    1 / -1;

  min-height:
    50px;

  margin:
    0
    !important;

  border-radius:
    13px;

  font-size:
    11px;

  font-weight:
    700;
}


/* =========================================================
   8. HISTORY
   ========================================================= */

.course-submission-history {

  margin-top:
    25px
    !important;

  padding:
    21px;

  border:
    1px solid
    rgba(153,106,55,.11);

  border-radius:
    20px;

  background:
    rgba(255,254,251,.94);

  box-shadow:
    0 14px 38px
    rgba(70,47,25,.04);
}


.course-submission-history-head {

  margin-bottom:
    15px;

  padding-bottom:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid
    rgba(158,112,60,.10);
}


.course-submission-history-head
> div
> span {

  display:
    block;

  margin-bottom:
    6px;

  color:
    #ad6d25;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .14em;
}


.course-submission-history-head h3 {

  margin:
    0;

  color:
    #40352d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    21px;

  font-weight:
    400;
}


.course-submission-history-head
> strong {

  min-width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    #a66a25;

  background:
    #f7e8c9;

  font-size:
    10px;
}


/* =========================================================
   9. SUBMISSION CARD
   ========================================================= */

.course-submission-row {

  padding:
    15px
    !important;

  display:
    grid
    !important;

  grid-template-columns:
    38px
    minmax(0,1fr)
    auto;

  gap:
    13px;

  align-items:
    center;

  border:
    1px solid
    rgba(150,105,56,.09);

  border-radius:
    14px;

  background:
    rgba(252,249,244,.72);
}


.course-submission-row
+ .course-submission-row {

  margin-top:
    10px;
}


.course-submission-number {

  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    #a96a22;

  background:
    #f8ead0;

  font-size:
    9px;

  font-weight:
    750;
}


.course-submission-copy {

  min-width:
    0;
}


.course-submission-label {

  display:
    block;

  margin-bottom:
    4px;

  color:
    #a0958b;

  font-size:
    8px;

  font-weight:
    650;

  text-transform:
    uppercase;
}


.course-submission-copy
> strong {

  display:
    block;

  margin-bottom:
    8px;

  color:
    #453a31;

  font-size:
    12px;

  line-height:
    1.35;
}


/* =========================================================
   10. FILE CHIP
   ========================================================= */

.course-submission-file {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.course-submission-file
> span {

  flex:
    0 0 auto;

  min-width:
    37px;

  height:
    27px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    8px;

  color:
    #a96720;

  background:
    #f7e5bf;

  font-size:
    7px;

  font-weight:
    800;
}


.course-submission-file
p {

  min-width:
    0;

  margin:
    0;

  overflow:
    hidden;

  color:
    #786d63;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   11. SUBMISSION DATE
   ========================================================= */

.course-submission-date {

  min-width:
    145px;

  text-align:
    right;
}


.course-submission-date
> span {

  display:
    block;

  margin-bottom:
    4px;

  color:
    #a0958b;

  font-size:
    8px;

  text-transform:
    uppercase;
}


.course-submission-date time {

  margin:
    0
    !important;

  color:
    #675c52
    !important;

  font-size:
    10px
    !important;

  line-height:
    1.35;
}


/* =========================================================
   12. TABLET
   ========================================================= */

@media(max-width:850px) {

  .course-homework-overview {

    grid-template-columns:
      1fr;
  }


  .course-homework-format {

    max-width:
      270px;
  }

}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media(max-width:620px) {

  .course-homework-overview,
  .course-homework-create,
  .course-submission-history {

    padding:
      16px;
  }


  .course-homework-overview-copy
  > strong {

    font-size:
      19px;
  }


  .course-homework-form {

    grid-template-columns:
      1fr
      !important;
  }


  .course-homework-form
  label:has(input[type="file"]),

  .course-homework-form
  > .button {

    grid-column:
      1;
  }


  .course-submission-row {

    grid-template-columns:
      36px
      minmax(0,1fr);

    align-items:
      start;
  }


  .course-submission-date {

    grid-column:
      2;

    min-width:
      0;

    text-align:
      left;
  }

}



/* =========================================================
   AG HOMEWORK HISTORY ALIGNMENT V911
   ========================================================= */


/* =========================================================
   1. HISTORY CARD
   ========================================================= */

.course-submission-history {

  overflow:
    hidden;
}


/* =========================================================
   2. SUBMISSION ROW
   ========================================================= */

.ag-course-content
.course-submission-history
.course-submission-row {

  width:
    100%;

  min-height:
    88px;

  padding:
    15px 17px
    !important;

  display:
    grid
    !important;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    190px
    !important;

  gap:
    15px
    !important;

  align-items:
    center
    !important;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(150,105,56,.10);

  border-radius:
    14px;

  background:
    rgba(252,249,244,.74);
}


/* =========================================================
   3. NUMBER
   ========================================================= */

.ag-course-content
.course-submission-number {

  grid-column:
    1;

  grid-row:
    1;

  align-self:
    center;

  justify-self:
    center;

  width:
    36px;

  height:
    36px;

  margin:
    0
    !important;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    #a96a22;

  background:
    #f8ead0;

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   4. MAIN COPY
   ========================================================= */

.ag-course-content
.course-submission-copy {

  grid-column:
    2;

  grid-row:
    1;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;
}


.ag-course-content
.course-submission-label {

  margin:
    0 0 4px
    !important;

  color:
    #a0958b;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


.ag-course-content
.course-submission-copy
> strong {

  margin:
    0 0 9px
    !important;

  color:
    #443930;

  font-size:
    12px
    !important;

  font-weight:
    650;

  line-height:
    1.35;
}


/* =========================================================
   5. FILE — KEEP EVERYTHING TOGETHER
   ========================================================= */

.ag-course-content
.course-submission-file {

  width:
    100%;

  min-width:
    0;

  margin:
    0
    !important;

  display:
    flex
    !important;

  flex-direction:
    row
    !important;

  align-items:
    center
    !important;

  justify-content:
    flex-start
    !important;

  gap:
    9px
    !important;
}


.ag-course-content
.course-submission-file
> span {

  flex:
    0 0 auto;

  width:
    40px
    !important;

  min-width:
    40px;

  height:
    30px
    !important;

  margin:
    0
    !important;

  display:
    grid
    !important;

  place-items:
    center;

  border-radius:
    8px;

  color:
    #a96720;

  background:
    #f7e5bf;

  font-size:
    7px;

  font-weight:
    800;
}


.ag-course-content
.course-submission-file
p {

  min-width:
    0;

  max-width:
    100%;

  margin:
    0
    !important;

  padding:
    0
    !important;

  overflow:
    hidden;

  color:
    #74695f;

  font-size:
    10px
    !important;

  line-height:
    1.35;

  text-align:
    left
    !important;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   6. DATE — RIGHT COLUMN
   ========================================================= */

.ag-course-content
.course-submission-date {

  grid-column:
    3;

  grid-row:
    1;

  width:
    100%;

  min-width:
    0
    !important;

  margin:
    0
    !important;

  padding:
    0 2px 0 15px;

  align-self:
    center;

  justify-self:
    stretch;

  border-left:
    1px solid
    rgba(157,111,60,.10);

  text-align:
    right
    !important;
}


.ag-course-content
.course-submission-date
> span {

  margin:
    0 0 5px
    !important;

  display:
    block;

  color:
    #a0958b;

  font-size:
    8px
    !important;

  font-weight:
    650;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


.ag-course-content
.course-submission-date
time {

  margin:
    0
    !important;

  padding:
    0
    !important;

  display:
    block
    !important;

  color:
    #61564d
    !important;

  font-size:
    10px
    !important;

  font-weight:
    500;

  line-height:
    1.35;

  text-align:
    right
    !important;

  white-space:
    nowrap;
}


/* =========================================================
   7. SEVERAL SUBMISSIONS
   ========================================================= */

.ag-course-content
.course-submission-row
+ .course-submission-row {

  margin-top:
    11px
    !important;
}


/* =========================================================
   8. TABLET
   ========================================================= */

@media(max-width:850px) {

  .ag-course-content
  .course-submission-history
  .course-submission-row {

    grid-template-columns:
      38px
      minmax(0,1fr)
      155px
      !important;

  }

}


/* =========================================================
   9. MOBILE
   ========================================================= */

@media(max-width:620px) {

  .ag-course-content
  .course-submission-history
  .course-submission-row {

    grid-template-columns:
      36px
      minmax(0,1fr)
      !important;

    grid-template-rows:
      auto
      auto;

    gap:
      10px 12px
      !important;

    align-items:
      start
      !important;

  }


  .ag-course-content
  .course-submission-number {

    grid-column:
      1;

    grid-row:
      1 / 3;
  }


  .ag-course-content
  .course-submission-copy {

    grid-column:
      2;

    grid-row:
      1;
  }


  .ag-course-content
  .course-submission-date {

    grid-column:
      2;

    grid-row:
      2;

    padding:
      9px 0 0
      !important;

    border-left:
      0;

    border-top:
      1px solid
      rgba(157,111,60,.09);

    text-align:
      left
      !important;
  }


  .ag-course-content
  .course-submission-date
  time {

    text-align:
      left
      !important;
  }


  .ag-course-content
  .course-submission-file
  p {

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }

}



/* =========================================================
   AG CHAT TIMESTAMP READABILITY V951
   ========================================================= */

.ag-course-content
.course-chat
.course-message time,

.course-chat.admin-chat
.course-message time {

  margin:
    6px 6px 0
    !important;

  padding:
    0
    !important;

  display:
    block
    !important;

  color:
    #8b8178
    !important;

  font-size:
    11px
    !important;

  font-weight:
    500
    !important;

  line-height:
    1.3
    !important;

  opacity:
    1
    !important;

  letter-spacing:
    .01em;

  white-space:
    nowrap;
}


/* Пользователь — время справа */

.ag-course-content
.course-chat
.course-message.mine time,

.course-chat.admin-chat
.course-message.mine time {

  text-align:
    right
    !important;
}


/* Анна / участник — время слева */

.ag-course-content
.course-chat
.course-message.author time,

.course-chat.admin-chat
.course-message.author time {

  text-align:
    left
    !important;
}


/* На очень маленьких экранах чуть компактнее */

@media(max-width:620px) {

  .ag-course-content
  .course-chat
  .course-message time,

  .course-chat.admin-chat
  .course-message time {

    font-size:
      10px
      !important;

    margin-top:
      5px
      !important;
  }

}


/* =========================================================
   AG HOMEWORK REVIEW PREMIUM V960
   ========================================================= */

.admin-homework-review {
  margin-top:17px;
  padding:17px;
  border:1px solid rgba(153,106,55,.12);
  border-radius:15px;
  background:rgba(255,253,249,.84);
}

.admin-homework-review.status-reviewed {
  border-color:rgba(73,137,86,.18);
  background:rgba(241,249,242,.72);
}

.admin-homework-review.status-revision {
  border-color:rgba(183,120,38,.22);
  background:rgba(255,248,236,.78);
}

.admin-homework-review-head {
  margin-bottom:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.admin-homework-review-head > div > span {
  display:block;
  margin-bottom:4px;
  color:#a56a29;
  font-size:8px;
  font-weight:750;
  letter-spacing:.12em;
}

.admin-homework-review-head > div > strong {
  color:#43382f;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  font-weight:400;
}

.admin-homework-review-badge {
  min-height:30px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}

.admin-homework-review-badge.status-pending {
  color:#886f59;
  background:#f1ece6;
}

.admin-homework-review-badge.status-reviewed {
  color:#4f7d58;
  background:#e4f1e5;
}

.admin-homework-review-badge.status-revision {
  color:#a26825;
  background:#f8e8c9;
}

.admin-homework-review-form {
  display:grid;
  gap:13px;
}

.admin-homework-review-form label {
  display:grid;
  gap:6px;
}

.admin-homework-review-form label > span {
  color:#8b7e72;
  font-size:8px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.admin-homework-review-form select,
.admin-homework-review-form textarea {
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(157,108,53,.16);
  border-radius:11px;
  color:#4c4138;
  background:rgba(255,255,255,.85);
  font-family:inherit;
  font-size:11px;
  outline:0;
}

.admin-homework-review-form select {
  min-height:44px;
  padding:0 38px 0 12px;
}

.admin-homework-review-form textarea {
  min-height:92px;
  max-height:240px;
  padding:12px;
  line-height:1.55;
  resize:vertical;
}

.admin-homework-review-form select:focus,
.admin-homework-review-form textarea:focus {
  border-color:rgba(185,117,36,.45);
  box-shadow:0 0 0 3px rgba(185,117,36,.06);
}

.admin-homework-reviewed-at {
  color:#978b80;
  font-size:9px;
  line-height:1.4;
}

.admin-homework-reviewed-at strong {
  color:#6d6157;
  font-weight:550;
}

.admin-homework-review-submit {
  min-height:44px;
  padding:0 17px;
  border:0;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(145deg,#b87422,#d29435);
  box-shadow:0 9px 22px rgba(168,98,24,.13);
  font-family:inherit;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.course-submission-review {
  grid-column:2 / -1;
  margin-top:4px;
  padding:13px 14px;
  border:1px solid rgba(151,106,57,.10);
  border-radius:12px;
  background:rgba(249,246,240,.72);
}

.course-submission-review.status-reviewed {
  border-color:rgba(74,142,87,.15);
  background:rgba(236,247,238,.72);
}

.course-submission-review.status-revision {
  border-color:rgba(184,120,37,.19);
  background:rgba(253,245,230,.82);
}

.course-submission-review-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.course-submission-review-head > span {
  color:#978b80;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
}

.course-submission-review-head > strong {
  font-size:10px;
  font-weight:700;
}

.course-submission-review.status-pending
.course-submission-review-head > strong {
  color:#817467;
}

.course-submission-review.status-reviewed
.course-submission-review-head > strong {
  color:#4d7c57;
}

.course-submission-review.status-revision
.course-submission-review-head > strong {
  color:#a26825;
}

.course-submission-review-comment {
  margin-top:11px;
  padding-top:11px;
  border-top:1px solid rgba(146,104,60,.10);
}

.course-submission-review-comment > span {
  display:block;
  margin-bottom:5px;
  color:#9b8f84;
  font-size:8px;
  font-weight:650;
}

.course-submission-review-comment p {
  margin:0;
  color:#50463d;
  font-size:11px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.course-submission-review > time {
  margin-top:9px;
  display:block;
  color:#988d83;
  font-size:9px;
  font-weight:500;
  line-height:1.35;
}

.admin-homework-card[id] {
  scroll-margin-top:25px;
}

@media(max-width:620px) {
  .admin-homework-review-head {
    align-items:flex-start;
    flex-direction:column;
  }

  .course-submission-review {
    grid-column:2;
  }

  .course-submission-review-head {
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
}



/* =========================================================
   AG HOMEWORK NOTIFICATION CSS V970
   ========================================================= */

.ag-course-homework-icon {

  position:
    relative;

}


.ag-course-homework-unread {

  position:
    absolute;

  top:
    -7px;

  right:
    -9px;

  min-width:
    17px;

  height:
    17px;

  padding:
    0 4px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  box-sizing:
    border-box;

  border:
    2px solid #fff;

  border-radius:
    999px;

  background:
    linear-gradient(
      145deg,
      #e99a37,
      #bd6e1e
    );

  color:
    #fff;

  box-shadow:
    0 4px 12px
    rgba(180,101,24,.24);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

}


.ag-course-homework-unread[hidden] {

  display:
    none
    !important;

}



/* =========================================================
   AG ADMIN HOMEWORK CENTER V980
   ========================================================= */


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.admin-nav-homework {

  display:flex;

  align-items:center;

  gap:10px;

}


.admin-homework-nav-icon {

  position:relative;

  width:20px;

  height:20px;

  flex:
    0 0 20px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

}


.admin-homework-nav-icon svg {

  width:17px;

  height:17px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.7;

  stroke-linecap:round;

  stroke-linejoin:round;

}


.admin-homework-nav-icon.has-unread {

  color:#c77a26;

}


.admin-homework-nav-label {

  flex:1;

}


.admin-homework-nav-count {

  min-width:20px;

  height:20px;

  padding:0 5px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  box-sizing:border-box;

  border-radius:999px;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #e99a37,
      #b9681a
    );

  box-shadow:
    0 4px 12px
    rgba(182,100,25,.18);

  font-size:9px;

  font-weight:800;

  line-height:1;

}


.admin-homework-nav-count[hidden] {

  display:none !important;

}


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.admin-homework-center {

  max-width:1440px;

}


.admin-homework-center-head {

  align-items:
    flex-end;

}


.admin-homework-center-head p {

  max-width:630px;

  margin:
    10px 0 0;

  color:#877a6f;

  font-size:13px;

  line-height:1.55;

}


.admin-homework-center-summary {

  min-width:170px;

  padding:
    17px 20px;

  border:
    1px solid
    rgba(170,112,49,.13);

  border-radius:16px;

  background:
    rgba(255,252,247,.78);

  box-shadow:
    0 12px 34px
    rgba(82,59,36,.05);

  text-align:right;

}


.admin-homework-center-summary small {

  display:block;

  color:#95887c;

  font-size:9px;

  font-weight:650;

  letter-spacing:.04em;

}


.admin-homework-center-summary strong {

  display:block;

  margin-top:4px;

  color:#b26d20;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:30px;

  font-weight:400;

}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

.admin-homework-filter {

  margin:
    24px 0;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:10px;

}


.admin-homework-filter a {

  min-height:52px;

  padding:
    0 15px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:14px;

  border:
    1px solid
    rgba(143,105,67,.10);

  border-radius:13px;

  color:#75695f;

  background:
    rgba(255,255,255,.68);

  text-decoration:none;

  transition:
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;

}


.admin-homework-filter a:hover {

  transform:
    translateY(-1px);

  border-color:
    rgba(185,117,36,.24);

  box-shadow:
    0 9px 22px
    rgba(93,64,35,.06);

}


.admin-homework-filter a.active {

  border-color:
    rgba(185,117,36,.25);

  color:#9e611e;

  background:
    rgba(254,247,237,.92);

}


.admin-homework-filter span {

  font-size:11px;

  font-weight:650;

}


.admin-homework-filter strong {

  min-width:25px;

  height:25px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:999px;

  background:#f0ebe5;

  font-size:10px;

}


.admin-homework-filter a.active strong {

  color:#fff;

  background:#bc7424;

}


/* ---------------------------------------------------------
   LIST
   --------------------------------------------------------- */

.admin-homework-center-list {

  display:grid;

  gap:13px;

}


.admin-homework-center-card {

  display:grid;

  grid-template-columns:
    48px
    minmax(0,1fr)
    190px;

  gap:18px;

  padding:19px;

  border:
    1px solid
    rgba(143,104,65,.10);

  border-radius:17px;

  background:
    rgba(255,255,255,.78);

  box-shadow:
    0 12px 34px
    rgba(80,57,34,.045);

}


.admin-homework-center-card.status-pending {

  border-left:
    3px solid
    #d68a31;

}


.admin-homework-center-card.status-reviewed {

  border-left:
    3px solid
    #79a47c;

}


.admin-homework-center-card.status-revision {

  border-left:
    3px solid
    #c39249;

}


.admin-homework-center-index {

  width:38px;

  height:38px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:12px;

  color:#9b7043;

  background:
    #f7f0e7;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:13px;

}


.admin-homework-center-main {

  min-width:0;

}


.admin-homework-center-meta {

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:15px;

  margin-bottom:8px;

}


.admin-homework-center-meta > span {

  color:#b06d23;

  font-size:9px;

  font-weight:750;

  letter-spacing:.04em;

  text-transform:uppercase;

}


.admin-homework-center-meta time {

  color:#998d83;

  font-size:10px;

}


.admin-homework-center-user {

  display:flex;

  align-items:baseline;

  flex-wrap:wrap;

  gap:
    5px 10px;

}


.admin-homework-center-user strong {

  color:#41372f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:18px;

  font-weight:400;

}


.admin-homework-center-user span,

.admin-homework-center-user small {

  color:#91857b;

  font-size:10px;

}


.admin-homework-center-file {

  margin-top:14px;

  padding:11px 12px;

  display:flex;

  align-items:center;

  gap:11px;

  border:
    1px solid
    rgba(140,104,67,.09);

  border-radius:12px;

  background:
    rgba(249,246,241,.72);

}


.admin-homework-center-file-icon {

  width:40px;

  height:40px;

  flex:
    0 0 40px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:10px;

  color:#a56b2b;

  background:#f3e8da;

  font-size:8px;

  font-weight:800;

}


.admin-homework-center-file small {

  display:block;

  margin-bottom:3px;

  color:#9b8f85;

  font-size:9px;

}


.admin-homework-center-file strong {

  display:block;

  max-width:650px;

  overflow:hidden;

  color:#51463e;

  font-size:11px;

  font-weight:600;

  text-overflow:ellipsis;

  white-space:nowrap;

}


.admin-homework-center-comment,
.admin-homework-center-review-comment {

  margin-top:12px;

  padding-top:11px;

  border-top:
    1px solid
    rgba(140,104,67,.08);

}


.admin-homework-center-comment span,
.admin-homework-center-review-comment span {

  display:block;

  margin-bottom:4px;

  color:#9a8d82;

  font-size:8px;

  font-weight:700;

  text-transform:uppercase;

}


.admin-homework-center-comment p,
.admin-homework-center-review-comment p {

  margin:0;

  color:#5b5148;

  font-size:11px;

  line-height:1.55;

  white-space:pre-wrap;

  overflow-wrap:anywhere;

}


/* ---------------------------------------------------------
   SIDE
   --------------------------------------------------------- */

.admin-homework-center-side {

  display:flex;

  flex-direction:column;

  align-items:stretch;

  gap:9px;

}


.admin-homework-center-status {

  min-height:32px;

  padding:
    0 11px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:999px;

  font-size:9px;

  font-weight:700;

}


.admin-homework-center-status.status-pending {

  color:#9d6528;

  background:#f7e8d1;

}


.admin-homework-center-status.status-reviewed {

  color:#4c7954;

  background:#e6f1e7;

}


.admin-homework-center-status.status-revision {

  color:#966528;

  background:#f4e5c9;

}


.admin-homework-center-download,
.admin-homework-center-open {

  min-height:39px;

  padding:
    0 13px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  box-sizing:border-box;

  border-radius:10px;

  text-decoration:none;

  font-size:9px;

  font-weight:700;

}


.admin-homework-center-download {

  border:
    1px solid
    rgba(158,111,60,.14);

  color:#7e6e60;

  background:#fff;

}


.admin-homework-center-open {

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #b97121,
      #d39439
    );

  box-shadow:
    0 9px 20px
    rgba(169,99,25,.12);

}


.admin-homework-center-open span {

  font-size:14px;

}


/* ---------------------------------------------------------
   EMPTY
   --------------------------------------------------------- */

.admin-homework-center-empty {

  padding:
    65px 25px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border:
    1px dashed
    rgba(147,109,69,.18);

  border-radius:18px;

  color:#92867b;

  text-align:center;

}


.admin-homework-center-empty > span {

  width:48px;

  height:48px;

  margin-bottom:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  color:#6f9a76;

  background:#edf5ee;

  font-size:21px;

}


.admin-homework-center-empty strong {

  color:#554a42;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:18px;

  font-weight:400;

}


.admin-homework-center-empty p {

  max-width:420px;

  margin:
    7px 0 0;

  font-size:11px;

  line-height:1.55;

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:900px) {

  .admin-homework-filter {

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }


  .admin-homework-center-card {

    grid-template-columns:
      42px
      minmax(0,1fr);

  }


  .admin-homework-center-side {

    grid-column:
      2;

    display:grid;

    grid-template-columns:
      repeat(3,minmax(0,1fr));

  }

}


@media(max-width:620px) {

  .admin-homework-center-head {

    align-items:
      flex-start;

  }


  .admin-homework-center-summary {

    width:100%;

    box-sizing:border-box;

    text-align:left;

  }


  .admin-homework-filter {

    grid-template-columns:
      1fr;

  }


  .admin-homework-center-card {

    grid-template-columns:
      1fr;

  }


  .admin-homework-center-index {

    display:none;

  }


  .admin-homework-center-side {

    grid-column:
      1;

    grid-template-columns:
      1fr;

  }


  .admin-homework-center-meta {

    align-items:flex-start;

    flex-direction:column;

    gap:5px;

  }

}



/* ==========================================================
   AG REAL COURSE PROGRESS V990
   ========================================================== */

.course-material.is-completed {
  border-color:
    rgba(83,125,89,.22) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.78),
      rgba(240,248,239,.70)
    ) !important;

  box-shadow:
    inset 3px 0 0
    rgba(91,137,97,.55),
    0 18px 42px
    rgba(63,81,60,.045) !important;
}


.course-material.is-completed
.course-material-number {
  color:#5f8063 !important;
}


.course-material-status.is-completed,
.course-material.is-completed
.course-material-status {
  color:#4d7654 !important;

  background:
    #e1efe2 !important;
}


.course-material-completion {
  margin-top:18px;

  padding-top:16px;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;

  border-top:
    1px solid
    rgba(127,96,63,.09);
}


.course-material-complete-button {
  min-height:40px;

  padding:
    0 15px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border:
    1px solid
    rgba(170,112,44,.24);

  border-radius:
    999px;

  color:
    #946126;

  background:
    rgba(255,249,240,.82);

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    650;

  cursor:
    pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}


.course-material-complete-button:hover:not(:disabled) {
  transform:
    translateY(-1px);

  border-color:
    rgba(170,112,44,.42);

  background:
    #fff8ed;
}


.course-material-complete-button.is-loading {
  opacity:.65;

  cursor:
    wait;
}


.course-material-complete-button.is-completed {
  color:
    #52775a;

  border-color:
    rgba(85,126,91,.20);

  background:
    rgba(229,241,229,.82);

  cursor:
    default;
}


.course-material-complete-icon {
  width:18px;
  height:18px;

  display:grid;
  place-items:center;

  flex:
    0 0 18px;

  border-radius:
    50%;

  font-size:
    13px;

  line-height:
    1;
}


.course-material-completion > small {
  color:
    #968a7d;

  font-size:
    9px;

  white-space:
    nowrap;
}


.course-material-progress-track > span {
  transition:
    width .35s
    cubic-bezier(.22,.61,.36,1);
}


@media(max-width:720px) {

  .course-material-completion {
    align-items:flex-start;
    flex-direction:column;
  }


  .course-material-complete-button {
    width:100%;
  }

}


/* ==========================================================
   AG ADMIN STUDENT PROGRESS V991
   ========================================================== */

.ag-student-progress-page {
  max-width:1320px;
}


.ag-student-progress-intro {
  max-width:620px;

  margin:10px 0 0;

  color:#8d8177;

  font-size:12px;

  line-height:1.55;
}


.ag-student-progress-total {
  min-width:135px;

  padding:16px 20px;

  border:
    1px solid
    rgba(153,108,58,.12);

  border-radius:15px;

  background:
    rgba(255,252,247,.78);

  box-shadow:
    0 12px 32px
    rgba(76,54,33,.045);

  text-align:center;
}


.ag-student-progress-total small {
  display:block;

  color:#9c8f84;

  font-size:8px;

  font-weight:750;

  letter-spacing:.12em;
}


.ag-student-progress-total strong {
  display:block;

  margin-top:4px;

  color:#a66b28;

  font:
    400 30px
    Georgia,
    "Times New Roman",
    serif;
}



/* LIST */

.ag-student-progress-list {
  gap:14px;
}



/* CARD */

.feedback-student.ag-student-progress-card {
  position:relative;

  padding:0;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    190px;

  align-items:stretch;

  gap:0;

  overflow:hidden;

  border-radius:18px;

  color:inherit;

  text-decoration:none;

  background:
    rgba(255,253,249,.90);
}


.ag-student-progress-card::before {
  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:0;

  width:3px;

  background:#d1c5b8;
}


.ag-student-progress-card.progress-in-progress::before {
  background:#c68a42;
}


.ag-student-progress-card.progress-completed::before {
  background:#759879;
}


.ag-student-progress-main {
  min-width:0;

  padding:22px 24px;

  display:grid;

  grid-template-columns:
    minmax(210px,.85fr)
    minmax(300px,1.35fr)
    minmax(250px,1fr);

  align-items:center;

  gap:28px;
}



/* PERSON */

.ag-student-progress-person {
  min-width:0;

  display:flex;

  align-items:center;

  gap:13px;
}


.ag-student-progress-avatar {
  width:44px;
  height:44px;

  flex:0 0 44px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:
    1px solid
    rgba(166,109,43,.14);

  border-radius:50%;

  color:#9e682a;

  background:
    linear-gradient(
      145deg,
      #fbf4e9,
      #f3e5d2
    );

  font:
    400 18px
    Georgia,
    "Times New Roman",
    serif;
}


.ag-student-progress-identity {
  min-width:0;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:3px;
}


.ag-student-progress-identity > strong {
  max-width:100%;

  overflow:hidden;

  color:#453a31;

  font:
    400 17px
    Georgia,
    "Times New Roman",
    serif;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.ag-student-progress-identity > span,
.ag-student-progress-identity > small {
  max-width:100%;

  overflow:hidden;

  color:#92867b;

  font-size:9px;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.ag-student-progress-since {
  margin-top:4px;

  color:#aaa097 !important;

  font-size:8px !important;
}



/* PROGRESS */

.ag-student-progress-block {
  min-width:0;

  padding:0 25px;

  border-left:
    1px solid
    rgba(137,101,63,.09);

  border-right:
    1px solid
    rgba(137,101,63,.09);
}


.ag-student-progress-heading {
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:15px;
}


.ag-student-progress-heading > div {
  min-width:0;
}


.ag-student-progress-heading small {
  display:block;

  margin-bottom:5px;

  color:#9c8f83;

  font-size:8px;

  font-weight:750;

  letter-spacing:.10em;
}


.ag-student-progress-heading strong {
  display:block;

  color:#51463d;

  font-size:11px;

  font-weight:650;
}


.ag-student-progress-state {
  flex:0 0 auto;

  padding:6px 9px;

  border-radius:999px;

  color:#82776e;

  background:#eee9e3;

  font-size:8px;

  font-weight:700;

  white-space:nowrap;
}


.ag-student-progress-state.state-in-progress {
  color:#966327;

  background:#f6e7d1;
}


.ag-student-progress-state.state-completed {
  color:#4d7454;

  background:#e2efe3;
}


.ag-student-progress-line {
  margin-top:14px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    42px;

  align-items:center;

  gap:11px;
}


.ag-student-progress-track {
  height:6px;

  overflow:hidden;

  border-radius:999px;

  background:#ece7e1;
}


.ag-student-progress-track > span {
  display:block;

  width:0;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #b57630,
      #d49a4d
    );
}


.progress-completed
.ag-student-progress-track > span {
  background:
    linear-gradient(
      90deg,
      #688d6d,
      #8cab8f
    );
}


.ag-student-progress-percent {
  color:#8c602f;

  font-size:11px;

  text-align:right;
}


.progress-completed
.ag-student-progress-percent {
  color:#55775a;
}



/* HOMEWORK */

.ag-student-progress-homework {
  min-width:0;
}


.ag-student-progress-section-label {
  display:block;

  margin-bottom:8px;

  color:#9c8f83;

  font-size:8px;

  font-weight:750;

  letter-spacing:.10em;
}


.ag-student-progress-homework-stats {
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:5px;
}


.ag-student-progress-homework-stats > span {
  min-width:0;

  padding:7px 5px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:2px;

  border-radius:9px;

  background:
    rgba(244,240,235,.66);

  text-align:center;
}


.ag-student-progress-homework-stats strong {
  color:#5b5047;

  font-size:12px;
}


.ag-student-progress-homework-stats small {
  max-width:100%;

  overflow:hidden;

  color:#9b9086;

  font-size:7px;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.ag-student-progress-homework-stats
.has-pending {
  background:#f8ead7;
}


.ag-student-progress-homework-stats
.has-pending strong {
  color:#a66b28;
}


.ag-student-progress-homework-stats
.has-revision {
  background:#f5e7d4;
}


.ag-student-progress-homework-stats
.has-revision strong {
  color:#956129;
}



/* ACTION */

.ag-student-progress-action {
  position:relative;

  padding:20px;

  display:flex;

  flex-direction:column;

  align-items:stretch;

  justify-content:center;

  gap:9px;

  border-left:
    1px solid
    rgba(137,101,63,.09);

  background:
    rgba(249,246,241,.52);
}


.ag-student-progress-unread {
  position:absolute;

  top:12px;
  right:12px;

  min-width:20px;
  height:20px;

  padding:0 5px;

  display:flex;

  align-items:center;

  justify-content:center;

  box-sizing:border-box;

  border-radius:999px;
}


.ag-student-progress-open,
.ag-student-progress-review {
  min-height:40px;

  padding:0 13px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  box-sizing:border-box;

  border-radius:10px;

  text-decoration:none;

  font-size:9px;

  font-weight:700;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


.ag-student-progress-open {
  color:white;

  background:
    linear-gradient(
      145deg,
      #b87325,
      #d19743
    );

  box-shadow:
    0 9px 20px
    rgba(160,96,27,.11);
}


.ag-student-progress-open b {
  font-size:14px;

  font-weight:400;
}


.ag-student-progress-review {
  justify-content:center;

  border:
    1px solid
    rgba(166,109,43,.17);

  color:#946127;

  background:
    rgba(255,250,243,.88);
}


.ag-student-progress-open:hover,
.ag-student-progress-review:hover {
  transform:
    translateY(-1px);
}



/* RESPONSIVE */

@media(max-width:1100px) {

  .feedback-student.ag-student-progress-card {
    grid-template-columns:
      minmax(0,1fr)
      170px;
  }


  .ag-student-progress-main {
    grid-template-columns:
      minmax(190px,.8fr)
      minmax(260px,1.2fr);

    gap:22px;
  }


  .ag-student-progress-homework {
    grid-column:
      1 / -1;

    padding-top:16px;

    border-top:
      1px solid
      rgba(137,101,63,.08);
  }


  .ag-student-progress-homework-stats {
    max-width:500px;
  }

}


@media(max-width:760px) {

  .feedback-student.ag-student-progress-card {
    grid-template-columns:
      1fr;
  }


  .ag-student-progress-main {
    grid-template-columns:
      1fr;

    gap:20px;
  }


  .ag-student-progress-block {
    padding:18px 0;

    border-left:0;
    border-right:0;

    border-top:
      1px solid
      rgba(137,101,63,.09);

    border-bottom:
      1px solid
      rgba(137,101,63,.09);
  }


  .ag-student-progress-homework {
    grid-column:auto;

    padding-top:0;

    border-top:0;
  }


  .ag-student-progress-action {
    border-top:
      1px solid
      rgba(137,101,63,.09);

    border-left:0;
  }


  .ag-student-progress-unread {
    top:9px;
    right:9px;
  }

}


@media(max-width:520px) {

  .ag-student-progress-homework-stats {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .ag-student-progress-heading {
    flex-direction:column;
  }

}



/* ==========================================================
   AG STUDENT DASHBOARD PREMIUM V992
   ========================================================== */

.ag-student-v992-page {
  max-width:1480px;
}


.ag-student-v992-page-head {
  margin-bottom:42px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}


.ag-student-v992-title {
  min-width:0;
}


.ag-student-v992-breadcrumb {
  margin-bottom:28px;

  display:flex;
  align-items:center;
  gap:12px;
}


.ag-student-v992-breadcrumb a {
  min-height:26px;

  padding:0 13px;

  display:inline-flex;
  align-items:center;

  border:
    1px solid
    rgba(173,113,45,.18);

  border-radius:999px;

  color:#a26725;

  background:
    rgba(255,253,248,.72);

  font-size:10px;
  font-weight:650;

  text-decoration:none;
}


.ag-student-v992-breadcrumb span {
  color:#a46625;

  font-size:10px;
  font-weight:750;

  letter-spacing:.14em;
}


.ag-student-v992-title h1 {
  margin:0;

  color:#352c25;

  font:
    400 clamp(42px,5vw,68px)/1
    Georgia,
    "Times New Roman",
    serif;
}


.ag-student-v992-title p {
  margin:23px 0 0;

  color:#81766c;

  font-size:13px;
  line-height:1.6;
}


.ag-student-v992-total {
  min-width:135px;

  padding:18px 22px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(154,108,58,.12);

  border-radius:17px;

  background:
    rgba(255,253,249,.82);

  box-shadow:
    0 15px 40px
    rgba(74,54,34,.055);

  text-align:center;
}


.ag-student-v992-total span {
  display:block;

  color:#a1978e;

  font-size:8px;
  font-weight:750;

  letter-spacing:.14em;
}


.ag-student-v992-total strong {
  display:block;

  margin-top:8px;

  color:#b46c1d;

  font:
    400 30px/1
    Georgia,
    "Times New Roman",
    serif;
}



/* ==========================================================
   LAYOUT
   ========================================================== */

.ag-student-v992-layout {
  min-height:620px;

  display:grid;

  grid-template-columns:
    420px
    minmax(0,1fr);

  overflow:hidden;

  border:
    1px solid
    rgba(149,104,57,.10);

  border-radius:22px;

  background:
    rgba(255,253,249,.87);

  box-shadow:
    0 24px 65px
    rgba(82,58,34,.07);
}



/* ==========================================================
   LEFT
   ========================================================== */

.ag-student-v992-sidebar {
  min-width:0;

  border-right:
    1px solid
    rgba(145,102,60,.10);

  background:
    linear-gradient(
      180deg,
      rgba(255,253,250,.82),
      rgba(252,248,242,.72)
    );
}


.ag-student-v992-sidebar-head {
  padding:28px 24px 20px;

  border-bottom:
    1px solid
    rgba(142,101,61,.08);
}


.ag-student-v992-sidebar-head > div {
  margin-bottom:18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}


.ag-student-v992-sidebar-head > div > span {
  color:#6f645b;

  font-size:10px;
  font-weight:750;

  letter-spacing:.12em;
}


.ag-student-v992-sidebar-head > div > strong {
  min-width:26px;
  height:26px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#9b6b35;

  background:#f0eae3;

  font-size:10px;
}


.ag-student-v992-search {
  height:44px;

  padding:0 14px;

  display:flex;
  align-items:center;
  gap:10px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(145,102,61,.12);

  border-radius:11px;

  background:
    rgba(255,255,255,.75);
}


.ag-student-v992-search svg {
  width:17px;
  height:17px;

  flex:0 0 17px;

  fill:none;

  stroke:#a99d91;
  stroke-width:1.7;
  stroke-linecap:round;
}


.ag-student-v992-search input {
  width:100%;

  padding:0;

  border:0;
  outline:0;

  color:#5a5047;

  background:transparent;

  font:inherit;
  font-size:10px;
}


.ag-student-v992-search input::placeholder {
  color:#a79c92;
}


.ag-student-v992-student-list {
  padding:14px 10px;

  display:grid;
  gap:7px;
}


.ag-student-v992-student {
  position:relative;

  width:100%;
  min-height:82px;

  padding:12px 13px;

  display:grid;

  grid-template-columns:
    46px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:12px;

  box-sizing:border-box;

  border:
    1px solid transparent;

  border-radius:13px;

  color:inherit;

  background:transparent;

  text-align:left;

  cursor:pointer;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}


.ag-student-v992-student::before {
  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:-10px;

  width:3px;

  border-radius:0 4px 4px 0;

  background:transparent;
}


.ag-student-v992-student:hover {
  background:
    rgba(251,247,240,.78);
}


.ag-student-v992-student.is-active {
  border-color:
    rgba(162,111,53,.11);

  background:
    linear-gradient(
      135deg,
      rgba(255,253,249,.96),
      rgba(247,239,227,.82)
    );

  box-shadow:
    0 8px 24px
    rgba(78,55,34,.045);
}


.ag-student-v992-student.is-active::before {
  background:#4d9a6b;
}


.ag-student-v992-list-avatar {
  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(183,117,40,.19);

  border-radius:50%;

  color:#ad6b22;

  background:
    linear-gradient(
      145deg,
      #fcf6ec,
      #f5e8d4
    );

  font:
    400 18px
    Georgia,
    "Times New Roman",
    serif;
}


.ag-student-v992-list-copy {
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:5px;
}


.ag-student-v992-list-copy strong {
  overflow:hidden;

  color:#40352d;

  font:
    400 15px
    Georgia,
    "Times New Roman",
    serif;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.ag-student-v992-list-copy small {
  overflow:hidden;

  color:#978b80;

  font-size:9px;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.ag-student-v992-list-progress {
  min-width:46px;

  padding:6px 9px;

  border-radius:999px;

  color:#527e5c;

  background:#e3f0e5;

  font-size:9px;
  font-weight:750;

  text-align:center;
}


.ag-student-v992-list-unread {
  position:absolute;

  top:7px;
  right:7px;

  min-width:17px;
  height:17px;

  padding:0 4px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-sizing:border-box;

  border-radius:999px;

  color:#fff;

  background:#c97b20;

  font-size:7px;
  font-weight:800;
}


.ag-student-v992-search-empty {
  margin:20px;

  padding:25px;

  border:
    1px dashed
    rgba(145,102,61,.15);

  border-radius:12px;

  color:#9b9086;

  font-size:10px;

  text-align:center;
}



/* ==========================================================
   RIGHT
   ========================================================== */

.ag-student-v992-content {
  min-width:0;

  padding:28px;

  background:
    rgba(255,254,251,.66);
}


.ag-student-v992-detail[hidden] {
  display:none !important;
}


.ag-student-v992-detail {
  display:grid;

  gap:16px;
}



/* PROFILE */

.ag-student-v992-profile {
  padding:0 2px 4px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}


.ag-student-v992-profile-main {
  min-width:0;

  display:flex;
  align-items:center;
  gap:18px;
}


.ag-student-v992-profile-avatar {
  width:72px;
  height:72px;

  flex:0 0 72px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(178,113,39,.17);

  border-radius:50%;

  color:#b16c21;

  background:
    radial-gradient(
      circle at 40% 30%,
      #fffaf2,
      #f5e6cf
    );

  box-shadow:
    0 8px 24px
    rgba(128,84,36,.06);

  font:
    400 28px
    Georgia,
    "Times New Roman",
    serif;
}


.ag-student-v992-profile-copy {
  min-width:0;
}


.ag-student-v992-profile-copy h2 {
  margin:0 0 10px;

  overflow:hidden;

  color:#392f28;

  font:
    400 23px
    Georgia,
    "Times New Roman",
    serif;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.ag-student-v992-profile-meta {
  display:flex;
  flex-wrap:wrap;
  gap:7px 17px;
}


.ag-student-v992-profile-meta span {
  display:inline-flex;
  align-items:center;
  gap:7px;

  color:#8e8277;

  font-size:9px;
}


.ag-student-v992-profile-meta svg {
  width:14px;
  height:14px;

  fill:none;

  stroke:#9a8c7e;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.ag-student-v992-profile-actions {
  width:220px;

  flex:0 0 220px;

  display:grid;
  gap:8px;
}


.ag-student-v992-primary-button,
.ag-student-v992-secondary-button {
  min-height:43px;

  padding:0 15px;

  display:flex;
  align-items:center;

  box-sizing:border-box;

  border-radius:11px;

  text-decoration:none;

  font-size:9px;
  font-weight:700;
}


.ag-student-v992-primary-button {
  justify-content:space-between;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #bd7319,
      #db962d
    );

  box-shadow:
    0 10px 25px
    rgba(178,101,16,.16);
}


.ag-student-v992-primary-button b {
  font-size:14px;
  font-weight:400;
}


.ag-student-v992-secondary-button {
  justify-content:center;

  border:
    1px solid
    rgba(179,113,37,.22);

  color:#a1621e;

  background:
    rgba(255,252,247,.78);
}



/* ==========================================================
   PANELS
   ========================================================== */

.ag-student-v992-panel {
  padding:22px;

  border:
    1px solid
    rgba(147,104,59,.10);

  border-radius:16px;

  background:
    rgba(255,255,255,.68);

  box-shadow:
    0 9px 28px
    rgba(74,53,32,.035);
}


.ag-student-v992-panel-title {
  margin-bottom:17px;
}


.ag-student-v992-panel-title > span,
.ag-student-v992-panel-title > div > span {
  color:#75685d;

  font-size:9px;
  font-weight:750;

  letter-spacing:.12em;
}



/* ==========================================================
   PROGRESS
   ========================================================== */

.ag-student-v992-progress-title {
  margin-top:7px;

  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
}


.ag-student-v992-progress-title h3 {
  margin:0;

  color:#41362e;

  font:
    400 21px
    Georgia,
    "Times New Roman",
    serif;
}


.ag-student-v992-state {
  padding:6px 10px;

  border-radius:999px;

  color:#83776c;

  background:#eee9e4;

  font-size:8px;
  font-weight:700;
}


.ag-student-v992-state.state-in-progress {
  color:#9b6326;

  background:#f6e7d1;
}


.ag-student-v992-state.state-completed {
  color:#4d7a56;

  background:#e3f1e5;
}


.ag-student-v992-progress-body {
  display:grid;

  grid-template-columns:
    minmax(270px,1.45fr)
    150px
    minmax(220px,.9fr);

  align-items:center;

  gap:25px;
}


.ag-student-v992-progress-linear {
  min-width:0;
}


.ag-student-v992-progress-track {
  height:8px;

  overflow:hidden;

  border-radius:999px;

  background:#eae5df;
}


.ag-student-v992-progress-track span {
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #4c9569,
      #6db083
    );
}


.ag-student-v992-progress-linear > strong {
  display:block;

  margin-top:9px;

  color:#4b8a62;

  font-size:11px;
}


.ag-student-v992-progress-ring {
  --p:
    calc(var(--progress) * 1%);

  width:118px;
  height:118px;

  margin:auto;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    conic-gradient(
      #4d996b var(--p),
      #e7e4df 0
    );
}


.ag-student-v992-progress-ring::before {
  content:"";

  grid-area:1 / 1;

  width:94px;
  height:94px;

  border-radius:50%;

  background:#fffdf9;
}


.ag-student-v992-progress-ring > div {
  position:relative;

  grid-area:1 / 1;

  z-index:1;

  text-align:center;
}


.ag-student-v992-progress-ring strong {
  display:block;

  color:#43855d;

  font:
    600 22px
    Georgia,
    "Times New Roman",
    serif;
}


.ag-student-v992-progress-ring small {
  display:block;

  margin-top:3px;

  color:#9c9187;

  font-size:7px;
}


.ag-student-v992-progress-message {
  min-height:80px;

  padding:14px;

  display:flex;
  align-items:center;
  gap:12px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(75,145,98,.12);

  border-radius:12px;

  background:
    rgba(235,246,237,.72);
}


.ag-student-v992-progress-message.state-in-progress {
  border-color:
    rgba(191,125,45,.13);

  background:
    rgba(252,244,231,.76);
}


.ag-student-v992-progress-message.state-not-started {
  border-color:
    rgba(125,114,103,.10);

  background:
    rgba(245,242,238,.76);
}


.ag-student-v992-progress-message-icon {
  width:28px;
  height:28px;

  flex:0 0 28px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#fff;

  background:#4f9b6c;

  font-size:11px;
  font-weight:800;
}


.ag-student-v992-progress-message.state-in-progress
.ag-student-v992-progress-message-icon {
  background:#c68635;
}


.ag-student-v992-progress-message.state-not-started
.ag-student-v992-progress-message-icon {
  background:#9e948b;
}


.ag-student-v992-progress-message strong {
  display:block;

  color:#477652;

  font-size:10px;
}


.ag-student-v992-progress-message.state-in-progress strong {
  color:#916128;
}


.ag-student-v992-progress-message.state-not-started strong {
  color:#6d655e;
}


.ag-student-v992-progress-message p {
  margin:5px 0 0;

  color:#8b8076;

  font-size:8px;
  line-height:1.45;
}



/* ==========================================================
   HOMEWORK
   ========================================================== */

.ag-student-v992-homework-grid {
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.ag-student-v992-homework-stat {
  min-height:90px;

  padding:13px;

  display:grid;

  grid-template-columns:
    34px
    1fr;

  grid-template-rows:
    1fr
    1fr;

  align-items:center;

  column-gap:10px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(145,104,62,.09);

  border-radius:13px;

  background:
    rgba(248,245,241,.72);
}


.ag-student-v992-homework-stat.pending {
  border-color:
    rgba(195,124,35,.13);

  background:
    rgba(252,238,218,.76);
}


.ag-student-v992-homework-stat.reviewed {
  border-color:
    rgba(71,143,94,.12);

  background:
    rgba(234,245,236,.76);
}


.ag-student-v992-homework-stat.revision {
  border-color:
    rgba(199,105,58,.12);

  background:
    rgba(250,235,225,.75);
}


.ag-student-v992-homework-stat .icon {
  grid-row:
    1 / 3;

  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#978779;

  font-size:17px;
}


.ag-student-v992-homework-stat .icon.pending {
  color:#b87324;
}


.ag-student-v992-homework-stat .icon.reviewed {
  color:#4d9566;
}


.ag-student-v992-homework-stat .icon.revision {
  color:#c06a3e;
}


.ag-student-v992-homework-stat strong {
  align-self:end;

  color:#4d4238;

  font:
    600 18px
    Georgia,
    "Times New Roman",
    serif;
}


.ag-student-v992-homework-stat small {
  align-self:start;

  color:#91867c;

  font-size:8px;
}



/* ==========================================================
   FEEDBACK
   ========================================================== */

.ag-student-v992-feedback {
  min-height:92px;

  padding:16px 18px;

  display:grid;

  grid-template-columns:
    46px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:14px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(145,103,59,.10);

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      rgba(252,248,242,.82),
      rgba(255,254,251,.83)
    );
}


.ag-student-v992-feedback-icon {
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #b66d1d,
      #d69635
    );
}


.ag-student-v992-feedback-icon svg {
  width:20px;
  height:20px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.ag-student-v992-feedback-copy {
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:3px;
}


.ag-student-v992-feedback-copy > strong {
  color:#443a32;

  font-size:11px;
}


.ag-student-v992-feedback-copy > span {
  color:#786d64;

  font-size:9px;
}


.ag-student-v992-feedback-copy > span b {
  color:#b36b1d;
}


.ag-student-v992-feedback-copy > small {
  color:#9a8f84;

  font-size:8px;
}


.ag-student-v992-feedback-link {
  min-height:39px;

  padding:0 15px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;

  border:
    1px solid
    rgba(179,112,35,.20);

  border-radius:10px;

  color:#a26420;

  background:
    rgba(255,252,247,.72);

  font-size:9px;
  font-weight:700;

  text-decoration:none;
}


.ag-student-v992-feedback-link span {
  font-size:13px;
}



/* ==========================================================
   EMPTY
   ========================================================== */

.ag-student-v992-empty {
  padding:80px 30px;

  display:flex;
  flex-direction:column;
  align-items:center;

  border:
    1px dashed
    rgba(151,108,65,.17);

  border-radius:20px;

  text-align:center;
}


.ag-student-v992-empty > div {
  width:50px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#a16b31;

  background:#f4eadf;

  font-size:22px;
}


.ag-student-v992-empty strong {
  margin-top:15px;

  color:#4c423a;

  font:
    400 20px
    Georgia,
    "Times New Roman",
    serif;
}


.ag-student-v992-empty p {
  margin:7px 0 0;

  color:#958a80;

  font-size:10px;
}



/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1200px) {

  .ag-student-v992-layout {
    grid-template-columns:
      330px
      minmax(0,1fr);
  }


  .ag-student-v992-progress-body {
    grid-template-columns:
      1fr
      125px;
  }


  .ag-student-v992-progress-message {
    grid-column:
      1 / -1;
  }


  .ag-student-v992-homework-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:900px) {

  .ag-student-v992-layout {
    grid-template-columns:
      1fr;
  }


  .ag-student-v992-sidebar {
    border-right:0;

    border-bottom:
      1px solid
      rgba(145,102,60,.10);
  }


  .ag-student-v992-student-list {
    display:flex;

    overflow:auto;
  }


  .ag-student-v992-student {
    min-width:270px;
  }


  .ag-student-v992-student::before {
    top:auto;
    left:0;
    right:0;
    bottom:-10px;

    width:auto;
    height:3px;
  }

}


@media(max-width:700px) {

  .ag-student-v992-page-head {
    align-items:flex-start;
    flex-direction:column;
  }


  .ag-student-v992-total {
    width:100%;

    text-align:left;
  }


  .ag-student-v992-content {
    padding:18px;
  }


  .ag-student-v992-profile {
    align-items:flex-start;
    flex-direction:column;
  }


  .ag-student-v992-profile-actions {
    width:100%;

    grid-template-columns:
      1fr 1fr;

    flex-basis:auto;
  }


  .ag-student-v992-progress-body {
    grid-template-columns:
      1fr;
  }


  .ag-student-v992-progress-ring {
    margin:5px 0;
  }


  .ag-student-v992-progress-message {
    grid-column:auto;
  }


  .ag-student-v992-feedback {
    grid-template-columns:
      42px
      1fr;
  }


  .ag-student-v992-feedback-link {
    grid-column:
      1 / -1;
  }

}


@media(max-width:480px) {

  .ag-student-v992-title h1 {
    font-size:39px;
  }


  .ag-student-v992-homework-grid {
    grid-template-columns:
      1fr;
  }


  .ag-student-v992-profile-actions {
    grid-template-columns:
      1fr;
  }

}



/* ==========================================================
   AG STUDENT DASHBOARD POLISH V993
   BIGGER TYPOGRAPHY + CLEAN ACTIONS
   ========================================================== */


/* ----------------------------------------------------------
   GENERAL PAGE READABILITY
   ---------------------------------------------------------- */

.ag-student-v992-title p {

  font-size:
    15px;

  line-height:
    1.65;

}


.ag-student-v992-breadcrumb a {

  min-height:
    29px;

  padding:
    0 14px;

  font-size:
    11px;

}


.ag-student-v992-breadcrumb span {

  font-size:
    11px;

}


.ag-student-v992-total span {

  font-size:
    9px;

}


.ag-student-v992-total strong {

  font-size:
    32px;

}



/* ----------------------------------------------------------
   LEFT PARTICIPANT COLUMN
   ---------------------------------------------------------- */

.ag-student-v992-sidebar-head > div > span {

  font-size:
    12px;

}


.ag-student-v992-sidebar-head > div > strong {

  min-width:
    29px;

  height:
    29px;

  font-size:
    11px;

}


.ag-student-v992-search {

  height:
    48px;

}


.ag-student-v992-search input {

  font-size:
    12px;

}


.ag-student-v992-search svg {

  width:
    18px;

  height:
    18px;

}


.ag-student-v992-student {

  min-height:
    92px;

  grid-template-columns:
    50px
    minmax(0,1fr)
    auto;

}


.ag-student-v992-list-avatar {

  width:
    48px;

  height:
    48px;

  font-size:
    20px;

}


.ag-student-v992-list-copy strong {

  font-size:
    17px;

}


.ag-student-v992-list-copy small {

  font-size:
    10px;

  line-height:
    1.45;

}


.ag-student-v992-list-progress {

  min-width:
    50px;

  padding:
    7px 10px;

  font-size:
    11px;

}



/* ----------------------------------------------------------
   STUDENT PROFILE
   ---------------------------------------------------------- */

.ag-student-v992-profile {

  min-height:
    104px;

}


.ag-student-v992-profile-avatar {

  width:
    76px;

  height:
    76px;

  flex-basis:
    76px;

  font-size:
    30px;

}


.ag-student-v992-profile-copy h2 {

  margin-bottom:
    12px;

  font-size:
    27px;

}


.ag-student-v992-profile-meta {

  gap:
    9px 20px;

}


.ag-student-v992-profile-meta span {

  font-size:
    11px;

}


.ag-student-v992-profile-meta svg {

  width:
    16px;

  height:
    16px;

}



/* ----------------------------------------------------------
   ONLY TOP BUTTON = HOMEWORK
   ---------------------------------------------------------- */

.ag-student-v992-profile-actions {

  width:
    235px;

  flex:
    0 0 235px;

  display:
    block;

}


.ag-student-v993-homework-button {

  width:
    100%;

  min-height:
    50px;

  padding:
    0 19px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border:
    1px solid
    rgba(210,126,25,.42);

  border-radius:
    12px;

  color:
    #b66715;

  background:
    rgba(255,252,247,.90);

  box-shadow:
    0 8px 22px
    rgba(164,96,25,.055);

  font-size:
    12px;

  font-weight:
    750;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;

}


.ag-student-v993-homework-button:hover {

  transform:
    translateY(-1px);

  border-color:
    rgba(210,126,25,.62);

  background:
    #fffaf2;

  box-shadow:
    0 10px 25px
    rgba(164,96,25,.09);

}


.ag-student-v993-homework-icon {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #cf7814;

  font-size:
    16px;

}



/* ----------------------------------------------------------
   PANEL TYPOGRAPHY
   ---------------------------------------------------------- */

.ag-student-v992-panel {

  padding:
    25px;

}


.ag-student-v992-panel-title > span,
.ag-student-v992-panel-title > div > span {

  font-size:
    11px;

}


.ag-student-v992-progress-title {

  margin-top:
    10px;

}


.ag-student-v992-progress-title h3 {

  font-size:
    25px;

}


.ag-student-v992-state {

  padding:
    7px 11px;

  font-size:
    10px;

}


.ag-student-v992-progress-track {

  height:
    9px;

}


.ag-student-v992-progress-linear > strong {

  margin-top:
    10px;

  font-size:
    13px;

}


.ag-student-v992-progress-ring {

  width:
    126px;

  height:
    126px;

}


.ag-student-v992-progress-ring::before {

  width:
    99px;

  height:
    99px;

}


.ag-student-v992-progress-ring strong {

  font-size:
    27px;

}


.ag-student-v992-progress-ring small {

  margin-top:
    4px;

  font-size:
    9px;

}


.ag-student-v992-progress-message {

  min-height:
    92px;

  padding:
    16px;

}


.ag-student-v992-progress-message-icon {

  width:
    32px;

  height:
    32px;

  flex-basis:
    32px;

  font-size:
    13px;

}


.ag-student-v992-progress-message strong {

  font-size:
    12px;

}


.ag-student-v992-progress-message p {

  margin-top:
    6px;

  font-size:
    10px;

  line-height:
    1.5;

}



/* ----------------------------------------------------------
   HOMEWORK
   ---------------------------------------------------------- */

.ag-student-v992-homework-grid {

  gap:
    14px;

}


.ag-student-v992-homework-stat {

  min-height:
    102px;

  padding:
    16px;

  grid-template-columns:
    40px
    1fr;

  column-gap:
    13px;

}


.ag-student-v992-homework-stat .icon {

  width:
    36px;

  height:
    36px;

  font-size:
    20px;

}


.ag-student-v992-homework-stat strong {

  font-size:
    22px;

}


.ag-student-v992-homework-stat small {

  margin-top:
    2px;

  font-size:
    10px;

}



/* ----------------------------------------------------------
   FEEDBACK
   ---------------------------------------------------------- */

.ag-student-v992-feedback {

  min-height:
    105px;

  padding:
    19px 21px;

  grid-template-columns:
    50px
    minmax(0,1fr)
    auto;

  gap:
    17px;

}


.ag-student-v992-feedback-icon {

  width:
    46px;

  height:
    46px;

}


.ag-student-v992-feedback-icon svg {

  width:
    22px;

  height:
    22px;

}


.ag-student-v992-feedback-copy {

  gap:
    5px;

}


.ag-student-v992-feedback-copy > strong {

  font-size:
    14px;

}


.ag-student-v992-feedback-copy > span {

  font-size:
    11px;

}


.ag-student-v992-feedback-copy > small {

  font-size:
    10px;

}


.ag-student-v992-feedback-link {

  min-height:
    44px;

  padding:
    0 18px;

  gap:
    13px;

  font-size:
    11px;

}


.ag-student-v992-feedback-link span {

  font-size:
    15px;

}



/* ----------------------------------------------------------
   RESPONSIVE V993
   ---------------------------------------------------------- */

@media(max-width:700px) {

  .ag-student-v992-profile-actions {

    width:
      100%;

    flex-basis:
      auto;

  }


  .ag-student-v993-homework-button {

    width:
      100%;

  }

}


@media(max-width:480px) {

  .ag-student-v992-profile-copy h2 {

    font-size:
      23px;

  }


  .ag-student-v992-progress-title h3 {

    font-size:
      22px;

  }


  .ag-student-v992-feedback-copy > strong {

    font-size:
      13px;

  }

}



/* ==========================================================
   AG COURSE COMPLETION UI V1000
   ========================================================== */

.ag-course-completion {

  margin:
    16px 0 22px;

  padding:
    18px 20px;

  display:grid;

  grid-template-columns:
    46px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:15px;

  border:
    1px solid
    rgba(154,116,75,.11);

  border-radius:15px;

  background:
    rgba(250,247,242,.78);

}


.ag-course-completion-icon {

  width:42px;

  height:42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  color:#8f8277;

  background:#eee9e3;

  font-size:17px;

  font-weight:700;

}


.ag-course-completion-copy {

  min-width:0;

}


.ag-course-completion-copy > span,
.ag-course-completion-date > span {

  display:block;

  margin-bottom:5px;

  color:#9a8d82;

  font-size:9px;

  font-weight:750;

  letter-spacing:.11em;

}


.ag-course-completion-copy > strong {

  display:block;

  color:#51463e;

  font:
    400 17px
    Georgia,
    "Times New Roman",
    serif;

}


.ag-course-completion-copy > small {

  display:block;

  margin-top:5px;

  color:#92867c;

  font-size:10px;

  line-height:1.5;

}


.ag-course-completion-date {

  min-width:145px;

  padding-left:20px;

  border-left:
    1px solid
    rgba(136,103,68,.10);

  text-align:right;

}


.ag-course-completion-date[hidden] {

  display:none !important;

}


.ag-course-completion-date strong {

  color:#55775c;

  font:
    400 13px
    Georgia,
    "Times New Roman",
    serif;

}


/* COMPLETED */

.ag-course-completion.is-completed {

  border-color:
    rgba(72,140,91,.18);

  background:
    linear-gradient(
      135deg,
      rgba(239,248,240,.88),
      rgba(252,253,249,.91)
    );

  box-shadow:
    inset 3px 0 0
    rgba(70,145,93,.62);

}


.ag-course-completion.is-completed
.ag-course-completion-icon {

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #4e9464,
      #70ad7e
    );

}


.ag-course-completion.is-completed
.ag-course-completion-copy > strong {

  color:#487250;

}


/* WAITING */

.ag-course-completion.is-waiting {

  border-color:
    rgba(194,126,41,.18);

  background:
    linear-gradient(
      135deg,
      rgba(252,244,230,.91),
      rgba(255,253,248,.91)
    );

  box-shadow:
    inset 3px 0 0
    rgba(194,126,41,.55);

}


.ag-course-completion.is-waiting
.ag-course-completion-icon {

  color:#9d682a;

  background:#f5e4ca;

}


.ag-course-completion.is-waiting
.ag-course-completion-copy > strong {

  color:#956128;

}


/* ADMIN COMPLETION DATE */

.ag-student-v1000-completed-date {

  margin-left:5px;

  padding:
    6px 9px;

  display:inline-flex;

  align-items:center;

  border-radius:999px;

  color:#54775a;

  background:
    rgba(229,241,231,.88);

  font-size:9px;

  font-weight:650;

  white-space:nowrap;

}


@media(max-width:650px) {

  .ag-course-completion {

    grid-template-columns:
      42px
      minmax(0,1fr);

  }


  .ag-course-completion-date {

    grid-column:2;

    min-width:0;

    padding:
      11px 0 0;

    border-left:0;

    border-top:
      1px solid
      rgba(136,103,68,.10);

    text-align:left;

  }

}



/* ==========================================================
   AG COURSE SUMMARY V1010
   ========================================================== */


/* ----------------------------------------------------------
   USER SUMMARY
   ---------------------------------------------------------- */

.ag-course-summary-v1010 {

  margin:
    0 0 22px;

  padding:
    18px 20px;

  border:
    1px solid
    rgba(151,108,64,.10);

  border-radius:
    15px;

  background:
    rgba(255,254,251,.78);

  box-shadow:
    0 8px 26px
    rgba(77,54,33,.035);

}


.ag-course-summary-v1010-head {

  margin-bottom:
    15px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:
    18px;

}


.ag-course-summary-v1010-head > div {

  display:flex;

  flex-direction:
    column;

  gap:
    5px;

}


.ag-course-summary-v1010-head span {

  color:
    #94887e;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .12em;

}


.ag-course-summary-v1010-head strong {

  color:
    #473c33;

  font:
    400 17px
    Georgia,
    "Times New Roman",
    serif;

}


.ag-course-summary-v1010-head > small {

  min-width:
    52px;

  padding:
    7px 10px;

  border-radius:
    999px;

  color:
    #4f8760;

  background:
    rgba(228,241,231,.86);

  font-size:
    11px;

  font-weight:
    750;

  text-align:
    center;

}


.ag-course-summary-v1010-grid {

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    10px;

}


.ag-course-summary-v1010-item {

  min-height:
    72px;

  padding:
    12px;

  display:flex;

  align-items:center;

  gap:
    11px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(144,103,61,.09);

  border-radius:
    12px;

  background:
    rgba(247,244,239,.72);

}


.ag-course-summary-v1010-item.is-reviewed {

  background:
    rgba(234,246,237,.76);

  border-color:
    rgba(76,144,96,.12);

}


.ag-course-summary-v1010-item.is-attention {

  background:
    rgba(252,242,226,.78);

  border-color:
    rgba(191,124,38,.14);

}


.ag-course-summary-v1010-icon {

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    50%;

  color:
    #927f6c;

  background:
    rgba(239,233,225,.9);

  font-size:
    15px;

}


.ag-course-summary-v1010-item.is-reviewed
.ag-course-summary-v1010-icon {

  color:
    #4c8d61;

  background:
    rgba(217,237,222,.9);

}


.ag-course-summary-v1010-item.is-attention
.ag-course-summary-v1010-icon {

  color:
    #b77524;

  background:
    rgba(246,226,195,.9);

}


.ag-course-summary-v1010-item > div {

  display:flex;

  flex-direction:
    column;

  gap:
    3px;

}


.ag-course-summary-v1010-item strong {

  color:
    #4a3f36;

  font:
    600 18px
    Georgia,
    "Times New Roman",
    serif;

}


.ag-course-summary-v1010-item small {

  color:
    #91857b;

  font-size:
    9px;

}



/* ----------------------------------------------------------
   ADMIN ANALYTICS
   ---------------------------------------------------------- */

.ag-course-analytics-v1010 {

  margin:
    0 0 20px;

  padding:
    20px;

  border:
    1px solid
    rgba(148,104,58,.10);

  border-radius:
    18px;

  background:
    rgba(255,253,249,.84);

  box-shadow:
    0 14px 38px
    rgba(78,55,32,.045);

}


.ag-course-analytics-v1010-head {

  margin-bottom:
    16px;

  display:flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    24px;

}


.ag-course-analytics-v1010-head > div {

  display:flex;

  flex-direction:
    column;

  gap:
    5px;

}


.ag-course-analytics-v1010-head span {

  color:
    #94877b;

  font-size:
    10px;

  font-weight:
    750;

  letter-spacing:
    .12em;

}


.ag-course-analytics-v1010-head strong {

  color:
    #40362e;

  font:
    400 20px
    Georgia,
    "Times New Roman",
    serif;

}


.ag-course-analytics-v1010-head > small {

  color:
    #8b8076;

  font-size:
    10px;

}


.ag-course-analytics-v1010-head > small b {

  color:
    #aa6922;

}


.ag-course-analytics-v1010-grid {

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    12px;

}


.ag-course-analytics-v1010-card {

  min-height:
    88px;

  padding:
    15px;

  display:flex;

  align-items:center;

  gap:
    13px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(141,102,64,.09);

  border-radius:
    13px;

  background:
    rgba(247,244,240,.75);

}


.ag-course-analytics-v1010-card > span {

  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    50%;

  color:
    #8d8176;

  background:
    #eee9e4;

  font-size:
    16px;

}


.ag-course-analytics-v1010-card > div {

  display:flex;

  flex-direction:
    column;

  gap:
    3px;

}


.ag-course-analytics-v1010-card strong {

  color:
    #443a32;

  font:
    600 23px
    Georgia,
    "Times New Roman",
    serif;

}


.ag-course-analytics-v1010-card small {

  color:
    #8e8379;

  font-size:
    10px;

}


.ag-course-analytics-v1010-card.is-progress {

  background:
    rgba(246,241,232,.78);

}


.ag-course-analytics-v1010-card.is-progress > span {

  color:
    #a36e31;

  background:
    #efe2d2;

}


.ag-course-analytics-v1010-card.is-waiting {

  background:
    rgba(252,242,226,.80);

}


.ag-course-analytics-v1010-card.is-waiting > span {

  color:
    #b97828;

  background:
    #f2dfc3;

}


.ag-course-analytics-v1010-card.is-completed {

  background:
    rgba(233,246,236,.82);

}


.ag-course-analytics-v1010-card.is-completed > span {

  color:
    #4e8f61;

  background:
    #dceee1;

}


@media(max-width:1000px) {

  .ag-course-summary-v1010-grid,
  .ag-course-analytics-v1010-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

  }

}


@media(max-width:560px) {

  .ag-course-summary-v1010-grid,
  .ag-course-analytics-v1010-grid {

    grid-template-columns:
      1fr;

  }


  .ag-course-analytics-v1010-head {

    align-items:
      flex-start;

    flex-direction:
      column;

  }

}



/* ==========================================================
   AG ACCOUNT COURSE STATUS V1011
   ========================================================== */

.account-course-status-v1011 {

  margin:
    14px 0 16px;

  padding:
    15px 16px;

  border:
    1px solid
    rgba(157,112,62,.11);

  border-radius:
    13px;

  background:
    rgba(255,253,248,.66);

}


.account-course-status-v1011-head {

  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;

  gap:
    24px;

}


.account-course-status-v1011-head > div:first-child {

  min-width:0;

  display:flex;

  flex-direction:column;

  gap:
    5px;

}


.account-course-status-v1011-head > div:first-child > span {

  color:
    #978a7d;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .12em;

}


.account-course-status-v1011-head > div:first-child > strong {

  color:
    #4b4037;

  font:
    400 17px
    Georgia,
    "Times New Roman",
    serif;

}


.account-course-status-v1011-percent {

  flex:
    0 0 auto;

  display:flex;

  align-items:baseline;

  gap:
    7px;

  white-space:
    nowrap;

}


.account-course-status-v1011-percent strong {

  color:
    #bd721e;

  font:
    600 18px
    Georgia,
    "Times New Roman",
    serif;

}


.account-course-status-v1011-percent small {

  color:
    #9b8e82;

  font-size:
    9px;

}


.account-course-status-v1011-track {

  position:relative;

  height:
    6px;

  margin:
    12px 0 9px;

  overflow:hidden;

  border-radius:
    999px;

  background:
    rgba(134,105,73,.11);

}


.account-course-status-v1011-track > span {

  position:absolute;

  inset:
    0 auto 0 0;

  min-width:
    0;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #c37a22,
      #d89a36
    );

}


.account-course-status-v1011-foot {

  min-height:
    18px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:
    18px;

}


.account-course-status-v1011-foot > span {

  color:
    #74685e;

  font-size:
    10px;

  font-weight:
    600;

}


.account-course-status-v1011-foot > small {

  color:
    #a09489;

  font-size:
    9px;

  text-align:
    right;

}


/* ----------------------------------------------------------
   NOT STARTED
   ---------------------------------------------------------- */

.account-course-status-v1011.is-not-started
.account-course-status-v1011-percent strong {

  color:
    #9c8978;

}


.account-course-status-v1011.is-not-started
.account-course-status-v1011-track > span {

  background:
    #bcae9e;

}


/* ----------------------------------------------------------
   WAITING FOR HOMEWORK REVIEW
   ---------------------------------------------------------- */

.account-course-status-v1011.is-waiting {

  border-color:
    rgba(193,128,44,.19);

  background:
    rgba(252,245,233,.78);

}


.account-course-status-v1011.is-waiting
.account-course-status-v1011-head
> div:first-child
> strong {

  color:
    #976325;

}


/* ----------------------------------------------------------
   HOMEWORK REVISION
   ---------------------------------------------------------- */

.account-course-status-v1011.is-attention {

  border-color:
    rgba(184,101,54,.19);

  background:
    rgba(252,240,231,.78);

}


.account-course-status-v1011.is-attention
.account-course-status-v1011-head
> div:first-child
> strong {

  color:
    #a05d39;

}


.account-course-status-v1011.is-attention
.account-course-status-v1011-track
> span {

  background:
    linear-gradient(
      90deg,
      #bf703e,
      #da915e
    );

}


/* ----------------------------------------------------------
   COMPLETED
   ---------------------------------------------------------- */

.account-course-status-v1011.is-completed {

  border-color:
    rgba(74,143,94,.18);

  background:
    rgba(238,248,240,.78);

}


.account-course-status-v1011.is-completed
.account-course-status-v1011-head
> div:first-child
> strong,

.account-course-status-v1011.is-completed
.account-course-status-v1011-percent
> strong {

  color:
    #4e805b;

}


.account-course-status-v1011.is-completed
.account-course-status-v1011-track
> span {

  background:
    linear-gradient(
      90deg,
      #4d9361,
      #77b484
    );

}


.account-course-status-v1011.is-completed
.account-course-status-v1011-foot
> span {

  color:
    #567c5e;

}


@media(max-width:650px) {

  .account-course-status-v1011-head {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      10px;

  }


  .account-course-status-v1011-foot {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;

  }


  .account-course-status-v1011-foot > small {

    text-align:
      left;

  }

}



/* ==========================================================
   AG PREMIUM CLASSIC V1020A
   Homepage visual foundation
   ========================================================== */

:root {

  --v1020-plum:
    #49354f;

  --v1020-plum-deep:
    #37243d;

  --v1020-purple:
    #806786;

  --v1020-lilac:
    #b9a3c2;

  --v1020-lilac-soft:
    #ddd0e2;

  --v1020-lavender:
    #eee7f1;

  --v1020-ivory:
    #faf8fb;

  --v1020-paper:
    #fdfbfd;

  --v1020-ink:
    #302a33;

  --v1020-text:
    #5d5360;

  --v1020-muted:
    #968a99;

  --v1020-gold:
    #b89a72;

  --v1020-line:
    rgba(73,53,79,.12);

  --v1020-shadow:
    0 24px 70px
    rgba(60,39,68,.09);

}


/* ----------------------------------------------------------
   GLOBAL
   ---------------------------------------------------------- */

html,
body {

  background:
    radial-gradient(
      circle at 7% 9%,
      rgba(185,163,194,.23),
      transparent 28%
    ),
    radial-gradient(
      circle at 91% 15%,
      rgba(128,103,134,.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 48% 72%,
      rgba(255,255,255,.90),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #faf8fb 0%,
      #f4eff6 47%,
      #fbf9fc 100%
    ) !important;

  color:
    var(--v1020-text) !important;

}


body::selection {

  background:
    var(--v1020-purple) !important;

  color:
    #fff !important;

}


h1,
h2,
h3,
h4 {

  color:
    var(--v1020-ink) !important;

}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.site-header,
header.site-header {

  border-color:
    var(--v1020-line) !important;

  background:
    rgba(253,251,253,.86) !important;

  box-shadow:
    0 12px 42px
    rgba(62,42,68,.055) !important;

  backdrop-filter:
    blur(18px);

}


.site-nav a,
.header-nav a {

  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease;

}


.site-nav a:hover,
.header-nav a:hover {

  color:
    var(--v1020-plum) !important;

}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.button,
.button-large,
.lux-buy-button {

  border-color:
    var(--v1020-plum) !important;

}


.button:not(.button-ghost),
.button-large,
.lux-buy-button {

  background:
    linear-gradient(
      135deg,
      #684870 0%,
      #49354f 100%
    ) !important;

  color:
    #fff !important;

  box-shadow:
    0 14px 34px
    rgba(73,53,79,.20) !important;

}


.button:not(.button-ghost):hover,
.button-large:hover,
.lux-buy-button:hover {

  transform:
    translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #76557f 0%,
      #553b5d 100%
    ) !important;

  box-shadow:
    0 19px 42px
    rgba(73,53,79,.25) !important;

}


/* ----------------------------------------------------------
   HERO — PREMIUM CLASSIC
   ---------------------------------------------------------- */

.ag-premium-hero-v1020 {

  position:
    relative;

  min-height:
    min(760px, calc(100vh - 110px));

  overflow:
    hidden;

  border-bottom:
    1px solid
    var(--v1020-line);

  background:
    radial-gradient(
      circle at 78% 27%,
      rgba(185,163,194,.34),
      transparent 28%
    ),
    radial-gradient(
      circle at 20% 78%,
      rgba(255,255,255,.96),
      transparent 37%
    ),
    linear-gradient(
      116deg,
      #fbf9fc 0%,
      #f1e9f3 55%,
      #e7d9eb 100%
    ) !important;

}


.ag-premium-hero-v1020::before {

  content:
    "";

  position:
    absolute;

  width:
    420px;

  height:
    420px;

  right:
    4%;

  top:
    6%;

  border:
    1px solid
    rgba(128,103,134,.16);

  border-radius:
    50%;

  pointer-events:
    none;

}


.ag-premium-hero-v1020::after {

  content:
    "AG";

  position:
    absolute;

  right:
    clamp(32px,7vw,120px);

  bottom:
    -35px;

  color:
    rgba(73,53,79,.035);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(180px,22vw,390px);

  line-height:
    .8;

  pointer-events:
    none;

}


.ag-premium-hero-v1020
.hero-content {

  position:
    relative;

  z-index:
    3;

  max-width:
    760px;

}


.ag-premium-hero-v1020
.eyebrow {

  color:
    var(--v1020-purple) !important;

  font-size:
    11px !important;

  font-weight:
    700;

  letter-spacing:
    .17em !important;

}


.ag-premium-hero-title {

  margin:
    18px 0 12px !important;

  color:
    var(--v1020-plum) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(
      64px,
      8.2vw,
      126px
    ) !important;

  font-weight:
    400 !important;

  line-height:
    .82 !important;

  letter-spacing:
    -.055em !important;

  text-transform:
    uppercase;

}


.ag-premium-hero-title em {

  display:
    block;

  color:
    var(--v1020-plum) !important;

  font-style:
    normal !important;

}


.ag-premium-hero-subtitle {

  margin-bottom:
    22px;

  color:
    var(--v1020-plum) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      19px,
      2vw,
      28px
    );

  font-weight:
    400;

}


.ag-premium-hero-v1020
.hero-lead {

  max-width:
    650px;

  color:
    #64596a !important;

  font-size:
    clamp(
      16px,
      1.35vw,
      19px
    ) !important;

  line-height:
    1.72 !important;

}


.ag-premium-secondary-button {

  min-height:
    52px;

  padding:
    0 27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(73,53,79,.35);

  border-radius:
    12px;

  color:
    var(--v1020-plum) !important;

  background:
    rgba(255,255,255,.43);

  font-size:
    13px;

  font-weight:
    650;

  transition:
    .22s ease;

}


.ag-premium-secondary-button:hover {

  border-color:
    var(--v1020-plum);

  background:
    rgba(255,255,255,.76);

  transform:
    translateY(-2px);

}


.ag-premium-hero-v1020
.hero-note {

  color:
    #897b8d !important;

}


.ag-premium-hero-v1020
.pulse-dot {

  background:
    var(--v1020-gold) !important;

  box-shadow:
    0 0 0 6px
    rgba(184,154,114,.12) !important;

}


/* Existing conceptual visual.
   V1020B will replace this with author photo. */

.ag-premium-hero-v1020
.hero-visual {

  position:
    relative;

  z-index:
    2;

}


.ag-premium-hero-v1020
.mind-orbit {

  filter:
    saturate(.58)
    hue-rotate(235deg)
    contrast(.94);

  opacity:
    .78;

}


/* ----------------------------------------------------------
   QUESTION STRIP
   ---------------------------------------------------------- */

.question-strip {

  border-color:
    var(--v1020-line) !important;

  background:
    rgba(253,251,253,.80) !important;

}


.question-pills button {

  border-color:
    rgba(73,53,79,.14) !important;

  color:
    #665a69 !important;

  background:
    rgba(255,255,255,.60) !important;

}


.question-pills button:hover {

  color:
    var(--v1020-plum) !important;

  border-color:
    var(--v1020-lilac) !important;

  background:
    var(--v1020-lavender) !important;

}


/* ----------------------------------------------------------
   SECTION KICKERS
   ---------------------------------------------------------- */

.section-kicker {

  color:
    var(--v1020-purple) !important;

}


/* ----------------------------------------------------------
   ABOUT
   ---------------------------------------------------------- */

.about-section {

  background:
    transparent !important;

}


.principle {

  border-color:
    var(--v1020-line) !important;

  background:
    rgba(253,251,253,.67) !important;

  box-shadow:
    0 15px 48px
    rgba(65,43,70,.045) !important;

}


.principle > span {

  color:
    var(--v1020-purple) !important;

}


/* ----------------------------------------------------------
   PROGRAMS
   ---------------------------------------------------------- */

.games-section {

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.96),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #f8f3fa 0%,
      #eee5f1 48%,
      #faf8fb 100%
    ) !important;

}


.game-card {

  border-color:
    rgba(73,53,79,.11) !important;

  background:
    rgba(253,251,253,.88) !important;

  box-shadow:
    var(--v1020-shadow) !important;

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;

}


.game-card:hover {

  transform:
    translateY(-7px);

  border-color:
    rgba(128,103,134,.28) !important;

  box-shadow:
    0 31px 78px
    rgba(61,39,67,.14) !important;

}


.game-number,
.game-type,
.product-kind-public {

  color:
    var(--v1020-purple) !important;

}


.course-duration-public {

  border-color:
    rgba(73,53,79,.10) !important;

  background:
    rgba(238,231,241,.60) !important;

}


/* ----------------------------------------------------------
   CALENDAR
   ---------------------------------------------------------- */

.calendar-section {

  background:
    transparent !important;

}


.calendar-day {

  border-color:
    var(--v1020-line) !important;

  background:
    rgba(253,251,253,.78) !important;

}


.calendar-day.has-event {

  border-color:
    rgba(128,103,134,.27) !important;

  background:
    linear-gradient(
      145deg,
      rgba(238,231,241,.82),
      rgba(253,251,253,.94)
    ) !important;

}


.calendar-day.today {

  box-shadow:
    inset 0 0 0 1px
    rgba(128,103,134,.32) !important;

}


.calendar-event {

  border-color:
    rgba(128,103,134,.15) !important;

  background:
    rgba(255,255,255,.67) !important;

}


/* ----------------------------------------------------------
   NEWS
   ---------------------------------------------------------- */

.news-card {

  border-color:
    var(--v1020-line) !important;

  background:
    linear-gradient(
      120deg,
      rgba(253,251,253,.94),
      rgba(238,231,241,.79)
    ) !important;

  box-shadow:
    var(--v1020-shadow) !important;

}


/* ----------------------------------------------------------
   CLOSING CTA
   ---------------------------------------------------------- */

.closing-section {

  background:
    linear-gradient(
      135deg,
      #49354f 0%,
      #65496c 52%,
      #806786 100%
    ) !important;

  color:
    rgba(255,255,255,.86) !important;

}


.closing-section h2,
.closing-section .section-kicker {

  color:
    #fff !important;

}


.closing-circle {

  border-color:
    rgba(255,255,255,.18) !important;

  color:
    rgba(255,255,255,.63) !important;

}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.site-footer,
footer {

  border-color:
    rgba(73,53,79,.12) !important;

}


.site-footer a:hover,
footer a:hover {

  color:
    var(--v1020-purple) !important;

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:850px) {

  .ag-premium-hero-v1020 {

    min-height:
      auto;

  }


  .ag-premium-hero-title {

    font-size:
      clamp(
        55px,
        16vw,
        82px
      ) !important;

  }


  .ag-premium-hero-v1020::before {

    width:
      260px;

    height:
      260px;

    right:
      -90px;

  }

}


@media(max-width:560px) {

  .ag-premium-hero-title {

    letter-spacing:
      -.045em !important;

  }


  .ag-premium-hero-v1020
  .hero-actions {

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .ag-premium-secondary-button {

    width:
      100%;

  }

}



/* ==========================================================
   AG PREMIUM CLASSIC V1020A2
   CLEAN VISUAL REPAIR LAYER
   ========================================================== */


/* ----------------------------------------------------------
   FINAL COLOR SYSTEM
   ---------------------------------------------------------- */

:root {

  --pc-bg:
    #faf8fb;

  --pc-bg-soft:
    #f4eff6;

  --pc-card:
    #fdfbfd;

  --pc-plum:
    #56345d;

  --pc-plum-dark:
    #3d2644;

  --pc-purple:
    #76547d;

  --pc-lilac:
    #baa3c4;

  --pc-lilac-soft:
    #ece3ef;

  --pc-text:
    #443b47;

  --pc-muted:
    #827685;

  --pc-gold:
    #b99a68;

  --pc-line:
    rgba(86,52,93,.12);

  --pc-shadow:
    0 24px 70px
    rgba(70,45,76,.08);

}


/* ----------------------------------------------------------
   GLOBAL RESET OF OLD GOLD / BEIGE LAYERS
   ---------------------------------------------------------- */

html,
body {

  background:
    linear-gradient(
      145deg,
      #fbf9fc 0%,
      #f5eff7 48%,
      #fbf9fc 100%
    ) !important;

}


body {

  color:
    var(--pc-text) !important;

}


main {

  overflow:
    hidden;

}


.section {

  background:
    transparent !important;

}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.site-header,
header.site-header {

  background:
    rgba(253,251,253,.94) !important;

  border:
    1px solid
    var(--pc-line) !important;

  box-shadow:
    0 12px 42px
    rgba(65,42,70,.045) !important;

}


.site-header a:hover,
.site-nav a:hover,
.header-nav a:hover {

  color:
    var(--pc-plum) !important;

}


/* ----------------------------------------------------------
   NEW HERO
   ---------------------------------------------------------- */

.ag-home-hero-v1020a2 {

  width:
    100%;

  max-width:
    1500px;

  margin:
    0 auto;

  padding:
    34px 28px 0;

}


.ag-home-hero-shell {

  position:
    relative;

  min-height:
    590px;

  display:
    grid;

  grid-template-columns:
    minmax(330px, .92fr)
    minmax(460px, 1.08fr)
    minmax(250px, .68fr);

  align-items:
    stretch;

  overflow:
    hidden;

  border:
    1px solid
    var(--pc-line);

  border-radius:
    34px 34px 0 0;

  background:
    linear-gradient(
      112deg,
      #faf7fb 0%,
      #f0e7f3 55%,
      #e8dbea 100%
    );

  box-shadow:
    var(--pc-shadow);

}


/* ----------------------------------------------------------
   AUTHOR PHOTO
   ---------------------------------------------------------- */

.ag-home-author-photo {

  position:
    relative;

  min-height:
    590px;

  overflow:
    hidden;

  border-right:
    1px solid
    rgba(86,52,93,.10);

  background:
    linear-gradient(
      145deg,
      #ddd0e1,
      #c7b1cb
    );

}


/*
 * V1020B will create this file from admin.
 * Until then fallback remains visible.
 */

.ag-home-author-photo::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  background:
    url("/uploads/author/author.jpg")
    center 18% / cover
    no-repeat;

}


.ag-home-author-photo::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    3;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(51,30,57,.00),
      rgba(51,30,57,.08)
    );

}


.ag-home-author-photo-fallback {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.72),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #eee5f0,
      #cdb8d2
    );

}


.ag-home-author-photo-fallback span {

  color:
    rgba(86,52,93,.25);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(90px,9vw,150px);

}


/* ----------------------------------------------------------
   HERO COPY
   ---------------------------------------------------------- */

.ag-home-hero-copy {

  position:
    relative;

  z-index:
    5;

  padding:
    clamp(54px,6vw,94px)
    clamp(46px,5vw,82px);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.ag-home-hero-kicker {

  margin-bottom:
    24px;

  color:
    var(--pc-purple);

  font-size:
    11px;

  font-weight:
    750;

  letter-spacing:
    .17em;

}


.ag-home-hero-copy h1 {

  margin:
    0;

  color:
    var(--pc-plum-dark) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      64px,
      6.2vw,
      106px
    ) !important;

  font-weight:
    400 !important;

  line-height:
    .86 !important;

  letter-spacing:
    -.048em !important;

}


.ag-home-hero-copy h1 span,
.ag-home-hero-copy h1 strong {

  display:
    block;

  color:
    inherit !important;

  font-weight:
    inherit;

}


.ag-home-hero-copy h1 strong {

  margin-top:
    8px;

}


.ag-home-hero-tagline {

  margin-top:
    26px;

  color:
    #58465d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      22px,
      2vw,
      31px
    );

}


.ag-home-hero-copy p {

  max-width:
    610px;

  margin:
    24px 0 0;

  color:
    #685e6b;

  font-size:
    16px;

  line-height:
    1.72;

}


.ag-home-hero-actions {

  margin-top:
    32px;

  display:
    flex;

  gap:
    14px;

  flex-wrap:
    wrap;

}


.ag-home-primary,
.ag-home-secondary {

  min-height:
    52px;

  padding:
    0 28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    12px;

  font-size:
    13px;

  font-weight:
    650;

  transition:
    .22s ease;

}


.ag-home-primary {

  border:
    1px solid
    var(--pc-plum);

  color:
    white !important;

  background:
    linear-gradient(
      135deg,
      #704878,
      #53315a
    );

  box-shadow:
    0 13px 32px
    rgba(83,49,90,.20);

}


.ag-home-primary:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 18px 39px
    rgba(83,49,90,.25);

}


.ag-home-secondary {

  border:
    1px solid
    rgba(86,52,93,.31);

  color:
    var(--pc-plum) !important;

  background:
    rgba(255,255,255,.52);

}


.ag-home-secondary:hover {

  border-color:
    var(--pc-plum);

  background:
    rgba(255,255,255,.84);

}


/* ----------------------------------------------------------
   HERO DECORATION
   ---------------------------------------------------------- */

.ag-home-hero-decoration {

  position:
    relative;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 35% 45%,
      rgba(255,255,255,.66),
      transparent 28%
    );

}


.ag-home-orbit {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  border:
    1px solid
    rgba(118,84,125,.17);

  border-radius:
    50%;

  transform:
    translate(-50%,-50%);

}


.ag-home-orbit.orbit-a {

  width:
    245px;

  height:
    245px;

}


.ag-home-orbit.orbit-b {

  width:
    365px;

  height:
    365px;

}


.ag-home-orbit.orbit-c {

  width:
    485px;

  height:
    485px;

}


.ag-home-orbit-center {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    105px;

  height:
    105px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  transform:
    translate(-50%,-50%);

  border:
    1px solid
    rgba(185,154,104,.40);

  border-radius:
    50%;

  color:
    var(--pc-gold);

  background:
    rgba(255,255,255,.55);

  font:
    400 42px/1
    Georgia,
    "Times New Roman",
    serif;

}


/* ----------------------------------------------------------
   INTENT STRIP
   ---------------------------------------------------------- */

.ag-home-intents {

  min-height:
    92px;

  padding:
    20px 38px;

  display:
    grid;

  grid-template-columns:
    minmax(260px,.7fr)
    2fr;

  gap:
    32px;

  align-items:
    center;

  border:
    1px solid
    var(--pc-line);

  border-top:
    0;

  border-radius:
    0 0 28px 28px;

  background:
    rgba(253,251,253,.94);

}


.ag-home-intents-title {

  color:
    #4e424f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    18px;

}


.ag-home-intents-list {

  display:
    grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:
    12px;

}


.ag-home-intents-list a {

  min-height:
    48px;

  padding:
    0 16px;

  display:
    flex;

  gap:
    10px;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(86,52,93,.10);

  border-radius:
    999px;

  color:
    #5f4d63;

  background:
    #fff;

  font-size:
    13px;

  transition:
    .2s ease;

}


.ag-home-intents-list a span {

  color:
    var(--pc-purple);

  font-size:
    19px;

}


.ag-home-intents-list a:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(118,84,125,.30);

  background:
    #f4edf6;

}


/* ----------------------------------------------------------
   ABOUT SECTION
   ---------------------------------------------------------- */

.about-section {

  max-width:
    1320px !important;

  margin:
    0 auto !important;

  padding-top:
    110px !important;

  padding-bottom:
    110px !important;

}


.about-grid {

  gap:
    clamp(
      50px,
      8vw,
      130px
    ) !important;

}


.about-copy {

  max-width:
    600px;

}


.principles {

  margin-top:
    75px !important;

  overflow:
    hidden;

  border:
    1px solid
    var(--pc-line) !important;

  border-radius:
    24px;

  background:
    rgba(253,251,253,.92);

  box-shadow:
    var(--pc-shadow);

}


.principle {

  min-height:
    220px;

  border:
    0 !important;

  border-right:
    1px solid
    var(--pc-line) !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

}


.principle:last-child {

  border-right:
    0 !important;

}


/* ----------------------------------------------------------
   PROGRAMS
   ---------------------------------------------------------- */

.games-section {

  max-width:
    none !important;

  padding-top:
    105px !important;

  padding-bottom:
    110px !important;

  background:
    linear-gradient(
      180deg,
      #faf8fb 0%,
      #f3edf5 100%
    ) !important;

}


.games-section
.section-heading {

  max-width:
    1320px;

  margin:
    0 auto 52px !important;

}


.games-grid {

  max-width:
    1320px;

  margin:
    0 auto;

  gap:
    20px !important;

}


.game-card {

  border:
    1px solid
    var(--pc-line) !important;

  border-radius:
    22px !important;

  background:
    rgba(253,251,253,.97) !important;

  box-shadow:
    0 14px 42px
    rgba(65,43,70,.055) !important;

}


.game-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 22px 58px
    rgba(65,43,70,.10) !important;

}


.game-number,
.game-type,
.product-kind-public {

  color:
    var(--pc-purple) !important;

}


/* ----------------------------------------------------------
   CALENDAR
   ---------------------------------------------------------- */

.calendar-section {

  max-width:
    1320px !important;

  margin:
    0 auto !important;

  padding-top:
    105px !important;

  padding-bottom:
    105px !important;

}


.calendar-day {

  border:
    1px solid
    var(--pc-line) !important;

  border-radius:
    18px !important;

  background:
    #fcfafc !important;

}


.calendar-day.has-event {

  background:
    #f0e7f2 !important;

}


/* ----------------------------------------------------------
   NEWS
   ---------------------------------------------------------- */

.news-section {

  max-width:
    1320px !important;

  margin:
    0 auto !important;

  padding-top:
    40px !important;

  padding-bottom:
    80px !important;

}


.news-card {

  overflow:
    hidden;

  border:
    1px solid
    var(--pc-line) !important;

  border-radius:
    26px !important;

  background:
    linear-gradient(
      120deg,
      #fdfbfd,
      #efe7f2
    ) !important;

  box-shadow:
    var(--pc-shadow) !important;

}


/* ----------------------------------------------------------
   NEW FINAL CTA
   ---------------------------------------------------------- */

.ag-home-closing-v1020a2 {

  width:
    calc(100% - 56px);

  max-width:
    1320px;

  min-height:
    150px;

  margin:
    20px auto 80px;

  padding:
    34px 46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;

  border-radius:
    24px;

  color:
    rgba(255,255,255,.90);

  background:
    linear-gradient(
      110deg,
      #412547 0%,
      #5b3661 52%,
      #76547d 100%
    );

  box-shadow:
    0 24px 62px
    rgba(65,37,71,.18);

}


.ag-home-closing-kicker {

  margin-bottom:
    6px;

  color:
    #d8c7dc;

  font-size:
    10px;

  font-weight:
    750;

  letter-spacing:
    .17em;

}


.ag-home-closing-v1020a2 h2 {

  margin:
    0;

  color:
    white !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(28px,3vw,42px);

  font-weight:
    400;

}


.ag-home-closing-v1020a2 p {

  margin:
    7px 0 0;

  color:
    rgba(255,255,255,.68);

  font-size:
    13px;

}


.ag-home-closing-v1020a2 > a {

  flex:
    0 0 auto;

  min-width:
    220px;

  min-height:
    52px;

  padding:
    0 22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius:
    12px;

  color:
    white;

  background:
    rgba(255,255,255,.055);

  font-size:
    13px;

  transition:
    .2s ease;

}


.ag-home-closing-v1020a2 > a:hover {

  background:
    rgba(255,255,255,.13);

}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.site-footer,
footer.site-footer,
footer {

  color:
    rgba(255,255,255,.72) !important;

  background:
    linear-gradient(
      112deg,
      #352139 0%,
      #462849 55%,
      #57315b 100%
    ) !important;

}


.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer strong,
.site-footer a,
footer h1,
footer h2,
footer h3,
footer strong,
footer a {

  color:
    rgba(255,255,255,.88) !important;

}


.site-footer small,
.site-footer p,
footer small,
footer p {

  color:
    rgba(255,255,255,.54) !important;

}


.site-footer
.section-kicker,
footer
.section-kicker {

  color:
    #cbb8cf !important;

}


/* Neutralize old gold footer styling */

.site-footer * {

  border-color:
    rgba(255,255,255,.10);

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:1100px) {

  .ag-home-hero-shell {

    grid-template-columns:
      .8fr
      1.2fr;

  }


  .ag-home-hero-decoration {

    display:
      none;

  }


  .ag-home-intents {

    grid-template-columns:
      1fr;

  }


  .ag-home-intents-list {

    grid-template-columns:
      repeat(2,1fr);

  }

}


@media(max-width:760px) {

  .ag-home-hero-v1020a2 {

    padding:
      18px 14px 0;

  }


  .ag-home-hero-shell {

    min-height:
      auto;

    grid-template-columns:
      1fr;

    border-radius:
      24px 24px 0 0;

  }


  .ag-home-author-photo {

    min-height:
      430px;

    border-right:
      0;

    border-bottom:
      1px solid
      var(--pc-line);

  }


  .ag-home-hero-copy {

    padding:
      42px 28px 50px;

  }


  .ag-home-hero-copy h1 {

    font-size:
      clamp(
        55px,
        16vw,
        78px
      ) !important;

  }


  .ag-home-hero-actions {

    flex-direction:
      column;

  }


  .ag-home-primary,
  .ag-home-secondary {

    width:
      100%;

  }


  .ag-home-intents {

    padding:
      26px 20px;

  }


  .ag-home-intents-list {

    grid-template-columns:
      1fr;

  }


  .principles {

    border-radius:
      20px;

  }


  .principle {

    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--pc-line) !important;

  }


  .principle:last-child {

    border-bottom:
      0 !important;

  }


  .ag-home-closing-v1020a2 {

    width:
      calc(100% - 28px);

    margin-bottom:
      40px;

    padding:
      30px 26px;

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .ag-home-closing-v1020a2 > a {

    width:
      100%;

  }

}



/* ==========================================================
   AG PREMIUM CLASSIC V1020A3
   FINAL VISUAL POLISH
   ========================================================== */

:root {

  --a3-plum:
    #4c3154;

  --a3-plum-deep:
    #38233f;

  --a3-purple:
    #76567f;

  --a3-purple-light:
    #a98ab3;

  --a3-lilac:
    #d8c7dd;

  --a3-lilac-soft:
    #eee7f1;

  --a3-paper:
    #fcfafc;

  --a3-paper-warm:
    #faf7fb;

  --a3-ink:
    #332b35;

  --a3-copy:
    #6c626e;

  --a3-muted:
    #968b98;

  --a3-gold:
    #b99561;

  --a3-line:
    rgba(76,49,84,.115);

  --a3-shadow:
    0 20px 56px
    rgba(61,39,67,.075);

}


/* ==========================================================
   1. REMOVE OLD STRONG GOLD ACCENTS ON HOMEPAGE
   ========================================================== */

.about-section .section-kicker,
.games-section .section-kicker,
.calendar-section .section-kicker,
.news-section .section-kicker {

  color:
    var(--a3-purple) !important;

}


.games-section .section-heading::after,
.calendar-section .section-heading::after,
.about-section .section-heading::after {

  background:
    var(--a3-purple-light) !important;

}


/* Existing old orange/gold decorative rules */

.games-section *::before,
.games-section *::after {

  border-color:
    rgba(118,86,127,.15);

}


/* ==========================================================
   2. APPROACH — FIX 01 / 02 / 03
   ========================================================== */

.about-section {

  position:
    relative;

}


.principles {

  max-width:
    1320px !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  overflow:
    hidden !important;

  border:
    1px solid
    var(--a3-line) !important;

  border-radius:
    24px !important;

  background:
    rgba(252,250,252,.96) !important;

  box-shadow:
    var(--a3-shadow) !important;

}


.principle {

  position:
    relative !important;

  min-height:
    235px !important;

  padding:
    44px 38px 42px !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  justify-content:
    flex-start !important;

  border:
    0 !important;

  border-right:
    1px solid
    var(--a3-line) !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

}


.principle:last-child {

  border-right:
    0 !important;

}


.principle > span {

  position:
    static !important;

  display:
    block !important;

  margin:
    0 0 31px !important;

  padding:
    0 !important;

  color:
    var(--a3-purple) !important;

  font-size:
    10px !important;

  font-weight:
    650 !important;

  line-height:
    1 !important;

  letter-spacing:
    .08em !important;

}


.principle h3 {

  width:
    100% !important;

  margin:
    0 0 20px !important;

  padding:
    0 !important;

  color:
    var(--a3-ink) !important;

  font-size:
    clamp(24px,2vw,31px) !important;

  line-height:
    1.12 !important;

}


.principle p {

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--a3-copy) !important;

  font-size:
    15px !important;

  line-height:
    1.7 !important;

}


/* ==========================================================
   3. PROGRAMS — REMOVE GOLD LOOK
   ========================================================== */

.games-section {

  position:
    relative;

  background:
    linear-gradient(
      180deg,
      rgba(250,247,251,.97) 0%,
      rgba(242,235,245,.90) 100%
    ) !important;

}


.games-section .section-heading h2 {

  color:
    var(--a3-ink) !important;

}


.games-grid {

  align-items:
    stretch !important;

}


.game-card {

  position:
    relative !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(76,49,84,.12) !important;

  border-radius:
    24px !important;

  color:
    var(--a3-ink) !important;

  background:
    linear-gradient(
      155deg,
      #fdfbfd 0%,
      #faf7fb 100%
    ) !important;

  box-shadow:
    0 15px 44px
    rgba(58,37,64,.06) !important;

}


.game-card::before {

  content:
    "" !important;

  position:
    absolute !important;

  inset:
    0 auto 0 0 !important;

  width:
    3px !important;

  height:
    auto !important;

  background:
    linear-gradient(
      180deg,
      var(--a3-purple),
      var(--a3-purple-light)
    ) !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  opacity:
    .72;

}


.game-card:hover {

  transform:
    translateY(-5px) !important;

  border-color:
    rgba(118,86,127,.28) !important;

  box-shadow:
    0 24px 62px
    rgba(58,37,64,.105) !important;

}


.game-card h3,
.game-card h2 {

  color:
    var(--a3-ink) !important;

}


.game-card p {

  color:
    var(--a3-copy) !important;

}


/* Number */

.game-number {

  color:
    var(--a3-purple) !important;

}


/* KУРС / ИГРА badge */

.game-type,
.product-kind-public {

  border-color:
    rgba(118,86,127,.23) !important;

  color:
    var(--a3-purple) !important;

  background:
    rgba(238,231,241,.72) !important;

}


/* BASIC / PRO badge if existing */

.game-card [class*="badge"],
.game-card [class*="level"] {

  border-color:
    rgba(118,86,127,.18) !important;

  color:
    var(--a3-purple) !important;

  background:
    rgba(250,247,251,.88) !important;

}


/* Duration boxes */

.course-duration-public {

  border:
    1px solid
    rgba(118,86,127,.10) !important;

  color:
    var(--a3-ink) !important;

  background:
    rgba(238,231,241,.63) !important;

}


.course-duration-public * {

  color:
    inherit !important;

}


/* Prices */

.game-card
[class*="price"],
.game-card
.price {

  color:
    var(--a3-ink) !important;

}


/* Inputs/selects */

.game-card select,
.game-card input {

  border-color:
    rgba(76,49,84,.13) !important;

  color:
    var(--a3-ink) !important;

  background:
    #fff !important;

}


.game-card select:focus,
.game-card input:focus {

  border-color:
    rgba(118,86,127,.50) !important;

  box-shadow:
    0 0 0 3px
    rgba(118,86,127,.08) !important;

}


/* Purchase buttons inside cards */

.game-card button,
.game-card .button {

  border-color:
    var(--a3-plum) !important;

  color:
    #fff !important;

  background:
    linear-gradient(
      135deg,
      #704b79,
      #4d3155
    ) !important;

}


/* ==========================================================
   4. REMOVE RANDOM GOLD TEXT
   Gold remains only as tiny premium decoration.
   ========================================================== */

.games-section
[style*="color"],
.about-section
[style*="color"] {

  text-decoration-color:
    var(--a3-purple);

}


/* ==========================================================
   5. NEXT STEP — MUCH SOFTER
   ========================================================== */

.ag-home-closing-v1020a2 {

  position:
    relative;

  width:
    calc(100% - 56px) !important;

  max-width:
    1320px !important;

  min-height:
    132px !important;

  margin:
    45px auto 88px !important;

  padding:
    30px 38px !important;

  overflow:
    hidden;

  border:
    1px solid
    rgba(76,49,84,.13) !important;

  border-radius:
    24px !important;

  color:
    var(--a3-copy) !important;

  background:
    linear-gradient(
      115deg,
      rgba(246,240,248,.96) 0%,
      rgba(236,225,240,.96) 100%
    ) !important;

  box-shadow:
    0 16px 46px
    rgba(63,41,69,.065) !important;

}


.ag-home-closing-v1020a2::after {

  content:
    "";

  position:
    absolute;

  width:
    260px;

  height:
    260px;

  right:
    -100px;

  top:
    -145px;

  border:
    1px solid
    rgba(118,86,127,.13);

  border-radius:
    50%;

  pointer-events:
    none;

}


.ag-home-closing-kicker {

  color:
    var(--a3-purple) !important;

}


.ag-home-closing-v1020a2 h2 {

  color:
    var(--a3-plum-deep) !important;

  font-size:
    clamp(28px,2.6vw,39px) !important;

}


.ag-home-closing-v1020a2 p {

  color:
    var(--a3-muted) !important;

}


.ag-home-closing-v1020a2 > a {

  position:
    relative;

  z-index:
    2;

  border:
    1px solid
    rgba(76,49,84,.30) !important;

  color:
    var(--a3-plum) !important;

  background:
    rgba(255,255,255,.67) !important;

  box-shadow:
    none !important;

}


.ag-home-closing-v1020a2 > a:hover {

  border-color:
    var(--a3-purple) !important;

  color:
    white !important;

  background:
    var(--a3-purple) !important;

  transform:
    translateY(-1px);

}


/* ==========================================================
   6. FOOTER — FORCE REAL PREMIUM PLUM
   ========================================================== */

/*
 * Old footer styles have higher specificity in several
 * places. Override every footer layer here.
 */

footer,
.site-footer,
.footer,
footer.site-footer,
.site-footer-wrapper,
.footer-wrapper,
.footer-main,
.footer-content,
.footer-shell {

  border-color:
    rgba(255,255,255,.10) !important;

  color:
    rgba(255,255,255,.78) !important;

  background:
    linear-gradient(
      112deg,
      #35233b 0%,
      #422947 46%,
      #503256 100%
    ) !important;

  background-color:
    #3d2843 !important;

}


footer::before,
footer::after,
.site-footer::before,
.site-footer::after {

  opacity:
    .25 !important;

}


/* Footer headings */

footer h1,
footer h2,
footer h3,
footer h4,
footer strong,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer strong {

  color:
    #fff !important;

}


/* Normal footer text */

footer p,
footer span,
footer small,
footer div,
.site-footer p,
.site-footer span,
.site-footer small {

  color:
    rgba(255,255,255,.66) !important;

}


/* Links */

footer a,
.site-footer a {

  color:
    rgba(255,255,255,.79) !important;

  transition:
    color .2s ease;

}


footer a:hover,
.site-footer a:hover {

  color:
    #fff !important;

}


/* Footer labels */

footer .section-kicker,
footer [class*="kicker"],
footer [class*="title"],
.site-footer .section-kicker {

  color:
    #d7c4dc !important;

}


/* AG / logo may retain subtle gold */

footer .brand-mark,
footer .logo,
footer [class*="monogram"],
.site-footer [class*="monogram"] {

  color:
    #cfb07a !important;

}


/* Separator lines */

footer hr,
footer [class*="bottom"],
footer [class*="divider"] {

  border-color:
    rgba(255,255,255,.10) !important;

}


/* Footer SVG icons */

footer svg,
.site-footer svg {

  color:
    rgba(255,255,255,.76) !important;

  stroke:
    currentColor !important;

}


/* ==========================================================
   7. PAGE DECORATION
   Tone down old yellow circles.
   ========================================================== */

body::before,
body::after {

  border-color:
    rgba(118,86,127,.08) !important;

}


/* ==========================================================
   8. HERO — SLIGHT PREMIUM UPGRADE
   ========================================================== */

.ag-home-hero-shell {

  border-color:
    rgba(76,49,84,.13) !important;

  background:
    linear-gradient(
      115deg,
      #f8f3f9 0%,
      #eee3f1 55%,
      #e7d8eb 100%
    ) !important;

  box-shadow:
    0 27px 74px
    rgba(61,39,67,.085) !important;

}


.ag-home-hero-kicker {

  color:
    var(--a3-purple) !important;

}


.ag-home-hero-copy h1 {

  color:
    var(--a3-plum-deep) !important;

}


.ag-home-hero-tagline {

  color:
    #5a465e !important;

}


.ag-home-orbit {

  border-color:
    rgba(118,86,127,.16) !important;

}


.ag-home-orbit-center {

  border-color:
    rgba(185,149,97,.35) !important;

  color:
    var(--a3-gold) !important;

}


/* ==========================================================
   9. INTENT PILLS
   ========================================================== */

.ag-home-intents {

  background:
    rgba(252,250,252,.96) !important;

}


.ag-home-intents-list a {

  border-color:
    rgba(76,49,84,.11) !important;

  color:
    #58475d !important;

  background:
    rgba(255,255,255,.85) !important;

}


.ag-home-intents-list a span {

  color:
    var(--a3-purple) !important;

}


.ag-home-intents-list a:hover {

  border-color:
    rgba(118,86,127,.29) !important;

  color:
    var(--a3-plum) !important;

  background:
    var(--a3-lilac-soft) !important;

}


/* ==========================================================
   10. RESPONSIVE
   ========================================================== */

@media(max-width:760px) {

  .principles {

    grid-template-columns:
      1fr !important;

  }


  .principle {

    min-height:
      auto !important;

    padding:
      34px 28px !important;

    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--a3-line) !important;

  }


  .principle:last-child {

    border-bottom:
      0 !important;

  }


  .principle > span {

    margin-bottom:
      20px !important;

  }


  .ag-home-closing-v1020a2 {

    width:
      calc(100% - 28px) !important;

    margin:
      25px auto 48px !important;

  }

}