:root {
  --bg: #070707;
  --surface: #141414;
  --surface-2: #1f1f1f;
  --surface-3: #2a2a2a;
  --text: #f5f5f1;
  --muted: #b3b3b3;
  --faint: #737373;
  --line: #303030;
  --accent: #e50914;
  --accent-hover: #f6121d;
  --accent-dark: #9f0710;
  --success: #46d369;
  --warning: #f5a623;
  --danger: #ff5263;
  --shadow: 0 18px 48px #000a;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

html {
  color: var(--text);
  background: var(--bg);
  font-family: "Kinelaro Sans", "Helvetica Neue", Arial, sans-serif;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
.brand,
.row-title {
  font-family: "Kinelaro Display", "Arial Narrow", sans-serif;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
}

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

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

.wrap {
  width: min(1280px, calc(100% - 7vw));
  margin-inline: auto;
}

.narrow {
  width: min(920px, calc(100% - 7vw));
}

.topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: 72px;
  border-bottom: 1px solid #ffffff0a;
  background: #050505e8;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: 1;
  text-transform: uppercase;
}

.brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

nav {
  display: flex;
  align-items: center;
  gap: 26px;
  color: #dfdfdf;
  font-size: 14px;
}

nav > a:not(.button) {
  transition: color .18s ease;
}

nav > a:not(.button):hover {
  color: var(--muted);
}

.language-switch {
  position: relative;
  z-index: 5;
}

.language-switch summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid #ffffff29;
  border-radius: 10px;
  padding: 7px 10px;
  color: #eee;
  background: #111;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.language-switch summary::-webkit-details-marker { display: none; }

.language-switch summary img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}

.language-switch > div {
  position: absolute;
  inset: calc(100% + 8px) 0 auto auto;
  display: grid;
  width: 190px;
  overflow: hidden;
  border: 1px solid #ffffff25;
  border-radius: 14px;
  padding: 6px;
  background: #141414f7;
  box-shadow: 0 18px 50px #000c;
  backdrop-filter: blur(18px);
}

.language-switch > div a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  border-radius: 9px;
  padding: 9px 10px;
  color: #aaa;
}

.language-switch > div a:hover,
.language-switch > div a.active {
  color: #fff;
  background: #ffffff0d;
}

.language-switch > div a.active { box-shadow: inset 2px 0 0 var(--accent); }
.language-switch > div b { color: #fff; font-size: 11px; }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  gap: 9px;
  border-radius: 12px;
  padding: 12px 24px;
  color: #fff;
  background: var(--accent);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

.button img {
  width: 18px;
  height: 18px;
  filter: invert(1);
}

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

.button.small {
  min-height: 34px;
  padding: 9px 16px;
  font-size: 13px;
}

.button.light {
  color: #111;
  background: #fff;
}

.button.light img {
  filter: none;
}

.button.light:hover {
  background: #d9d9d9;
}

.button.ghost {
  color: var(--text);
  background: #6d6d6eb3;
}

.button.ghost:hover {
  background: #6d6d6e66;
}

.button.full {
  width: 100%;
  margin-top: 12px;
}

.landing-hero {
  position: relative;
  display: flex;
  min-height: 720px;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, #6d091338 0%, #2503071c 34%, transparent 66%),
    linear-gradient(180deg, #080808 0%, #050505 74%, var(--bg) 100%);
}

.landing-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 110px;
  background: linear-gradient(0deg, var(--bg), transparent);
  content: "";
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(900px, 88vw);
  margin-inline: auto;
  padding-top: 70px;
  text-align: center;
}

.hero-content h1,
.page-head h1,
.auth-card h1 {
  margin: 14px 0 20px;
  font-size: clamp(48px, 6vw, 78px);
  line-height: .98;
  letter-spacing: -.06em;
}

.hero-content .lead {
  max-width: 720px;
  margin-inline: auto;
  color: #e6e6e6;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500;
  line-height: 1.45;
  text-shadow: 0 2px 10px #000;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px auto 0;
  color: #d4d4d4;
  font-size: 13px;
  font-weight: 700;
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #ffffff18;
  border-radius: 999px;
  padding: 8px 12px;
  background: #ffffff08;
}

.hero-points img {
  width: 16px;
  height: 16px;
  filter: invert(1);
  opacity: .86;
}

.eyebrow,
.section-title > span,
.promo-label {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.section,
.content-row {
  padding: 28px 0 42px;
}

.landing-hero + .content-row {
  margin-top: 0;
  padding-top: 58px;
}

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-title h2,
.row-title {
  margin: 5px 0 0;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.035em;
}

.section-title p {
  max-width: 720px;
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

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

.card,
.rail-card {
  position: relative;
  min-height: 235px;
  overflow: hidden;
  border: 1px solid #e5091466;
  border-radius: 18px;
  padding: 24px;
  background: var(--surface-2);
  box-shadow: 0 3px 12px #0006;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #ffffff1c;
  border-radius: 14px;
  background: #ffffff0c;
}

.card-icon img {
  width: 21px;
  height: 21px;
  filter: invert(1);
}

.card:hover,
.rail-card:hover {
  z-index: 3;
  border-color: #ff3540;
  box-shadow: var(--shadow);
  transform: scale(1.035);
}

.card h3,
.rail-card h3 {
  margin: 24px 0 10px;
  font-size: 27px;
  letter-spacing: -.035em;
}

.card p,
.panel p,
.rail-card p {
  color: var(--muted);
  line-height: 1.55;
}

.card.feature--iptv {
  background:
    linear-gradient(140deg, #320306aa, transparent 68%),
    var(--surface-2);
}

.card.feature--vpn {
  background:
    linear-gradient(140deg, #291010aa, transparent 68%),
    var(--surface-2);
}

.card.feature--cabinet {
  background:
    linear-gradient(140deg, #3b1515aa, transparent 68%),
    var(--surface-2);
}

.pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 9px;
  color: #fff;
  background: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.card > .pill {
  position: absolute;
  inset: 24px 24px auto auto;
}

.pill.accent {
  color: #111;
  background: #fff;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 26px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.link img {
  width: 16px;
  height: 16px;
  filter: invert(1);
}

.preview-rail {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  overflow-x: auto;
  padding: 8px 5px 22px;
  scrollbar-width: thin;
}

.landing-page .preview-rail {
  overflow-y: hidden;
  scrollbar-width: none;
}

.landing-page .preview-rail::-webkit-scrollbar { display: none; }

.preview-card {
  position: relative;
  min-width: 220px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: 0 3px 12px #0008;
  transition: transform .2s ease;
}

.preview-card:hover {
  transform: scale(1.045);
}

.preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-card span {
  position: absolute;
  inset: auto 0 0;
  padding: 34px 14px 12px;
  background: linear-gradient(transparent, #000e);
  font-size: 13px;
  font-weight: 800;
}

.page-head {
  padding: 150px 0 48px;
}

.page-head h1 {
  max-width: 900px;
  font-size: clamp(48px, 6vw, 76px);
}

.lead {
  max-width: 720px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
}

.feature-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 90px;
  background:
    radial-gradient(circle at 80% 25%, #e509143d, transparent 28%),
    linear-gradient(0deg, var(--bg), transparent 48%),
    linear-gradient(120deg, #240205, #101010 62%);
}

.feature-hero.feature-vpn {
  background:
    radial-gradient(circle at 80% 25%, #8b101a55, transparent 28%),
    linear-gradient(0deg, var(--bg), transparent 48%),
    linear-gradient(120deg, #1b0709, #101010 62%);
}

.feature-hero .page-head {
  padding-bottom: 0;
}

.panel {
  margin-bottom: 80px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 30px;
  background: var(--surface);
}

.panel h2 {
  margin-top: 32px;
  font-size: 28px;
}

.status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.status-line strong {
  color: var(--warning);
}

.cabinet-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.account-hero {
  background:
    radial-gradient(circle at 78% 20%, #e5091424, transparent 32%),
    linear-gradient(180deg, #111, var(--bg));
}

.promo {
  display: flex;
  min-height: 210px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  border: 1px solid #ffffff14;
  border-radius: 7px;
  padding: 34px;
  background:
    linear-gradient(100deg, #240204 0%, #151515 72%),
    var(--surface);
  box-shadow: var(--shadow);
}

.promo h2 {
  max-width: 700px;
  margin: 10px 0;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -.045em;
}

.promo p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
}

.list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  border-bottom: 1px solid var(--line);
  padding: 17px 22px;
  transition: background .18s ease;
}

.list-row:hover {
  background: var(--surface-2);
}

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

.list-row strong {
  font-size: 16px;
}

.list-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.danger {
  border: 0;
  color: var(--danger);
  background: none;
  font-weight: 800;
  cursor: pointer;
}

.auth-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 90px 20px 40px;
  background:
    radial-gradient(circle at 50% 10%, #e5091424, transparent 32%),
    #050505;
}

.auth-card {
  width: min(470px, 100%);
  border-radius: 7px;
  padding: 54px 52px;
  background: #090909ec;
  box-shadow: 0 20px 80px #000d;
}

.auth-card h1 {
  margin: 14px 0 24px;
  font-size: 42px;
  line-height: 1;
}

.auth-card p {
  color: var(--muted);
  line-height: 1.6;
}

.auth-card form {
  display: grid;
  gap: 14px;
}

.auth-card label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.auth-card input,
.admin input,
.admin textarea,
.admin select {
  width: 100%;
  border: 1px solid #555;
  border-radius: 5px;
  outline: none;
  padding: 15px;
  color: var(--text);
  background: #161616;
}

.auth-card input:focus,
.admin input:focus,
.admin textarea:focus,
.admin select:focus {
  border-color: #fff;
}

.error {
  border: 1px solid var(--danger);
  border-radius: 12px;
  padding: 13px 15px;
  color: #fff;
  background: #3d1217;
}

.success-mark,
.error-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--success);
  font-size: 30px;
  font-weight: 900;
}

.error-mark {
  background: var(--accent);
}

.muted {
  color: var(--muted);
  font-size: 14px;
}

code {
  display: block;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  margin: 14px 0;
  padding: 15px;
  color: #fff;
  background: #050505;
}

.copy {
  border: 0;
  padding: 0;
  color: var(--text);
  background: none;
  font-weight: 800;
  cursor: pointer;
}

.callout {
  margin-top: 28px;
  border: 1px solid #e509147a;
  border-radius: 16px;
  padding: 20px 24px;
  color: var(--muted);
  background: var(--surface);
}

.callout a {
  color: #fff;
  font-weight: 800;
}

.faq-section {
  padding-top: 92px;
}

.faq-section .section-title {
  justify-content: center;
  margin-bottom: 28px;
  text-align: center;
}

.faq-section .section-title > div {
  width: 100%;
}

.faq-section .section-title h2 {
  font-size: clamp(34px, 4.2vw, 52px);
}

.faq-section .section-title p {
  margin-inline: auto;
}

.faq-list {
  display: grid;
  width: 100%;
  gap: 8px;
}

.faq-list details {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #2d2d2d;
  transition: background .15s ease;
}

.faq-list details:hover,
.faq-list details[open] {
  background: #414141;
}

.faq-list summary {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  color: #f3f3f3;
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary b {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 0;
  border-radius: 0;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  transition: transform .18s ease;
}

.faq-list details[open] summary b {
  transform: rotate(45deg);
}

.faq-list details > div {
  border-top: 1px solid #050505;
  padding: 24px 28px 28px;
}

.faq-list p {
  max-width: none;
  margin: 0;
  color: #f1f1f1;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.5;
}

.faq-cta {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  border-radius: 0;
  margin-top: 38px;
  padding: 0;
  background: transparent;
  text-align: center;
}

.faq-cta h2 { margin: 0 0 6px; font-size: clamp(25px, 3vw, 36px); }
.faq-cta p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.5; }

.footer {
  border-top: 1px solid #ffffff0d;
  margin-top: 60px;
  padding: 50px 0 70px;
  color: var(--faint);
  background: #050505;
  font-size: 13px;
}

.footer-help {
  display: inline-block;
  margin-bottom: 32px;
  color: #c8c8c8;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.footer-grid > div {
  display: grid;
  align-content: start;
  gap: 11px;
}

.footer-grid strong {
  margin-bottom: 4px;
  color: #f1f1f1;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footer-grid a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #ffffff0d;
  margin-top: 38px;
  padding-top: 24px;
}

.footer-language > div {
  inset: auto auto calc(100% + 8px) 0;
}

@media (max-width: 900px) {
  .wrap,
  .narrow {
    width: min(100% - 36px, 720px);
  }

  .landing-hero {
    min-height: 700px;
  }

  .hero-content {
    width: min(680px, 74vw);
  }

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

  .preview-rail {
    grid-template-columns: repeat(4, minmax(240px, 1fr));
  }

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

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

@media (max-width: 650px) {
  .topbar {
    height: 62px;
    background: #050505ed;
  }

  .topbar-inner {
    height: 62px;
  }

  .brand {
    font-size: 21px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  nav {
    gap: 8px;
  }

  nav > a:not(.button) {
    display: none;
  }

  .language-switch summary { padding-inline: 8px; }

  .faq-section { padding-top: 58px; }
  .faq-list summary { min-height: 72px; padding: 18px 20px; }
  .faq-list details > div { padding: 19px 20px 22px; }
  .faq-list summary b { width: 32px; height: 32px; flex-basis: 32px; font-size: 33px; }
  .faq-cta { padding: 0; }
  .faq-cta .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }

  .landing-hero {
    min-height: 650px;
    align-items: center;
    padding: 80px 0 34px;
    background:
      radial-gradient(ellipse at 50% 16%, #6d09133d 0%, #2503071c 36%, transparent 68%),
      linear-gradient(180deg, #080808 0%, #050505 76%, var(--bg) 100%);
  }

  .hero-content {
    width: 100%;
  }

  .hero-content h1,
  .page-head h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .hero-content .lead,
  .lead {
    font-size: 17px;
  }

  .landing-hero + .content-row {
    margin-top: 0;
    padding-top: 34px;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .actions .button {
    width: 100%;
    min-height: 52px;
    padding-inline: 16px;
  }

  .section,
  .content-row {
    padding-block: 22px;
  }

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

  .section-title > .link {
    margin-top: 14px;
  }

  .card {
    min-height: 210px;
  }

  .page-head {
    padding-top: 110px;
  }

  .feature-hero {
    min-height: 540px;
    padding-bottom: 42px;
  }

  .cabinet-head {
    align-items: flex-start;
  }

  .auth-card {
    padding: 38px 28px;
  }

  .promo {
    padding: 26px;
  }

  .list-row {
    align-items: flex-start;
  }
}

/* Catalog */
.catalog-preview {
  padding: 56px 0 22px;
}

/* Search and personal picks */
.discovery-section {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  gap: 34px;
  border: 1px solid #ffffff22;
  margin-top: 34px;
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(circle at 92% 8%, #e5091419, transparent 31%),
    #111;
  box-shadow: 0 26px 70px #0007;
}

.landing-page .discovery-section {
  margin-top: 0;
}

.discovery-assistant-only {
  grid-template-columns: minmax(0, 1fr);
}

.discovery-assistant-only .discovery-copy {
  max-width: 820px;
}

.discovery-assistant-only .assistant-entry {
  max-width: 720px;
}

.assistant-entry {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  gap: 20px;
  border: 1px solid #ffffff2b;
  border-radius: 999px;
  margin-top: 24px;
  padding: 6px 7px 6px 21px;
  color: #f7f7f7;
  background: #ffffff0a;
  box-shadow: inset 0 1px #ffffff0b;
  font-size: 15px;
  font-weight: 700;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.assistant-entry i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #e50914;
  font-size: 20px;
  font-style: normal;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
}

.assistant-entry:hover {
  border-color: #ffffff55;
  background: #ffffff10;
  transform: translateY(-1px);
}

.assistant-entry:hover i { background: #f21b26; transform: translateX(2px); }
.assistant-entry:focus-visible { outline: 3px solid #e509145c; outline-offset: 3px; }

.discovery-copy h2 {
  margin: 10px 0 12px;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.045em;
  line-height: 1;
}

.discovery-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.discovery-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 25px;
}

.discovery-search input,
.recommend-quiz select {
  width: 100%;
  border: 1px solid #ffffff2b;
  border-radius: 10px;
  color: #fff;
  background: #080808e8;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.discovery-search input {
  min-height: 52px;
  padding: 0 17px 0 43px;
}

.discovery-search input:focus,
.recommend-quiz select:focus {
  border-color: #ffffffa8;
  box-shadow: 0 0 0 3px #ffffff12;
}

.search-icon {
  position: absolute;
  z-index: 1;
  top: 17px;
  left: 17px;
  width: 16px;
  height: 16px;
  border: 2px solid #b3b3b3;
  border-radius: 50%;
  pointer-events: none;
}

.search-icon::after {
  position: absolute;
  width: 7px;
  height: 2px;
  background: #b3b3b3;
  content: "";
  transform: translate(11px, 12px) rotate(45deg);
}

.recommend-quiz {
  min-width: 0;
  border-left: 1px solid #ffffff1c;
  padding-left: 34px;
}

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

.quiz-fields label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.quiz-fields label > span {
  color: #d5d5d5;
  font-size: 13px;
  font-weight: 750;
}

.recommend-quiz select {
  min-height: 47px;
  padding: 0 38px 0 13px;
}

.recommend-submit {
  margin-top: 19px;
}

.recommend-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.recommend-status.loading { color: #fff; }
.recommend-status.error { color: var(--danger); }

.recommend-result {
  margin-top: 14px;
}

.recommend-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 19px;
  border: 1px solid #e509147d;
  padding: 14px;
  background: #080808e8;
  animation: recommend-in .32s ease both;
}

.recommend-card > img {
  width: 112px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.recommend-card h3 {
  margin: 5px 0 5px;
  font-size: 26px;
}

.recommend-card p {
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.recommend-card .recommend-meta {
  margin: 0;
  color: var(--success);
  font-weight: 800;
}

.recommend-card .button {
  min-height: 40px;
  padding: 9px 15px;
}

@keyframes recommend-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.search-head {
  padding: 148px 0 36px;
}

.search-head h1 {
  max-width: 900px;
  margin: 12px 0 14px;
  font-size: clamp(43px, 6vw, 74px);
  letter-spacing: -.055em;
  line-height: 1;
}

.search-page .discovery-section {
  margin-top: 0;
}

.search-results {
  min-height: 210px;
  padding: 52px 0 70px;
}

.search-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.search-results-head h2 { margin: 0; font-size: 31px; }
.search-results-head span { color: var(--muted); }

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

/* Conversational movie assistant */
.assistant-page {
  background:
    radial-gradient(circle at 78% 18%, #5b080f20, transparent 28%),
    var(--bg);
}

.assistant-page-head {
  padding: 136px 0 34px;
}

.assistant-page-head h1 {
  max-width: 900px;
  margin: 11px 0 13px;
  font-size: clamp(42px, 5.7vw, 70px);
  letter-spacing: -.052em;
  line-height: 1;
}

.assistant-page-head .lead { max-width: 840px; }

.assistant-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.assistant-chat {
  border: 1px solid #ffffff22;
  border-radius: 20px;
  background: #111;
  box-shadow: 0 25px 70px #0008;
}

.assistant-chat {
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr) auto auto auto;
  min-width: 0;
  height: min(690px, calc(100vh - 116px));
  min-height: 590px;
  overflow: hidden;
}

.assistant-chat-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #ffffff16;
  padding: 15px 18px;
  background: #171717e8;
}

.assistant-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid #ffffff1d;
  border-radius: 13px;
  background: #080808;
}

.assistant-avatar img { width: 32px; height: 32px; object-fit: contain; }

.assistant-chat-head > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.assistant-chat-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-chat-head small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.assistant-chat-head small i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px #46d36988;
}

.assistant-chat-head > button {
  border: 0;
  margin-left: auto;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
}

.assistant-chat-head > button:hover { color: #fff; }

.assistant-messages {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px clamp(16px, 3vw, 32px);
  background:
    linear-gradient(#0d0d0df5, #0d0d0df5),
    radial-gradient(circle at 80% 10%, #e509142c, transparent 42%);
  scrollbar-color: #4b4b4b transparent;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.assistant-message {
  display: flex;
  max-width: min(78%, 650px);
  animation: chat-message-in .24s ease both;
}

.assistant-message.user { align-self: flex-end; }

.assistant-message > div {
  min-width: 0;
  border: 1px solid #ffffff19;
  border-radius: 18px 18px 18px 5px;
  padding: 12px 15px;
  color: #e8e8e8;
  background: #242424;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.assistant-message.user > div {
  border-color: #e509146c;
  border-radius: 18px 18px 5px;
  color: #fff;
  background: #a50810;
}

@keyframes chat-message-in {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.assistant-movie {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid #ffffff20;
  border-radius: 13px;
  margin-top: 13px;
  padding: 8px;
  color: #fff;
  background: #090909;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, transform .18s ease;
}

.assistant-movie:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.assistant-movie > img {
  width: 82px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
}

.assistant-movie > span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.assistant-movie strong { font-size: 17px; }
.assistant-movie small { color: var(--success); font-weight: 800; }
.assistant-movie span span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.assistant-movie > b { color: var(--muted); font-size: 28px; }

.assistant-typing {
  width: fit-content;
  border: 1px solid #ffffff19;
  border-radius: 15px 15px 15px 5px;
  margin: -4px 32px 10px;
  padding: 11px 14px;
  background: #242424;
}

.assistant-typing i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 2px;
  background: #aaa;
  animation: typing-dot 1s ease-in-out infinite;
}

.assistant-typing i:nth-child(2) { animation-delay: .14s; }
.assistant-typing i:nth-child(3) { animation-delay: .28s; }

@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.assistant-quick {
  display: flex;
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  border-top: 1px solid #ffffff0d;
  padding: 10px 18px 8px;
  scrollbar-width: none;
}

.assistant-quick::-webkit-scrollbar { display: none; }

.assistant-quick button {
  min-height: 36px;
  flex: 0 0 auto;
  border: 1px solid #ffffff28;
  border-radius: 999px;
  padding: 7px 13px;
  color: #eee;
  background: #1b1b1b;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .16s ease, background .16s ease;
}

.assistant-quick button:hover {
  border-color: #e5091499;
  background: #e5091419;
}

.assistant-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  padding: 10px 18px 7px;
}

.assistant-composer input {
  min-width: 0;
  min-height: 48px;
  border: 1px solid #ffffff28;
  border-radius: 12px;
  outline: none;
  padding: 0 15px;
  color: #fff;
  background: #080808;
}

.assistant-composer input:focus { border-color: #ffffff88; }
.assistant-composer .button { min-height: 48px; }

.assistant-note {
  margin: 0;
  padding: 2px 20px 13px;
  color: #727272;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.assistant-credit { padding-bottom: 60px; }
.assistant-credit .catalog-credit { margin-top: 22px; }

.catalog-rows {
  display: grid;
  gap: 42px;
}

.movie-row {
  min-width: 0;
}

.movie-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.movie-row-head h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 31px);
  letter-spacing: -.035em;
}

.rail-controls {
  display: flex;
  gap: 7px;
}

.rail-controls button,
.dialog-close {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  color: #fff;
  background: #1f1f1fcc;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.rail-controls button span {
  margin-top: -3px;
  font-size: 31px;
  line-height: 1;
}

.rail-controls button:hover,
.dialog-close:hover {
  border-color: #fff;
  background: #333;
  transform: scale(1.06);
}

.poster-rail {
  display: grid;
  grid-auto-columns: minmax(150px, 182px);
  grid-auto-flow: column;
  gap: 11px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 4px 3px 19px;
  scroll-behavior: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.poster-rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.poster-rail.is-dragging { cursor: grabbing; }

.poster-rail.is-auto-moving {
  display: block;
  overflow: hidden;
  scroll-behavior: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  contain: layout paint;
}

.poster-rail.is-auto-moving::-webkit-scrollbar {
  display: none;
}

.auto-carousel-track {
  display: grid;
  width: max-content;
  grid-auto-columns: minmax(150px, 182px);
  grid-auto-flow: column;
  gap: 11px;
  will-change: transform;
  backface-visibility: hidden;
}

.poster-card {
  min-width: 0;
  border: 1px solid #ffffff18;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: #151515;
  box-shadow: 0 7px 24px #0007;
  cursor: pointer;
  scroll-snap-align: start;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.poster-card:hover,
.poster-card:focus-visible {
  z-index: 2;
  border-color: #e50914cc;
  outline: none;
  box-shadow: 0 16px 38px #000d;
  transform: translateY(-5px) scale(1.018);
}

.poster-image {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #202020;
}

.poster-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform .35s ease;
}

.poster-card:hover .poster-image img {
  transform: scale(1.035);
}

.poster-info {
  display: grid;
  min-height: 76px;
  align-content: space-between;
  gap: 7px;
  padding: 12px 13px 13px;
}

.poster-info strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.24;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.poster-info small {
  color: var(--muted);
  font-size: 12px;
}

.poster-info small b,
.movie-meta b {
  margin-right: 7px;
  color: var(--success);
}

.catalog-head {
  padding: 148px 0 56px;
}

.catalog-head h1,
.cabinet-heading h1 {
  max-width: 900px;
  margin: 12px 0 14px;
  font-size: clamp(43px, 6vw, 74px);
  line-height: 1;
  letter-spacing: -.055em;
}

.catalog-page-rows {
  padding-bottom: 55px;
}

.catalog-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-top: 48px;
  padding: 18px 20px;
  color: var(--muted);
  background: #111;
}

.catalog-credit span {
  color: #fff;
  font-weight: 700;
}

.catalog-credit > img {
  width: 150px;
  height: auto;
}

.catalog-credit small {
  max-width: 600px;
  text-align: right;
}

.dialog-shell {
  width: min(780px, calc(100% - 32px));
  max-height: min(860px, calc(100vh - 32px));
  border: 1px solid #ffffff26;
  border-radius: 24px;
  padding: 0;
  overflow: auto;
  color: var(--text);
  background: #111;
  box-shadow: 0 30px 100px #000;
}

.dialog-shell[open] {
  animation: dialog-shell-in .22s cubic-bezier(.2, .75, .25, 1) both;
}

.dialog-shell::backdrop {
  background: #000c;
  backdrop-filter: blur(8px);
  animation: dialog-backdrop-in .2s ease both;
}

@keyframes dialog-shell-in {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dialog-backdrop-in {
  from { background: #0000; backdrop-filter: blur(0); }
  to { background: #000c; backdrop-filter: blur(8px); }
}

.target-dialog-content > p {
  margin: 12px 0 22px;
  color: var(--muted);
  line-height: 1.55;
}

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

.target-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 13px;
  border: 1px solid #ffffff22;
  border-radius: 17px;
  padding: 14px;
  color: #fff;
  background: #191919;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.target-option:hover,
.target-option:focus-visible,
.target-option.selected {
  border-color: #e50914;
  outline: none;
  background: #241113;
  transform: translateY(-1px);
}

.target-option:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none;
}

.target-option-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid #ffffff20;
  border-radius: 13px;
  background: #ffffff0c;
}

.target-option-icon img,
.target-install-link img {
  width: 20px;
  filter: brightness(0) invert(1);
}

.target-option-copy {
  min-width: 0;
  flex: 1;
}

.target-option-copy strong,
.target-option-copy small {
  display: block;
}

.target-option-copy small {
  margin-top: 4px;
  overflow: hidden;
  color: #929292;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-status {
  border: 1px solid #ffffff20;
  border-radius: 999px;
  padding: 5px 8px;
  color: #888;
  font-size: 11px;
  font-weight: 700;
}

.target-status.online {
  border-color: #3b9d5866;
  color: #78d38f;
  background: #2466382b;
}

.target-feedback {
  min-height: 22px;
  margin: 15px 2px 0;
  color: #a5a5a5;
  font-size: 13px;
  line-height: 1.5;
}

.target-feedback.success { color: #78d38f; }
.target-feedback.error { color: #ff777e; }

.target-install-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #ddd;
  font-size: 13px;
  text-decoration: none;
}

.target-install-link:hover { color: #fff; }

.dialog-close {
  position: absolute;
  z-index: 3;
  inset: 18px 18px auto auto;
  border-color: #ffffff4d;
  font-size: 26px;
}

.dialog-visual {
  min-height: 330px;
  background-position: center;
  background-size: cover;
}

.target-dialog-visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, #e5091447 0%, #5f080f2e 27%, transparent 58%),
    linear-gradient(135deg, #1a1a1a, #090909 72%);
}

.target-dialog-visual::before,
.target-dialog-visual::after {
  position: absolute;
  border: 1px solid #ffffff0f;
  border-radius: 50%;
  content: "";
}

.target-dialog-visual::before { width: 250px; height: 250px; }
.target-dialog-visual::after { width: 170px; height: 170px; }

.target-dialog-visual span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 1px solid #ffffff2b;
  border-radius: 24px;
  background: #111b;
  box-shadow: 0 20px 50px #0009;
}

.target-dialog-visual img {
  width: 40px;
  filter: brightness(0) invert(1);
}

.dialog-content {
  padding: 0 38px 40px;
}

.dialog-content h2 {
  margin: 9px 0 8px;
  font-size: clamp(34px, 6vw, 58px);
  line-height: .98;
  letter-spacing: -.05em;
}

.target-dialog-content h2 {
  font-size: clamp(34px, 6vw, 58px);
}

.dialog-content p {
  max-width: 700px;
  color: #d0d0d0;
  line-height: 1.6;
}

.movie-meta {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.actions.left {
  justify-content: flex-start;
}

.dialog-open {
  overflow: hidden;
}

.empty-state {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 50px;
  color: var(--muted);
  background: #111;
  text-align: center;
}

/* Authentication */
.auth-page .topbar,
.auth-page .footer,
.cabinet-page .topbar,
.cabinet-page .footer {
  display: none;
}

.auth-page {
  display: block;
  padding: 0;
  background:
    radial-gradient(circle at 12% 15%, #6d0a1433, transparent 32%),
    linear-gradient(145deg, #090909, #030303 62%);
}

.auth-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(360px, 1fr) minmax(500px, 620px);
  align-items: center;
  gap: clamp(50px, 8vw, 130px);
  width: min(1240px, calc(100% - 64px));
  margin: auto;
  padding: 70px 0;
}

.auth-pitch .brand {
  margin-bottom: 90px;
}

.auth-pitch h1 {
  max-width: 640px;
  margin: 16px 0 20px;
  font-size: clamp(50px, 6vw, 78px);
  line-height: .95;
  letter-spacing: -.06em;
}

.auth-pitch > p {
  max-width: 620px;
  color: #c8c8c8;
  font-size: 19px;
  line-height: 1.55;
}

.auth-benefits {
  display: grid;
  gap: 13px;
  margin-top: 34px;
}

.auth-benefits span {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #e2e2e2;
  font-weight: 700;
}

.auth-benefits img {
  width: 21px;
  height: 21px;
  filter: invert(1);
}

.auth-card-wide {
  width: 100%;
  border: 1px solid #ffffff1f;
  border-radius: 26px;
  padding: 42px;
  background: #151515d9;
  box-shadow: 0 24px 80px #000b;
  backdrop-filter: blur(20px);
}

.auth-card-heading h1 {
  margin-bottom: 12px;
}

.auth-card-heading p {
  margin-top: 0;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  margin: 28px 0;
  padding: 5px;
  background: #090909;
}

.auth-tabs button {
  border: 0;
  border-radius: 10px;
  padding: 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.auth-tabs button.active {
  color: #fff;
  background: #292929;
}

.auth-pane h2 {
  margin: 8px 0;
  font-size: 28px;
}

.auth-pane > p {
  margin-top: 0;
}

.input-with-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.input-with-action .button {
  min-width: 150px;
}

.otp-stage > p strong {
  color: #fff;
}

.otp-inputs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin: 24px 0 17px;
}

.otp-inputs input {
  min-width: 0;
  aspect-ratio: 1 / 1.12;
  border: 1px solid #555;
  border-radius: 13px;
  padding: 0;
  font-family: "Kinelaro Display", sans-serif;
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 700;
  text-align: center;
}

.otp-inputs input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #e5091429;
}

.otp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 35px;
  color: var(--muted);
  font-size: 13px;
}

.text-button,
.preview-code {
  border: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.text-button:disabled {
  opacity: .45;
  cursor: default;
}

.preview-code {
  width: 100%;
  border: 1px dashed #e5091480;
  border-radius: 12px;
  margin-bottom: 15px;
  padding: 11px;
  color: #ff9ca1;
  background: #e509140c;
}

.preview-note,
.auth-terms {
  margin: 22px 0 0 !important;
  color: #858585 !important;
  font-size: 12px;
  line-height: 1.5 !important;
}

.auth-message {
  border: 1px solid var(--danger);
  border-radius: 12px;
  margin-top: 17px;
  padding: 12px 14px;
  background: #3d1217;
  font-size: 13px;
}

.auth-message.success {
  border-color: var(--success);
  background: #12351d;
}

.auth-message.loading {
  border-color: #ffffff24;
  background: #222;
}

.telegram-login-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid #ffffff25;
  border-radius: 18px;
  background: #272727;
}

.telegram-login-mark img {
  width: 28px;
  filter: invert(1);
}

.telegram-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 17px;
  color: var(--muted);
  font-size: 13px;
}

.telegram-wait span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 #46d36966;
  animation: wait-pulse 1.7s infinite;
}

@keyframes wait-pulse {
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Cabinet */
.cabinet-page {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 88% 0%, #6e0a1420, transparent 30%),
    #080808;
}

.cabinet-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 276px minmax(0, 1fr);
}

.cabinet-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  border-right: 1px solid #ffffff10;
  padding: 30px 22px 24px;
  background: #0d0d0df2;
  backdrop-filter: blur(18px);
}

.cabinet-site-back {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  margin-top: 22px;
  padding: 10px 12px;
  color: var(--muted);
  background: #ffffff06;
  font-size: 12px;
  font-weight: 750;
}

.cabinet-site-back:hover { border-color: #ffffff2d; color: #fff; background: #ffffff0b; }
.cabinet-site-back img { width: 17px; height: 17px; filter: invert(1); opacity: .7; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #ffffff12;
  border-radius: 16px;
  margin: 16px 0 24px;
  padding: 13px;
  background: #ffffff08;
}

.avatar-letter {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #ff5360;
  border-radius: 12px;
  color: #fff;
  background: #4b0a10;
  font-weight: 900;
}

.sidebar-user div {
  min-width: 0;
}

.sidebar-user strong,
.sidebar-user small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.cabinet-nav {
  display: grid;
  gap: 5px;
}

.cabinet-nav a {
  display: grid;
  grid-template-columns: 21px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 12px;
  color: #a9a9a9;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.cabinet-nav a:hover {
  color: #fff;
  background: #ffffff08;
}

.cabinet-nav a.active {
  border-color: #e5091475;
  color: #fff;
  background: #e5091417;
}

.cabinet-nav img,
.sidebar-bottom img {
  width: 20px;
  height: 20px;
  filter: invert(1);
  opacity: .8;
}

.cabinet-nav img.achievement-brand-icon,
.profile-links img.achievement-brand-icon {
  filter: none;
  opacity: 1;
}

.cabinet-nav b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: #ffffff12;
  font-size: 11px;
}

.sidebar-bottom {
  display: grid;
  gap: 5px;
  margin-top: auto;
}

.sidebar-bottom a,
.sidebar-bottom button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.sidebar-bottom a:hover,
.sidebar-bottom button:hover {
  color: #fff;
  background: #ffffff08;
}

.cabinet-language {
  position: relative;
}

.cabinet-language summary {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  list-style: none;
  cursor: pointer;
}

.cabinet-language summary::-webkit-details-marker {
  display: none;
}

.cabinet-language summary b {
  margin-left: auto;
  color: #fff;
}

.cabinet-language > div {
  position: absolute;
  z-index: 20;
  inset: auto 0 calc(100% + 7px);
  overflow: hidden;
  border: 1px solid #ffffff20;
  border-radius: 14px;
  padding: 5px;
  background: #161616f5;
  box-shadow: 0 18px 45px #000a;
  backdrop-filter: blur(20px);
}

.cabinet-language > div a {
  justify-content: space-between;
  border: 1px solid transparent;
  padding: 8px 9px;
}

.cabinet-language > div a.active {
  border-color: #e5091466;
  color: #fff;
  background: #e5091418;
}

.cabinet-language img {
  width: 18px;
  height: 18px;
  filter: invert(1);
}

.cabinet-main {
  width: min(1240px, calc(100% - 70px));
  min-width: 0;
  margin: 0 auto;
  padding: 58px 0 80px;
}

.cabinet-heading {
  margin-bottom: 35px;
}

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

.cabinet-heading p {
  max-width: 740px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-card {
  display: grid;
  min-height: 190px;
  border: 1px solid #ffffff17;
  border-radius: 21px;
  padding: 22px;
  background: #151515cc;
  box-shadow: 0 10px 30px #0005;
  transition: border-color .18s ease, transform .18s ease;
}

.stat-card:hover {
  border-color: #e509148c;
  transform: translateY(-3px);
}

.stat-icon,
.session-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid #ffffff1c;
  border-radius: 13px;
  background: #ffffff0a;
}

.stat-icon img,
.session-icon img {
  width: 21px;
  height: 21px;
  filter: invert(1);
}

.stat-card small {
  align-self: end;
  margin-top: 17px;
  color: var(--muted);
}

.stat-card strong {
  margin: 2px 0;
  font-family: "Kinelaro Display", sans-serif;
  font-size: 38px;
}

.stat-card > span:last-child {
  color: #ddd;
  font-size: 12px;
  font-weight: 700;
}

.achievement-summary {
  display: flex;
  align-items: center;
  gap: 25px;
  overflow: hidden;
  border: 1px solid #e5091470;
  border-radius: 24px;
  padding: 28px;
  background:
    radial-gradient(circle at 88% 15%, #e5091430, transparent 34%),
    #151112;
  box-shadow: inset 0 1px #ffffff12, 0 16px 45px #0005;
}

.achievement-summary h2 {
  margin: 5px 0;
  font-size: clamp(30px, 4vw, 46px);
}

.achievement-summary p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.achievement-summary-expanded {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(250px, .7fr);
}

.achievement-summary-copy {
  min-width: 0;
}

.achievement-level-card {
  display: grid;
  align-self: stretch;
  box-sizing: border-box;
  align-content: center;
  border-left: 1px solid #ffffff17;
  padding-left: 28px;
}

.achievement-level-card > span {
  color: #ff5a62;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.achievement-level-card > div {
  display: flex;
  align-items: end;
  gap: 12px;
  margin: 5px 0 10px;
}

.achievement-level-card strong {
  font-family: "Kinelaro Display", sans-serif;
  font-size: 54px;
  line-height: .86;
}

.achievement-level-card b {
  padding-bottom: 3px;
  font-size: 19px;
}

.achievement-level-card progress {
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: #ffffff14;
  overflow: hidden;
}

.achievement-level-card progress::-webkit-progress-bar {
  background: #ffffff14;
}

.achievement-level-card progress::-webkit-progress-value,
.achievement-level-card progress::-moz-progress-bar {
  background: var(--accent);
}

.achievement-level-card small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

.achievement-viewing-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
}

.achievement-viewing-head h2 {
  margin: 5px 0 0;
  font-size: clamp(27px, 3vw, 38px);
}

.achievement-viewing-head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

.achievement-viewing-stats {
  display: grid;
  grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid #ffffff17;
  border-radius: 18px;
  background: #121212;
}

.achievement-viewing-stats article {
  min-width: 0;
  border-right: 1px solid #ffffff13;
  padding: 18px 17px;
}

.achievement-viewing-stats article:last-child {
  border-right: 0;
}

.achievement-viewing-stats span,
.achievement-viewing-stats strong {
  display: block;
}

.achievement-viewing-stats span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.achievement-viewing-stats strong {
  margin-top: 6px;
  font-family: "Kinelaro Display", sans-serif;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1;
  white-space: nowrap;
}

.achievement-viewing-stats .accent strong {
  color: #ff4f58;
}

.achievement-ring {
  --achievement-total: 0;
  position: relative;
  display: grid;
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--achievement-total) * 1%), #ffffff12 0);
  box-shadow: 0 12px 34px #0007;
}

.achievement-ring::before {
  position: absolute;
  width: 78px;
  height: 78px;
  border: 1px solid #ffffff16;
  border-radius: 50%;
  background: #111;
  content: "";
}

.achievement-ring span {
  position: relative;
  display: grid;
  text-align: center;
}

.achievement-ring strong {
  font-family: "Kinelaro Display", sans-serif;
  font-size: 30px;
  line-height: 1;
}

.achievement-ring small {
  color: var(--muted);
  font-size: 11px;
}

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

.achievement-card {
  min-width: 0;
  border: 1px solid #ffffff18;
  border-radius: 22px;
  padding: 22px;
  background: #141414d9;
  box-shadow: inset 0 1px #ffffff0d, 0 12px 32px #0004;
}

.achievement-card.unlocked {
  border-color: #e509146d;
  background:
    radial-gradient(circle at 90% 8%, #e5091422, transparent 36%),
    #171313;
}

.achievement-card-top,
.achievement-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.achievement-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #ffffff1c;
  border-radius: 13px;
  background: linear-gradient(145deg, #1a1a1a, #101010);
  box-shadow: inset 0 1px #ffffff0d;
}

.achievement-card.unlocked .achievement-icon {
  border-color: #ffffff32;
  background: linear-gradient(145deg, #1d1d1d, #111);
  box-shadow: inset 0 1px #ffffff14;
}

.achievement-icon img {
  width: 27px;
  height: 27px;
  filter: none;
}

.achievement-card.locked .achievement-icon img {
  opacity: .42;
}

.achievement-state {
  border: 1px solid #ffffff1c;
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted);
  background: #ffffff08;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.achievement-card.unlocked .achievement-state {
  border-color: #46d36954;
  color: #83eb9c;
  background: #46d36910;
}

.achievement-card h2 {
  margin: 24px 0 7px;
  font-size: 27px;
}

.achievement-card p {
  min-height: 45px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.achievement-progress {
  display: block;
  width: 100%;
  overflow: hidden;
  height: 7px;
  border: 0;
  border-radius: 999px;
  margin: 24px 0 11px;
  appearance: none;
  background: #ffffff10;
}

.achievement-progress::-webkit-progress-bar {
  border-radius: inherit;
  background: #ffffff10;
}

.achievement-progress::-webkit-progress-value {
  border-radius: inherit;
  background: linear-gradient(90deg, #b20710, #ff3440);
  box-shadow: 0 0 14px #e5091470;
}

.achievement-progress::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #b20710, #ff3440);
  box-shadow: 0 0 14px #e5091470;
}

.achievement-card footer {
  color: var(--muted);
  font-size: 11px;
}

.achievement-card footer b {
  color: #fff;
}

.cabinet-mobile-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cabinet-mobile-back {
  border: 1px solid #ffffff18;
  border-radius: 11px;
  padding: 9px 10px;
  color: var(--muted);
  background: #111;
  font-size: 11px;
  font-weight: 800;
}

.cabinet-mobile-actions .cabinet-language > summary {
  min-height: 38px;
  border: 1px solid #ffffff18;
  border-radius: 12px;
  padding: 7px 9px;
  background: #111;
}

.cabinet-mobile-actions .cabinet-language > div {
  inset: calc(100% + 7px) 0 auto auto;
  width: 175px;
}

.cabinet-promo,
.connect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border: 1px solid #e509147d;
  border-radius: 22px;
  margin-top: 16px;
  padding: 27px 30px;
  background:
    radial-gradient(circle at 85% 30%, #e5091428, transparent 36%),
    #171112;
}

.cabinet-promo h2,
.connect-banner h2 {
  margin: 6px 0;
  font-size: clamp(27px, 3vw, 38px);
}

.cabinet-promo p,
.connect-banner p {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
}

.cabinet-section {
  padding-top: 46px;
}

.quick-grid,
.security-grid,
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quick-grid a,
.settings-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 15px;
  border: 1px solid #ffffff18;
  border-radius: 18px;
  padding: 20px;
  background: #141414cc;
  transition: border-color .18s ease, background .18s ease;
}

.quick-grid a:hover {
  border-color: #e5091480;
  background: #1b1b1b;
}

.quick-grid img {
  width: 23px;
  filter: invert(1);
}

.quick-grid strong,
.quick-grid small {
  display: block;
}

.quick-grid small {
  margin-top: 5px;
  color: var(--muted);
}

.quick-grid > a > span {
  font-size: 27px;
}

.connect-banner {
  justify-content: flex-start;
  margin: 0 0 8px;
}

.connect-banner .button {
  margin-left: auto;
}

.device-link-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid #ffffff15;
  margin-top: 6px;
  padding: 28px 4px;
}

.device-link-code h2 { margin: 6px 0; font-size: 28px; }
.device-link-code p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.5; }
.device-link-result {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 18px;
  border: 1px solid #e5091470;
  border-radius: 17px;
  padding: 18px 20px;
  background: #e509140e;
}

.device-link-result[hidden],
.device-link-error[hidden] { display: none; }
.device-link-result b { color: #fff; font-size: 34px; letter-spacing: .16em; }
.device-link-result span { color: #ddd; font-size: 13px; }
.device-link-result small { margin-left: auto; color: var(--muted); white-space: nowrap; }
.device-link-error { grid-column: 1 / -1; color: var(--danger) !important; }

.session-list.device-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.device-card-grid .session-row.device-card {
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: start;
  gap: 8px 10px;
  min-height: 0;
  padding: 14px;
  border: 1px solid #ffffff18;
  border-radius: 12px;
  background: #141414;
}
.device-card-grid .device-card .session-icon { width: 32px; height: 32px; background: none; }
.device-card-grid .device-card > div { min-width: 0; }
.device-card-grid .device-card strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.3; }
.device-card-grid .device-card small { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.device-card-grid .device-card form,
.device-card-grid .device-card .current-badge { grid-column: 2; justify-self: start; }
.device-card-grid .device-card button { min-height: 36px; padding: 7px 12px; font-size: 12px; border-radius: 8px; }
.device-revoke-dialog { width: min(440px, calc(100vw - 40px)); box-sizing: border-box; padding: 24px; border: 1px solid #ffffff30; border-radius: 16px; color: #fff; background: #161616; }
.device-revoke-dialog::backdrop { background: #000b; }
.device-revoke-dialog h2 { margin: 0 0 12px; }
.device-revoke-dialog p { color: #bbb; overflow-wrap: anywhere; }
.device-revoke-dialog > div { display: flex; gap: 10px; margin-top: 24px; }
.device-revoke-dialog .button { flex: 1; min-height: 44px; }
.device-revoke-dialog .button.danger { background: #bc1020; color: #fff; border-color: #bc1020; }

.session-list {
  overflow: hidden;
  border: 1px solid #ffffff18;
  border-radius: 20px;
  background: #121212;
}

.session-row {
  display: grid;
  grid-template-columns: 45px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  border-bottom: 1px solid #ffffff10;
  padding: 15px 19px;
}

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

.session-row strong,
.session-row small {
  display: block;
}

.session-row small {
  margin-top: 4px;
  color: var(--muted);
}

.current-badge,
.service-status {
  border: 1px solid #46d3696b;
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--success);
  background: #46d36912;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

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

.service-card {
  position: relative;
  min-height: 290px;
  border: 1px solid #ffffff17;
  border-radius: 21px;
  padding: 23px;
  background: #151515cc;
}

.service-card.available {
  border-color: #46d36955;
}

.service-card .service-status {
  position: absolute;
  inset: 24px 22px auto auto;
}

.service-status.pending {
  border-color: #ffffff25;
  color: var(--muted);
  background: #ffffff08;
}

.service-card h2,
.settings-card h2,
.profile-note h2 {
  margin: 25px 0 9px;
  font-size: 27px;
}

.service-card p,
.settings-card p,
.profile-note p {
  color: var(--muted);
  line-height: 1.55;
}

.service-card a {
  position: absolute;
  inset: auto auto 23px 23px;
  font-weight: 800;
}

.settings-card {
  grid-template-columns: 44px 1fr;
  align-items: start;
}

.settings-card h2 {
  margin: 0 0 7px;
}

.settings-card p {
  margin: 0;
}

.success-banner {
  border: 1px solid #46d36970;
  border-radius: 14px;
  margin-bottom: 18px;
  padding: 14px 17px;
  color: #caffd7;
  background: #12351d;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 15px;
}

.settings-form,
.profile-note {
  display: grid;
  gap: 18px;
  border: 1px solid #ffffff18;
  border-radius: 21px;
  padding: 28px;
  background: #141414;
}

.settings-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.settings-form input {
  width: 100%;
  border: 1px solid #555;
  border-radius: 11px;
  outline: none;
  padding: 14px;
  color: #fff;
  background: #0d0d0d;
}

.settings-form input:focus {
  border-color: var(--accent);
}

.settings-form input:disabled {
  color: #777;
}

.settings-form .button {
  justify-self: start;
}

.profile-note {
  align-content: start;
}

.profile-note > img {
  width: 25px;
  filter: invert(1);
}

.profile-note h2 {
  margin: 5px 0 0;
}

.profile-note p {
  margin: 0;
}

/* Calm, task-first cabinet */
.cabinet-welcome {
  display: flex;
  min-height: 276px;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid #ffffff18;
  padding: 12px 0 42px;
}

.welcome-avatar {
  width: 124px;
  height: 124px;
  border-radius: 36px;
}

.cabinet-welcome > div { min-width: 0; }
.cabinet-welcome h1 {
  margin: 8px 0 10px;
  font-size: clamp(44px, 6vw, 76px);
  line-height: .95;
  letter-spacing: -.055em;
}

.cabinet-welcome p {
  max-width: 660px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.cabinet-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.cabinet-welcome-actions .button { min-height: 48px; }
.cabinet-welcome-actions img { width: 18px; height: 18px; filter: invert(1); }

.cabinet-account-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, auto)) 1fr;
  align-items: stretch;
  border-bottom: 1px solid #ffffff12;
}

.cabinet-account-line a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  border-right: 1px solid #ffffff12;
  padding: 17px 22px 17px 0;
  color: var(--muted);
  font-size: 12px;
}

.cabinet-account-line a + a { padding-left: 22px; }
.cabinet-account-line a:last-child {
  justify-content: flex-end;
  border-right: 0;
  padding-right: 0;
  color: #fff;
  font-weight: 800;
}

.cabinet-account-line b { color: #fff; font-size: 15px; }
.cabinet-account-line i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px #46d36914;
}

.profile-settings-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, .7fr);
  gap: 36px;
  border-top: 1px solid #ffffff18;
  border-bottom: 1px solid #ffffff18;
  padding: 34px 0;
}

.profile-settings-form { display: grid; min-width: 0; gap: 28px; }
.profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-fields label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.profile-fields input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #ffffff25;
  border-radius: 13px;
  outline: none;
  padding: 0 14px;
  color: #fff;
  background: #101010;
}

.profile-fields input:focus { border-color: #e5091490; box-shadow: 0 0 0 3px #e5091417; }
.profile-fields input:disabled { color: #777; }
.profile-settings-form > .button { justify-self: start; }

.profile-links {
  display: grid;
  align-content: start;
  border-left: 1px solid #ffffff15;
  padding-left: 24px;
}

.profile-links > a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #ffffff12;
  padding: 16px 0;
  color: #fff;
}

.profile-links > a:first-child { padding-top: 0; }
.profile-links img { width: 20px; height: 20px; filter: invert(1); opacity: .8; }
.profile-links strong,
.profile-links small { display: block; }
.profile-links small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.profile-links > a > b { color: var(--muted); }
.profile-links form { padding-top: 20px; }
.profile-links form button {
  border: 0;
  padding: 0;
  color: #ff747c;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.cabinet-mobile-head,
.cabinet-mobile-nav {
  display: none;
}

@media (max-width: 1050px) {
  .achievement-summary-expanded {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .achievement-level-card {
    grid-column: 1 / -1;
    border-top: 1px solid #ffffff17;
    border-left: 0;
    padding-top: 22px;
    padding-left: 0;
  }

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

  .achievement-viewing-stats article:nth-child(3) {
    border-right: 0;
  }

  .achievement-viewing-stats article:nth-child(-n+3) {
    border-bottom: 1px solid #ffffff13;
  }

  .discovery-section {
    grid-template-columns: 1fr;
  }

  .recommend-quiz {
    border-top: 1px solid #ffffff1c;
    border-left: 0;
    padding-top: 28px;
    padding-left: 0;
  }

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

  .auth-layout {
    grid-template-columns: 1fr;
    width: min(620px, calc(100% - 40px));
  }

  .auth-pitch {
    display: none;
  }

  .cabinet-shell {
    display: block;
  }

  .cabinet-sidebar {
    display: none;
  }

  .cabinet-main {
    width: min(100% - 36px, 880px);
    padding-top: 18px;
  }

  .cabinet-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .cabinet-mobile-nav {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    margin: 0 -18px 40px;
    padding: 0 18px 12px;
    scrollbar-width: none;
  }

  .cabinet-mobile-nav a {
    display: block !important;
    flex: 0 0 auto;
    border: 1px solid #ffffff18;
    border-radius: 999px;
    padding: 8px 13px;
    color: var(--muted);
    background: #111;
    font-size: 12px;
    font-weight: 800;
  }

  .cabinet-mobile-nav a.active {
    border-color: #e5091480;
    color: #fff;
    background: #e5091419;
  }
}

@media (max-width: 760px) {
  .achievement-summary-expanded {
    grid-template-columns: 1fr;
  }

  .achievement-summary-expanded .achievement-ring {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
  }

  .achievement-viewing-head {
    display: block;
  }

  .achievement-viewing-head p {
    margin-top: 8px;
    text-align: left;
  }

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

  .achievement-viewing-stats article,
  .achievement-viewing-stats article:nth-child(3) {
    border-right: 1px solid #ffffff13;
    border-bottom: 1px solid #ffffff13;
  }

  .achievement-viewing-stats article:nth-child(2n) {
    border-right: 0;
  }

  .achievement-viewing-stats article:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  body.assistant-page {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .assistant-page .footer { display: none; }

  .auto-carousel-track {
    grid-auto-columns: minmax(128px, 144px);
  }

  .assistant-page-head {
    display: none;
  }

  .assistant-layout {
    width: 100%;
    padding-top: 62px;
  }

  .assistant-chat {
    height: calc(100dvh - 62px);
    min-height: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .assistant-message { max-width: 88%; }

  .assistant-chat-head > button {
    max-width: 86px;
    text-align: right;
  }

  .assistant-composer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .assistant-composer .button { width: auto; min-width: 84px; }

  .assistant-chat-head > button,
  .assistant-quick button,
  .assistant-composer .button { min-height: 44px; }

  .assistant-credit { display: none; }

  .discovery-section {
    width: 100%;
    border-right: 0;
    border-left: 0;
    padding: 30px 18px;
  }

  .discovery-search,
  .quiz-fields {
    grid-template-columns: 1fr;
  }

  .discovery-search .button,
  .recommend-submit {
    width: 100%;
  }

  .recommend-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .recommend-card > img {
    width: 92px;
  }

  .search-head {
    padding-top: 108px;
  }

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

  .poster-rail {
    grid-auto-columns: minmax(128px, 144px);
    margin-right: 0;
  }

  .rail-controls {
    display: none;
  }

  .catalog-preview {
    padding-top: 38px;
  }

  .catalog-head {
    padding-top: 108px;
  }

  .catalog-credit {
    align-items: flex-start;
    flex-direction: column;
  }

  .catalog-credit small {
    text-align: left;
  }

  .dialog-visual {
    min-height: 220px;
  }

  .dialog-content {
    padding: 0 23px 28px;
  }

  .dialog-shell {
    width: min(100% - 20px, 780px);
    max-height: calc(100dvh - 20px);
    border-radius: 20px;
  }

  .dialog-content .actions {
    display: grid;
  }

  .auth-layout {
    padding: 24px 0;
  }

  .auth-card-wide {
    border-radius: 21px;
    padding: 28px 22px;
  }

  .input-with-action {
    grid-template-columns: 1fr;
  }

  .input-with-action .button {
    min-height: 48px;
  }

  .otp-inputs {
    gap: 6px;
  }

  .stat-grid,
  .quick-grid,
  .security-grid,
  .service-grid,
  .profile-layout {
    grid-template-columns: 1fr;
  }

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

  .achievement-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .cabinet-heading {
    margin-bottom: 26px;
  }

  .cabinet-heading h1 {
    font-size: 42px;
  }

  .cabinet-promo,
  .connect-banner {
    align-items: flex-start;
    flex-direction: column;
    padding: 23px;
  }

  .connect-banner .button {
    width: 100%;
    margin-left: 0;
  }

  .device-link-code { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .device-link-code .button { width: 100%; }
  .device-link-result { grid-column: auto; align-items: flex-start; flex-direction: column; gap: 8px; }
  .device-link-result small { margin-left: 0; }

  .session-row {
    grid-template-columns: 42px 1fr;
  }

  .session-row form,
  .session-row .current-badge {
    grid-column: 2;
    justify-self: start;
  }

  .section-title > form {
    margin-top: 14px;
  }

  .cabinet-welcome {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding: 2px 0 30px;
  }

  .welcome-avatar { width: 76px; height: 76px; border-radius: 23px; }
  .cabinet-welcome h1 { font-size: 45px; }
  .cabinet-welcome p { font-size: 15px; }
  .cabinet-welcome-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .cabinet-welcome-actions .button { width: 100%; }
  .cabinet-account-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabinet-account-line a { border-bottom: 1px solid #ffffff10; padding: 14px 10px 14px 0; }
  .cabinet-account-line a + a { padding-left: 10px; }
  .cabinet-account-line a:nth-child(2) { border-right: 0; }
  .cabinet-account-line a:last-child { justify-content: flex-start; padding-left: 10px; }
  .profile-settings-shell { grid-template-columns: 1fr; gap: 28px; padding: 26px 0; }
  .profile-fields { grid-template-columns: 1fr; }
  .profile-links { border-top: 1px solid #ffffff15; border-left: 0; padding-top: 24px; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-wait span {
    animation: none;
  }
}

/* Locale picker */
.language-switch summary {
  min-height: 38px;
  gap: 8px;
  border-color: #ffffff1f;
  border-radius: 999px;
  padding: 7px 10px 7px 11px;
  background: #181818e8;
  box-shadow: inset 0 1px #ffffff0d;
}

.language-switch summary b { display: none; color: #fff; font-size: 11px; }

.language-switch summary i,
.cabinet-language summary i {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #aaa;
  border-bottom: 1.5px solid #aaa;
  margin: -3px 2px 0 3px;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.language-switch[open] summary i,
.cabinet-language[open] summary i { margin-top: 3px; transform: rotate(225deg); }

.language-switch > .language-menu,
.cabinet-language > div {
  width: 220px;
  border-color: #ffffff1f;
  border-radius: 16px;
  padding: 7px;
  background: #171717fa;
}

.language-switch > .language-menu a,
.cabinet-language > div a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 9px;
}

.language-switch > .language-menu a.active,
.cabinet-language > div a.active {
  border-color: #e509145f;
  box-shadow: none;
  background: #e5091417;
}

.language-switch > .language-menu a b,
.cabinet-language > div a b {
  display: grid;
  width: 31px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  color: #ddd;
  background: #ffffff0d;
  font-size: 10px;
}

.language-switch > .language-menu a i,
.cabinet-language > div a i { color: #ff4b55; font-style: normal; font-weight: 900; }
.cabinet-language summary > b { margin-left: auto; }

/* Persistent support */
.support-page { overflow-x: hidden; background: radial-gradient(circle at 50% 0%, #4a080e24, transparent 34%), #080808; }
.support-layout { padding-top: 132px; padding-bottom: 80px; }
.support-heading { max-width: 780px; margin-bottom: 28px; }
.support-heading h1 { margin: 9px 0 12px; font-size: clamp(44px, 6vw, 72px); letter-spacing: -.055em; }
.support-heading p { max-width: 700px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.support-shell { overflow: hidden; border: 1px solid #ffffff1f; border-radius: 26px; background: #121212; box-shadow: 0 28px 90px #0009, inset 0 1px #ffffff0d; }
.support-chat-head { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #ffffff12; padding: 0 22px; background: #191919; }
.support-chat-head > div { display: flex; align-items: center; gap: 9px; }
.support-chat-head > span { color: var(--muted); font-size: 12px; }
.support-presence { width: 9px; height: 9px; border-radius: 50%; background: #53d779; box-shadow: 0 0 0 4px #53d77918; }
.support-messages { display: flex; min-height: 390px; max-height: 58vh; overflow-x: hidden; overflow-y: auto; flex-direction: column; gap: 11px; padding: 24px; overscroll-behavior: contain; scrollbar-color: #4a4a4a transparent; }
.support-message { width: fit-content; max-width: min(76%, 720px); border: 1px solid #ffffff18; border-radius: 19px 19px 19px 6px; padding: 13px 16px; background: #202020; box-shadow: 0 8px 24px #0004; }
.support-message.user { align-self: flex-end; border-color: #ef313c70; border-radius: 19px 19px 6px; background: #3b0a0e; }
.support-message.operator { border-color: #ffffff36; background: #292929; }
.support-message span { color: #929292; font-size: 10px; }
.support-message p { margin: 5px 0 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-typing { display: flex; align-items: center; gap: 5px; padding: 0 24px 12px; color: var(--muted); font-size: 11px; }
.support-typing i { width: 5px; height: 5px; border-radius: 50%; background: #aaa; animation: support-dot 1.1s infinite alternate; }
.support-typing i:nth-child(2) { animation-delay: .16s; }
.support-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes support-dot { to { opacity: .3; transform: translateY(-3px); } }
.support-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; border-top: 1px solid #ffffff12; padding: 15px; background: #171717; }
.support-composer textarea { min-height: 52px; max-height: 132px; resize: none; border: 1px solid #ffffff1c; border-radius: 16px; padding: 15px 16px; color: #fff; background: #0d0d0d; font: inherit; line-height: 1.4; }
.support-composer textarea:focus { outline: 2px solid #e509144f; border-color: #e5091496; }
.support-composer .button { min-height: 52px; border-radius: 16px; }
.support-error { align-self: center; color: var(--danger); font-size: 13px; }
.support-history-note { display: flex; align-items: center; gap: 8px; margin: 14px 4px 0; color: var(--muted); font-size: 12px; }
.support-history-note img { width: 16px; filter: invert(1); opacity: .65; }

@media (max-width: 650px) {
  .language-switch summary .language-current { display: none; }
  .language-switch summary b { display: block; }
  .support-layout { width: 100%; padding: 100px 0 0; }
  .support-heading { padding: 0 18px; }
  .support-shell { border-right: 0; border-left: 0; border-radius: 0; }
  .support-messages { min-height: 30vh; max-height: 42vh; padding: 18px; }
  .support-message { max-width: 88%; }
  .support-composer { grid-template-columns: minmax(0, 1fr) auto; }
  .support-history-note { padding: 0 18px 24px; }
  .assistant-entry { width: 100%; justify-content: space-between; }
}

@media (max-width: 1100px) and (min-width: 651px) {
  .topbar nav { gap: 14px; }
  .topbar nav > a:not(.button) { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .support-typing i { animation: none; }
}

/* Device editing stays compact until requested. */
.device-card details{margin-top:8px}.device-card summary{cursor:pointer;color:#ccc;font-size:.85rem}.device-card form[data-device-rename]{display:grid;gap:8px;margin-top:10px}.device-card [data-device-rename] input{width:100%;min-width:0;box-sizing:border-box}.device-card [data-device-rename] button{justify-self:start}.device-card [role=status]{font-size:.85rem;color:#ff8791;margin:0}.device-card small{display:block;margin-top:5px;color:#999}

@media (max-width: 360px) {
  .cabinet-mobile-head .brand span { display: none; }
}

/* Supplied 3D wordmark keeps its native proportions at every breakpoint. */
.brand img.brand-wordmark { width: 160px; height: auto; max-width: 100%; border-radius: 0; object-fit: contain; }
@media (max-width: 600px) { .brand img.brand-wordmark { width: 132px; } }