:root {
  color-scheme: dark;
  --bg: #0b0d0e;
  --bg-raised: #111416;
  --surface: #171b1d;
  --surface-strong: #1d2225;
  --line: #30373b;
  --line-soft: #23292c;
  --text: #f4f5f3;
  --muted: #949da1;
  --accent: #4bd6a1;
  --accent-dark: #0d2b22;
  --signal: #e8b45e;
  --danger: #ff8c83;
  --content: 1180px;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  zoom: 0.9;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--bg);
  background-size: 44px 44px;
  letter-spacing: 0;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
  letter-spacing: 0;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.brand {
  display: inline-flex;
  min-width: 292px;
  align-items: center;
  gap: 15px;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  place-items: center;
  background: transparent;
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  content: "";
}

.brand-mark::before {
  z-index: 0;
  width: 68px;
  height: 68px;
  top: 5px;
  left: 5px;
  background: #020303;
  clip-path: polygon(50% 0%, 61% 34%, 97% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 3% 35%, 39% 34%);
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.96));
  animation: brand-star 3s ease-in-out infinite;
}

.brand-mark::after {
  z-index: 2;
  width: 9px;
  height: 9px;
  right: 0;
  top: 7px;
  background: #ff4d45;
  box-shadow: 0 0 10px rgba(255, 77, 69, 0.86);
  transform: rotate(45deg);
  animation: brand-spark 2.2s 0.5s ease-in-out infinite;
}

.brand-mark span {
  z-index: 1;
  width: 59px;
  height: 59px;
  background: #ffd84f;
  clip-path: polygon(50% 0%, 61% 34%, 97% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 3% 35%, 39% 34%);
  filter: drop-shadow(0 0 7px rgba(255, 216, 79, 0.68)) drop-shadow(0 0 15px rgba(255, 196, 67, 0.3));
  animation: brand-star 3s ease-in-out infinite;
}

.brand-copy {
  display: grid;
  gap: 2px;
}

.brand-copy strong {
  display: inline-block;
  color: #ffba48;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 31px;
  line-height: 1;
  background: linear-gradient(90deg, #ff4a43 0%, #ff7950 42%, #ffd84f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 13px rgba(255, 79, 64, 0.25), 0 0 24px rgba(255, 202, 70, 0.12);
}

.brand-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

@keyframes brand-star {
  0%, 100% { transform: scale(0.96) rotate(-2deg); }
  50% { transform: scale(1.06) rotate(2deg); }
}

@keyframes brand-spark {
  0%, 100% { opacity: 0.28; transform: rotate(45deg) scale(0.72); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.08); }
}

.auth-page {
  display: grid;
  grid-template-rows: auto 1fr;
}

.auth-header {
  display: flex;
  width: min(calc(100% - 48px), var(--content));
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto;
  padding: 16px 0 0;
}

.mirror-switch {
  display: inline-grid;
  grid-template-columns: 28px minmax(0, auto);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  max-width: 285px;
  padding: 6px 12px 6px 7px;
  border: 1px solid #354045;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(75, 214, 161, 0.12), transparent 58%),
    #121719;
  color: #d9e5e1;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 0 0 rgba(75, 214, 161, 0);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mirror-switch:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(75, 214, 161, 0.12);
  transform: translateY(-1px);
}

.mirror-switch:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.mirror-switch-icon {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(75, 214, 161, 0.44);
  border-radius: 50%;
  background: rgba(75, 214, 161, 0.1);
  box-shadow: inset 0 0 12px rgba(75, 214, 161, 0.09);
}

.mirror-switch-icon::before,
.mirror-switch-icon::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 7px;
  border-color: #58e1ae;
  border-style: solid;
}

.mirror-switch-icon::before {
  top: 6px;
  border-width: 2px 2px 0 0;
  border-radius: 0 8px 0 0;
}

.mirror-switch-icon::after {
  bottom: 6px;
  border-width: 0 0 2px 2px;
  border-radius: 0 0 0 8px;
}

.mirror-switch-icon i::before,
.mirror-switch-icon i::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}

.mirror-switch-icon i::before {
  top: 4px;
  right: 6px;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #ffcf4c;
}

.mirror-switch-icon i::after {
  bottom: 4px;
  left: 6px;
  border-width: 4px 6px 4px 0;
  border-color: transparent #ffcf4c transparent transparent;
}

.mirror-switch span:last-child {
  min-width: 0;
  overflow: hidden;
  color: #b9c5c1;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirror-switch b {
  color: #f3fff9;
  font-weight: 900;
}

.mirror-switch.tor-entry-link {
  border-color: #664879;
  background: linear-gradient(135deg, rgba(125, 79, 151, .2), transparent 62%), #15121a;
  box-shadow: 0 0 22px rgba(125, 79, 151, .1);
}

.mirror-switch.tor-entry-link:hover {
  border-color: #a477bd;
  box-shadow: 0 0 24px rgba(125, 79, 151, .23);
}

.mirror-switch.tor-entry-link .mirror-switch-icon {
  border-color: #76508b;
  border-radius: 6px;
  background: #1a1120 url("/assets/tor-browser-icon.png?v=1") center / 24px 24px no-repeat;
}

.mirror-switch.tor-entry-link .mirror-switch-icon::before,
.mirror-switch.tor-entry-link .mirror-switch-icon::after,
.mirror-switch.tor-entry-link .mirror-switch-icon i {
  display: none;
}

.mirror-switch.tor-entry-link b { color: #f0dff7; }

html.clearnet-site .mirror-switch {
  border-color: #664879;
  background: linear-gradient(135deg, rgba(125, 79, 151, .2), transparent 62%), #15121a;
  box-shadow: 0 0 22px rgba(125, 79, 151, .1);
}

html.clearnet-site .mirror-switch .mirror-switch-icon {
  border-color: #76508b;
  border-radius: 6px;
  background: #1a1120 url("/assets/tor-browser-icon.png?v=1") center / 24px 24px no-repeat;
}

html.clearnet-site .mirror-switch .mirror-switch-icon::before,
html.clearnet-site .mirror-switch .mirror-switch-icon::after,
html.clearnet-site .mirror-switch .mirror-switch-icon i { display: none; }

html.clearnet-site .mirror-switch [data-mirror-label] {
  font-size: 0;
}

html.clearnet-site .mirror-switch [data-mirror-label]::after {
  content: attr(data-clearnet-label);
  color: #f0dff7;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

html.clearnet-site .user-panel .mirror-switch-compact [data-mirror-label] {
  font-size: 0;
}

html.clearnet-site .user-panel .mirror-switch-compact [data-mirror-label]::after {
  font-size: 10px;
}

/* Keep the TOR dialog stable while its detailed stylesheet is loading. */
.tor-guide-dialog {
  position: fixed;
  z-index: 200;
  inset: 0;
  width: min(760px, calc(100% - 24px));
  min-height: 220px;
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #45554d;
  border-radius: 7px;
  background: #0c1210;
  color: #eef7f3;
  box-shadow: 0 28px 100px rgba(0, 0, 0, .78);
}

.tor-guide-dialog::backdrop { background: rgba(2, 4, 4, .82); }

.tor-guide-dialog-close {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid #3c4b44;
  border-radius: 5px;
  background: #18201d;
  color: #cbd5d0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tor-guide-dialog-body {
  min-height: 220px;
  max-height: calc(100dvh - 26px);
  overflow: auto;
}

.tor-guide-loading {
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 52px 44px;
  color: #aebbb5;
  font-size: 13px;
  text-align: center;
}

.tor-guide-loading a {
  color: #70dfb6;
  font-weight: 800;
}

.auth-layout {
  display: grid;
  width: min(calc(100% - 48px), var(--content));
  margin: auto;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: clamp(56px, 8vw, 116px);
  align-items: center;
  padding: 0 0 72px;
}

.auth-intro {
  min-width: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 20px;
  height: 1px;
  background: currentColor;
}

.auth-intro h1 {
  max-width: 680px;
  margin: 0;
  color: #f1fff9;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.98;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(75, 214, 161, 0.34), 0 0 28px rgba(75, 214, 161, 0.14);
}

.lead {
  max-width: 620px;
  margin: 24px 0 32px;
  color: #b3babe;
  font-size: 18px;
  line-height: 1.6;
}

.hero-preview {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  align-items: end;
  background:
    linear-gradient(125deg, rgba(75, 214, 161, 0.12), transparent 48%),
    linear-gradient(310deg, rgba(232, 180, 94, 0.09), transparent 44%),
    #0b0d0e;
  box-shadow: 12px 12px 0 #080909;
}

.hero-preview::before {
  display: block;
  width: 0;
  height: 0;
  margin-left: 7px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 29px solid rgba(244, 245, 243, 0.92);
  content: "";
  filter: drop-shadow(0 0 26px rgba(75, 214, 161, 0.28));
}

.hero-preview.has-image::before {
  display: none;
}

.hero-preview.has-image img {
  position: absolute;
  inset: -2% -3% -8%;
  width: 106%;
  height: 110%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.92) contrast(1.05);
}

.privacy-list {
  position: relative;
  z-index: 2;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.privacy-list li {
  display: grid;
  min-width: 0;
  min-height: 72px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #f8fffc;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.45px rgba(4, 7, 8, 0.95);
  text-shadow:
    -1px 0 #050808,
    1px 0 #050808,
    0 -1px #050808,
    0 1px #050808,
    0 2px 9px rgba(0, 0, 0, 0.95);
}

.privacy-list li:hover {
  color: #ffffff;
}

.benefit-icon {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: visible;
  border: 0;
  background: transparent;
  filter:
    drop-shadow(-1px 0 0 #050808)
    drop-shadow(1px 0 0 #050808)
    drop-shadow(0 -1px 0 #050808)
    drop-shadow(0 1px 0 #050808)
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9));
}

.benefit-icon::after {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 5px;
  right: 5px;
  background: var(--signal);
  content: "";
  animation: status-pulse 2.4s ease-in-out infinite;
}

.benefit-icon i,
.benefit-icon i::before,
.benefit-icon i::after {
  position: absolute;
  display: block;
  content: "";
}

.benefit-icon-eye i {
  width: 29px;
  height: 17px;
  border: 2px solid var(--accent);
  border-radius: 55% / 65%;
  animation: eye-breathe 3s ease-in-out infinite;
}

.benefit-icon-eye i::before {
  width: 7px;
  height: 7px;
  top: 3px;
  left: 9px;
  border: 2px solid #d9fff0;
  border-radius: 50%;
}

.benefit-icon-eye i::after {
  width: 36px;
  height: 3px;
  top: 6px;
  left: -5px;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(232, 180, 94, 0.45);
  transform: rotate(42deg);
}

.benefit-icon-gift::before {
  position: absolute;
  width: 20px;
  height: 8px;
  top: 10px;
  left: 14px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  content: "";
  animation: bow-breathe 2.8s ease-in-out infinite;
}

.benefit-icon-gift i {
  width: 23px;
  height: 18px;
  top: 23px;
  border: 2px solid var(--signal);
  background: rgba(232, 180, 94, 0.08);
  animation: gift-float 2.8s ease-in-out infinite;
}

.benefit-icon-gift i::before {
  width: 29px;
  height: 6px;
  top: -7px;
  left: -5px;
  border: 2px solid var(--signal);
  background: #151b1d;
}

.benefit-icon-gift i::after {
  width: 5px;
  height: 26px;
  top: -7px;
  left: 8px;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(75, 214, 161, 0.32);
}

.benefit-icon-tor {
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 6px rgba(167, 104, 205, 0.42));
}

.benefit-icon-tor img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  clip-path: circle(47% at 50% 50%);
  object-fit: cover;
  animation: tor-float 3.4s ease-in-out infinite;
}

.privacy-list li:last-child {
  font-weight: 780;
  -webkit-text-stroke: 0.25px rgba(4, 7, 8, 0.88);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 7px rgba(0, 0, 0, 0.92);
}

@keyframes status-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes eye-breathe {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(75, 214, 161, 0.2)); }
  50% { filter: drop-shadow(0 0 7px rgba(75, 214, 161, 0.65)); }
}

@keyframes gift-float {
  0%, 100% { transform: translateY(1px); }
  50% { transform: translateY(-3px); }
}

@keyframes bow-breathe {
  0%, 100% { transform: scaleX(0.94); opacity: 0.78; }
  50% { transform: scaleX(1.05); opacity: 1; }
}

@keyframes tor-float {
  0%, 100% { transform: translateY(1px); }
  50% { transform: translateY(-3px); }
}

.auth-panel {
  position: relative;
  padding: 34px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  background: rgba(23, 27, 29, 0.96);
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.24);
}

.lang-switch {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  gap: 6px;
}

.lang-switch a {
  display: inline-flex;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid #344047;
  border-radius: 4px;
  background: #101416;
  color: #b8c2c6;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
}

.site-flag {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 14px;
  flex: 0 0 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.48);
}

.site-flag-ru {
  background: linear-gradient(
    to bottom,
    #fff 0 33.333%,
    #1554c5 33.333% 66.666%,
    #d52b1e 66.666% 100%
  );
}

.site-flag-us {
  background: repeating-linear-gradient(
    to bottom,
    #b22234 0 7.692%,
    #fff 7.692% 15.384%
  );
}

.site-flag-us::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 54%;
  background-color: #3c3b6e;
  background-image: radial-gradient(circle, #fff 0 0.55px, transparent 0.7px);
  background-position: 0.4px 0.25px;
  background-size: 2.8px 2.15px;
  content: "";
}

.lang-switch a:hover,
.lang-switch a.active {
  border-color: var(--accent);
  color: #eafff7;
  box-shadow: 0 0 14px rgba(75, 214, 161, 0.14);
}

.panel-kicker {
  margin: 0 0 13px;
  color: var(--signal);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.auth-panel h2 {
  margin: 0;
  color: #f1fff9;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 32px;
  line-height: 1.1;
  text-shadow: 0 0 7px rgba(75, 214, 161, 0.4), 0 0 22px rgba(75, 214, 161, 0.16);
}

.panel-copy {
  margin: 12px 0 26px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.form-error {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--danger);
  background: rgba(255, 140, 131, 0.09);
  color: #ffd0cc;
  font-size: 13px;
  line-height: 1.45;
}

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

.puzzle-captcha {
  position: relative;
}

.captcha-check {
  display: grid;
  width: 100%;
  min-height: 46px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  border: 1px solid #384348;
  border-radius: 4px;
  background: #101416;
  color: #dce6e2;
  cursor: pointer;
  text-align: left;
}

.captcha-check:hover {
  border-color: #59666b;
  background: #141a1c;
}

.captcha-check b {
  font-size: 12px;
  font-weight: 650;
}

.captcha-checkbox {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #59666b;
  border-radius: 3px;
  background: #0b0e0f;
}

.puzzle-captcha.solved .captcha-check {
  border-color: rgba(75, 214, 161, 0.5);
  color: #dffff3;
}

.puzzle-captcha.solved .captcha-checkbox {
  border-color: var(--accent);
  background: var(--accent);
}

.puzzle-captcha.solved .captcha-checkbox::before {
  content: "✓";
  color: #07120e;
  font-size: 14px;
  font-weight: 900;
}

.puzzle-dialog {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 4, 4, 0.84);
  backdrop-filter: blur(7px);
}

.puzzle-dialog[hidden] {
  display: none;
}

.puzzle-card {
  width: min(100%, 390px);
  padding: 14px;
  border: 1px solid #3b474c;
  border-radius: 6px;
  background: #121719;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.48);
}

.puzzle-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.puzzle-card-head > div {
  display: grid;
  gap: 3px;
}

.puzzle-card-head b {
  color: #f2f8f5;
  font-size: 14px;
}

.puzzle-card-head span,
.puzzle-status {
  color: #859197;
  font-size: 10px;
  line-height: 1.35;
}

.puzzle-card-head > button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: #20272a;
  color: #aab5b9;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.puzzle-card-head > button:hover {
  background: #2a3337;
  color: #fff;
}

.puzzle-scene {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 1px solid #303a3f;
  border-radius: 4px;
  background-color: #1a2225;
}

.puzzle-scene-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.puzzle-scene::after {
  position: absolute;
  content: "";
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.puzzle-gap,
.puzzle-piece {
  position: absolute;
  z-index: 2;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 5px 12px 5px 5px;
}

.puzzle-gap {
  border: 2px dashed rgba(255, 255, 255, 0.86);
  background: rgba(3, 5, 5, 0.7);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.puzzle-piece {
  left: 0;
  border: 2px solid #ffd054;
  background-color: rgba(75, 214, 161, 0.88);
  box-shadow: 0 4px 13px rgba(0, 0, 0, 0.42);
}

.puzzle-target-22 { left: calc(22% - 8.8px); }
.puzzle-target-29 { left: calc(29% - 11.6px); }
.puzzle-target-36 { left: calc(36% - 14.4px); }
.puzzle-target-43 { left: calc(43% - 17.2px); }
.puzzle-target-50 { left: calc(50% - 20px); }
.puzzle-target-57 { left: calc(57% - 22.8px); }
.puzzle-target-64 { left: calc(64% - 25.6px); }
.puzzle-target-71 { left: calc(71% - 28.4px); }
.puzzle-target-78 { left: calc(78% - 31.2px); }

.puzzle-slider {
  width: 100%;
  height: 28px;
  margin: 12px 0 0;
  appearance: none;
  background: transparent;
  cursor: grab;
}

.puzzle-slider:active {
  cursor: grabbing;
}

.puzzle-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #303a3f;
}

.puzzle-slider::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -11px;
  appearance: none;
  border: 1px solid #5d6b70;
  border-radius: 50%;
  background: #20292c;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
}

.puzzle-slider::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: #303a3f;
}

.puzzle-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 1px solid #5d6b70;
  border-radius: 50%;
  background: #20292c;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
}

.puzzle-slider:disabled {
  cursor: wait;
  opacity: 0.55;
}

.puzzle-status {
  min-height: 14px;
  margin: 4px 0 0;
  text-align: center;
}

.puzzle-status[data-state="checking"] {
  color: #e6c05a;
}

.puzzle-status[data-state="error"] {
  color: #ff7b75;
}

.puzzle-status[data-state="success"] {
  color: var(--accent);
}

.auth-panel h2 + .auth-form {
  margin-top: 26px;
}

.auth-panel h2 + .form-error {
  margin-top: 22px;
}

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

.field > span {
  color: #e8f8f1;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 0 7px rgba(75, 214, 161, 0.22);
}

.field input,
.search-control input {
  width: 100%;
  min-width: 0;
  border: 1px solid #3a4347;
  border-radius: 3px;
  color: var(--text);
  background: #0e1112;
}

.field input {
  height: 48px;
  padding: 0 13px;
}

.field input:hover,
.search-control:hover {
  border-color: #59666b;
}

.field input:focus,
.search-control:focus-within {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(75, 214, 161, 0.1);
}

.field small {
  color: #747e83;
  font-size: 11px;
  line-height: 1.4;
}

.primary-button {
  display: flex;
  width: 100%;
  height: 50px;
  margin-top: 4px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  color: #06130f;
  cursor: pointer;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(75, 214, 161, 0.2);
}

.primary-button:hover {
  background: #72e6ba;
}

.primary-button:disabled {
  background: #293236;
  color: #738085;
  cursor: not-allowed;
  box-shadow: none;
}

.primary-button span {
  font-size: 19px;
}

.auth-switch {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.auth-switch a,
.text-link {
  color: var(--text);
  font-weight: 700;
  text-underline-offset: 4px;
}

.auth-switch a:hover,
.text-link:hover {
  color: var(--accent);
}

.auth-switch-register {
  color: #edf3f0;
  text-shadow: 0 0 7px rgba(75, 214, 161, 0.24);
}

.auth-switch-register a {
  color: #ff625d;
  text-shadow: 0 0 7px rgba(255, 70, 64, 0.48), 0 0 16px rgba(255, 70, 64, 0.18);
}

.auth-switch-register a:hover {
  color: #ff918d;
  text-shadow: 0 0 9px rgba(255, 92, 86, 0.72), 0 0 20px rgba(255, 70, 64, 0.28);
}

.auth-footer,
.site-footer {
  display: flex;
  width: min(calc(100% - 48px), var(--content));
  justify-content: space-between;
  margin: 0 auto;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
  color: #5e686c;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(11, 13, 14, 0.94);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  width: min(calc(100% - 48px), var(--content));
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
}

@media (min-width: 901px) {
  .catalog-page .header-inner {
    width: auto;
    max-width: none;
    margin: 0 304px 0 24px;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .catalog-page .header-inner {
    width: auto;
    max-width: none;
    margin: 0 248px 0 18px;
  }
}

.notification-bonus-cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-left: auto;
  padding: 0 15px;
  border: 1px solid rgba(255, 195, 55, 0.62);
  border-radius: 6px;
  background: rgba(45, 34, 16, 0.78);
  color: #ffd052;
  box-shadow: inset 0 0 20px rgba(255, 181, 36, 0.035), 0 0 18px rgba(255, 181, 36, 0.055);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.notification-bonus-cta:hover {
  border-color: #ffd052;
  color: #fff0a3;
}

.notification-bonus-cta svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.notification-bonus-cta[hidden] {
  display: none;
}

.notification-bonus-panel {
  display: none;
}

.tor-reward-cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-left: auto;
  padding: 0 14px 0 10px;
  border: 1px solid rgba(147, 105, 166, 0.78);
  border-radius: 6px;
  background: linear-gradient(105deg, rgba(31, 20, 37, 0.94), rgba(19, 24, 25, 0.96));
  color: #f2dfef;
  box-shadow: inset 0 0 22px rgba(161, 94, 179, 0.08), 0 0 20px rgba(121, 58, 150, 0.09);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.tor-reward-cta:hover {
  border-color: #c886e1;
  color: #fff;
  box-shadow: inset 0 0 24px rgba(161, 94, 179, 0.15), 0 0 24px rgba(142, 70, 171, 0.16);
}

.tor-reward-cta img {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  object-fit: contain;
}

.tor-reward-panel {
  display: none;
  width: calc(100% - 28px);
  margin: 2px 14px 6px;
  font-size: 12px;
}

.account-menu {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-menu form {
  margin: 0;
}

.account-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #c7cdca;
  font-size: 13px;
}

.account-name i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(75, 214, 161, 0.1);
}

.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: #c9cecc;
  cursor: pointer;
  font-size: 18px;
}

.icon-button:hover {
  border-color: #59666b;
  color: var(--accent);
}

.mobile-panel-toggle,
.user-panel-mobile-head,
.user-panel-backdrop {
  display: none;
}

.catalog-shell {
  width: 100%;
  min-height: calc(100vh - 72px);
  margin: 0;
  padding: 0;
}

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

.catalog-main {
  min-width: 0;
  padding: 26px clamp(18px, 2.3vw, 38px) 72px;
}

.category-select {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-bottom: 18px;
}

.category-control-row {
  display: grid;
  grid-template-columns: minmax(210px, 310px) 42px minmax(16px, 1fr) minmax(164px, 210px);
  gap: 5px;
  align-items: stretch;
  padding: 5px;
  border: 1px solid #283238;
  border-radius: 7px;
  background: rgba(10, 15, 17, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.category-filter-label {
  display: block;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  color: #8e9a9f;
  font-family: Consolas, "Courier New", monospace;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.category-select-button {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) 22px;
  grid-template-rows: 12px 18px;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 7px 10px 7px 12px;
  border: 1px solid #344047;
  border-radius: 5px;
  background: #141b1e;
  color: #f1fff9;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.spoiler-toggle {
  display: grid;
  width: 42px;
  min-height: 48px;
  place-items: center;
  border: 1px solid #344047;
  border-radius: 5px;
  background: #141b1e;
  color: #9ba8a4;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.spoiler-toggle:hover {
  border-color: rgba(75, 214, 161, 0.62);
  color: #dffbf0;
}

.spoiler-toggle[aria-pressed="true"] {
  border-color: rgba(75, 214, 161, 0.7);
  background: rgba(75, 214, 161, 0.12);
  color: var(--accent);
}

.recent-videos-open {
  position: relative;
  grid-column: 4;
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #3a474d;
  border-radius: 5px;
  background: #141b1e;
  color: #e4ece9;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.recent-videos-open:hover {
  border-color: rgba(75, 214, 161, 0.68);
  background: #18231f;
  color: #ffffff;
}

.recent-videos-open b {
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-videos-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid rgba(239, 187, 75, 0.38);
  border-radius: 50%;
  background: rgba(239, 187, 75, 0.08);
  color: #f3c85f;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1;
}

.recent-unread-badge {
  position: absolute;
  top: -8px;
  right: -7px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #0b1012;
  border-radius: 999px;
  background: #e33c48;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 94, 106, 0.25), 0 4px 12px rgba(227, 60, 72, 0.38);
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.recent-unread-badge[hidden] {
  display: none;
}

.catalog-notify-button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid #344047;
  border-radius: 5px;
  background: #141b1e;
  color: #d8e2df;
  cursor: pointer;
}

.catalog-notify-button:hover {
  border-color: rgba(75, 214, 161, 0.72);
  background: #182420;
  color: #f0fff9;
}

.catalog-notify-button span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(239, 187, 75, 0.34);
  border-radius: 50%;
  background: rgba(239, 187, 75, 0.08);
  font-size: 13px;
}

.catalog-notify-button b {
  overflow: hidden;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: normal;
}

.spoiler-eye {
  position: relative;
  display: block;
  width: 19px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 50% / 62%;
}

.spoiler-eye::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.spoiler-eye::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  display: none;
  width: 24px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 0 2px #14201c;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.spoiler-toggle[aria-pressed="true"] .spoiler-eye::after {
  display: block;
}

.category-select-button b {
  display: block;
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  color: #dfe7e4;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-select-button i {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.category-select-button i::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid #96a2a6;
  border-bottom: 1px solid #96a2a6;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

.category-select.open .category-select-button {
  border-color: #59666b;
  background: #151c1f;
}

.category-select.open .category-select-button i::before {
  transform: translateY(2px) rotate(225deg);
}

.category-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  width: 310px;
  max-width: calc(100vw - 40px);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #303a3f;
  border-radius: 5px;
  background: #111719;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.category-select.open .category-menu {
  display: grid;
  gap: 2px;
}

.category-menu a {
  display: flex;
  min-height: 34px;
  align-items: center;
  padding: 0 9px;
  border: 0;
  border-radius: 3px;
  color: #bfc9c6;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}

.category-menu a:hover,
.category-menu a.active {
  background: #222b2f;
  color: #fff;
}

.catalog-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 410px);
  gap: 48px;
  align-items: end;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.catalog-heading h1 {
  margin: 0;
  color: #f1fff9;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 48px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(75, 214, 161, 0.38), 0 0 24px rgba(75, 214, 161, 0.14);
}

.catalog-heading > div > p:last-child {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.search-form {
  display: grid;
  gap: 9px;
}

.search-form > label {
  color: #9fa7aa;
  font-size: 12px;
  font-weight: 700;
}

.search-control {
  display: grid;
  height: 46px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid #3a4347;
  border-radius: 3px;
  background: #0e1112;
}

.search-control > span {
  text-align: center;
  color: var(--muted);
  font-size: 20px;
}

.search-control input {
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
}

.search-control input:focus {
  box-shadow: none;
}

.search-control button {
  height: 32px;
  margin-right: 6px;
  padding: 0 13px;
  border: 0;
  border-radius: 2px;
  background: #252c2f;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.search-control button:hover {
  background: var(--accent);
  color: #07120e;
}

.catalog-meta {
  display: flex;
  justify-content: space-between;
  padding: 24px 0 14px;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
}

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

.video-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--bg-raised);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.18);
}

.video-poster {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(75, 214, 161, 0.15), transparent 44%),
    linear-gradient(315deg, rgba(232, 180, 94, 0.13), transparent 42%),
    #0a0c0d;
}

.video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-spoiler {
  display: none;
}

.catalog-spoilers-on .video-spoiler {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(226, 238, 234, 0.72) 0 1px, transparent 1.6px) 0 0 / 9px 9px,
    radial-gradient(circle, rgba(105, 126, 120, 0.7) 0 1px, transparent 1.8px) 4px 5px / 11px 11px,
    rgba(20, 26, 25, 0.64);
  backdrop-filter: blur(18px) saturate(0.55);
  pointer-events: none;
}

.catalog-spoilers-on .video-spoiler::after {
  display: none;
}

.video-frame-reel {
  --frame-step: 6.666%;
  position: absolute;
  inset: 0;
  display: block;
}

.video-frame-reel img {
  opacity: 1;
  transition: opacity 130ms ease;
}

.video-frame-reel img.is-changing {
  opacity: 0.38;
}

.video-poster::after {
  position: absolute;
  content: "";
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.46), transparent 36%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent 42%);
  pointer-events: none;
}

.poster-noise {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 18px 18px;
}

.play-mark {
  position: relative;
  z-index: 3;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(244, 245, 243, 0.24);
  border-radius: 50%;
  background: rgba(5, 8, 8, 0.72);
  color: var(--text);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 0 22px rgba(75, 214, 161, 0.2);
}

.play-mark:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.04);
}

.duration,
.rating-badge,
.file-size-badge,
.price-badge {
  position: absolute;
  z-index: 3;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(4, 5, 5, 0.82);
  color: #e9eeeb;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 900;
}

.duration {
  left: 9px;
  bottom: 10px;
}

.poster-right-meta {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.poster-right-meta .rating-badge,
.poster-right-meta .file-size-badge {
  position: static;
}

.price-badge {
  top: 9px;
  left: 9px;
  color: #ffd84f;
  text-shadow: 0 0 10px rgba(255, 216, 79, 0.32);
}

.top-size-badge {
  top: 9px;
  right: 9px;
  color: #dff8ef;
  border-color: rgba(75, 214, 161, 0.3);
  background: rgba(7, 14, 12, 0.88);
  box-shadow: 0 0 14px rgba(75, 214, 161, 0.1);
}

.video-card-copy {
  padding: 10px 11px 12px;
}

.video-card h2 {
  overflow-wrap: anywhere;
  margin: 0;
  color: #effff8;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.35;
  text-shadow: 0 0 7px rgba(75, 214, 161, 0.24);
}

.user-panel {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
  width: 280px;
  height: calc(100vh / 0.9);
  height: calc(100dvh / 0.9);
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid #293238;
  border-radius: 0;
  background: #0e1315;
  box-shadow: none;
}

.user-panel-top,
.user-panel-bottom {
  display: grid;
  gap: 0;
}

.user-panel-top {
  align-self: start;
  grid-auto-rows: max-content;
}

.user-panel-bottom {
  align-self: end;
  padding: 10px 12px 12px;
  border-top: 1px solid #293238;
  background: #0d1214;
  gap: 6px;
}

.user-identity {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  border-bottom: 1px solid #293238;
}

.user-name-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.username-premium {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(99, 210, 255, 0.38);
  border-radius: 3px;
  background: rgba(70, 169, 207, 0.1);
  color: #8cddff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 7px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 0 8px rgba(104, 213, 255, 0.32);
}

.user-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #3a454a;
  border-radius: 50%;
  background: #1a2124;
  font-size: 21px;
  line-height: 1;
}

.user-panel strong {
  overflow: hidden;
  color: #f4fff9;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-copy {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #7f8c91;
  cursor: pointer;
}

.user-copy::before,
.user-copy::after {
  position: absolute;
  top: 5px;
  left: 5px;
  content: "";
  width: 6px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 1px;
}

.user-copy::before {
  transform: translate(3px, -2px);
}

.user-copy::after {
  background: #0e1315;
  transform: translate(0, 2px);
}

.user-copy:hover {
  background: #1c2427;
  color: #fff;
}

.user-copy.copied {
  border-color: var(--accent);
  color: var(--accent);
}

.user-copy.copied::before {
  top: 2px;
  left: 3px;
  content: "✓";
  width: 14px;
  height: 14px;
  border: 0;
  font-size: 13px;
  font-weight: 900;
  transform: none;
}

.user-copy.copied::after {
  display: none;
}

.user-logout {
  margin: 0;
}

.user-logout button {
  min-width: 48px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255, 83, 76, 0.42);
  border-radius: 4px;
  background: rgba(255, 83, 76, 0.1);
  color: #ff6b65;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.user-logout button:hover {
  border-color: #ff625b;
  background: #d9423c;
  color: #fff;
}

.balance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 12px;
  border-bottom: 1px solid #293238;
  background: transparent;
}

.balance-row span {
  color: #b8c2c6;
  font-size: 11px;
  font-weight: 700;
}

.balance-row b {
  color: #ffd84f;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  text-shadow: 0 0 10px rgba(255, 216, 79, 0.22);
}

.balance-row button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: #20282c;
  color: #f2f7f4;
  cursor: pointer;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.purchases-link,
.referral-link {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
  align-items: center;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #f2fff9;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.purchases-link i,
.referral-link i {
  color: #7f8c92;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  line-height: 1;
}

.purchases-link:hover,
.referral-link:hover {
  background: #171e21;
  color: #fff;
}

.referral-link {
  border-top: 1px solid #293238;
}

.referral-link small {
  color: #e9bf58;
  font-size: 10px;
  font-weight: 750;
}

.premium-panel-link {
  display: grid;
  width: 100%;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-top: 1px solid #293238;
  background: transparent;
  color: #bdeaff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.premium-panel-link i {
  color: #78afc5;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
}

.premium-panel-link:hover {
  background: rgba(80, 185, 226, 0.08);
  color: #e5f8ff;
}

.premium-panel-link.active {
  color: #75d7ff;
  cursor: default;
}

.notification-panel-link,
.support-panel-link {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 34px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 6px;
  padding: 0 9px;
  border: 1px solid #2b353a;
  border-radius: 4px;
  background: #141a1c;
  color: #e6f3ef;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  text-align: left;
}

.panel-action-tail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.panel-action-arrow {
  display: grid;
  width: 14px;
  height: 20px;
  place-items: center;
  color: currentColor;
  font: 400 17px/1 Arial, sans-serif;
  font-style: normal;
}

.support-unread-badge {
  position: absolute;
  display: grid;
  min-width: 18px;
  height: 18px;
  top: -9px;
  right: 14px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #0d1214;
  border-radius: 999px;
  background: #f0444d;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 91, 98, 0.45), 0 3px 10px rgba(240, 68, 77, 0.45);
  font: 900 9px/1 Arial, sans-serif;
  text-align: center;
}

.support-unread-badge[hidden] {
  display: none;
}

.notification-panel-link {
  margin-bottom: 0;
  border-color: rgba(75, 214, 161, 0.28);
  background: rgba(75, 214, 161, 0.06);
  color: #e9f8f2;
}

.notification-panel-link > .panel-action-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.notification-panel-link > .panel-action-label > i {
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  place-items: center;
  border: 1px solid rgba(239, 187, 75, 0.38);
  border-radius: 50%;
  background: rgba(239, 187, 75, 0.08);
  font-size: 9px;
  font-style: normal;
}

.notification-panel-link .panel-action-arrow {
  color: #75d9b9;
}

.notification-panel-link:hover {
  border-color: rgba(75, 214, 161, 0.58);
  background: rgba(75, 214, 161, 0.11);
}

.support-panel-link {
  border-color: rgba(255, 83, 94, 0.62);
  background: rgba(123, 24, 31, 0.34);
  color: #ffd8db;
}

.support-panel-link .panel-action-arrow {
  color: #ff737c;
}

.support-panel-link:hover {
  border-color: rgba(255, 99, 109, 0.9);
  background: rgba(148, 27, 36, 0.48);
}

.telegram-shop-link {
  display: none;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid #31515f;
  border-radius: 4px;
  background: #111a1e;
  color: #ecf9ff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 850;
}

html.clearnet-site .telegram-shop-link {
  display: flex;
}

.telegram-shop-link:hover {
  border-color: #42a9d2;
  background: #14242b;
  color: #fff;
}

.telegram-shop-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: #229ed9;
  color: #fff;
  box-shadow: 0 0 12px rgba(34, 158, 217, 0.22);
}

.telegram-shop-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.access-reminder-modal {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 5, 6, 0.84);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.access-reminder-modal[hidden] {
  display: none;
}

.access-reminder-modal.is-visible {
  opacity: 1;
}

.access-reminder-card {
  position: relative;
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid #4a594f;
  border-top: 3px solid #efbb4b;
  border-radius: 6px;
  background: #101718;
  color: #dfe9e5;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.54), 0 0 28px rgba(239, 187, 75, 0.08);
  transform: translateY(10px) scale(0.98);
  transition: transform 180ms ease;
}

.access-reminder-modal.is-visible .access-reminder-card {
  transform: translateY(0) scale(1);
}

.access-reminder-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #394448;
  border-radius: 4px;
  background: #1b2326;
  color: #c7d1d3;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.access-reminder-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding-right: 34px;
}

.access-reminder-icon {
  width: 62px;
  aspect-ratio: 1;
  border: 1px solid #754f88;
  border-radius: 6px;
  background: #18101d url("/assets/tor-browser-icon.png?v=1") center / 48px 48px no-repeat;
}

.access-reminder-head small {
  color: #efbb4b;
  font: 850 10px/1.2 Consolas, "Courier New", monospace;
}

.access-reminder-head h2 {
  margin: 7px 0 0;
  color: #ff5c62;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 24px;
  line-height: 1.15;
  text-shadow: 0 0 14px rgba(255, 68, 76, 0.24);
}

.access-reminder-warning {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 20px 0 14px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 92, 98, 0.34);
  border-radius: 5px;
  background: rgba(83, 22, 27, 0.15);
  color: #f2e6e6;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  animation: access-reminder-pulse 3.8s ease-in-out infinite;
}

.access-reminder-warning > span {
  color: #f6bf4f;
  font-size: 20px;
  line-height: 1.2;
}

@keyframes access-reminder-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.58; }
}

.access-reminder-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 1px solid #9369a6;
  border-radius: 5px;
  background: #6e3885;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.access-reminder-action:hover {
  background: #864aa0;
}

.access-reminder-action-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(207, 153, 232, 0.56);
  border-radius: 4px;
  background: #18101d url("/assets/tor-browser-icon.png?v=1") center / 23px 23px no-repeat;
}

.tor-reward-modal {
  position: fixed;
  z-index: 192;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 4, 5, 0.86);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.tor-reward-modal[hidden] {
  display: none;
}

.tor-reward-modal.is-visible {
  opacity: 1;
}

.tor-reward-card {
  position: relative;
  width: min(500px, 100%);
  padding: 25px;
  border: 1px solid #4a4153;
  border-top: 3px solid #8a4ba2;
  border-radius: 7px;
  background: linear-gradient(145deg, #111719 0%, #111315 60%, #1b1020 100%);
  color: #e7eeee;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 34px rgba(126, 63, 151, 0.15);
  transform: translateY(12px) scale(0.985);
  transition: transform 180ms ease;
}

.tor-reward-modal.is-visible .tor-reward-card {
  transform: translateY(0) scale(1);
}

.tor-reward-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #394448;
  border-radius: 4px;
  background: #1b2326;
  color: #c7d1d3;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.tor-reward-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-height: 62px;
  padding-right: 36px;
}

.tor-reward-head > img {
  width: 62px;
  height: 62px;
  border: 1px solid #86509c;
  border-radius: 7px;
  background: #18101d;
  object-fit: contain;
}

.tor-reward-head small {
  color: #f1bd4d;
  font: 850 10px/1.2 Consolas, "Courier New", monospace;
  letter-spacing: .05em;
}

.tor-reward-head h2 {
  margin: 7px 0 0;
  color: #eff9f5;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 25px;
  line-height: 1.13;
  text-shadow: 0 0 15px rgba(111, 224, 181, 0.16);
}

.tor-reward-description {
  margin: 22px 0 12px;
  color: #c6d1ce;
  font: 650 15px/1.5 "Trebuchet MS", "Segoe UI", sans-serif;
}

.tor-reward-amount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  margin: 0 0 18px;
  padding: 14px 15px;
  border: 1px solid rgba(83, 220, 166, 0.45);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(29, 116, 84, 0.2), rgba(19, 28, 27, 0.48));
}

.tor-reward-amount span {
  color: #b8cbc4;
  font-size: 12px;
  font-weight: 800;
}

.tor-reward-amount strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #62e6b5;
  font: 900 23px/1 "Trebuchet MS", "Segoe UI", sans-serif;
  text-shadow: 0 0 17px rgba(73, 225, 167, 0.26);
}

.tor-reward-amount i {
  color: #f7bf3d;
  font-style: normal;
}

.tor-reward-amount small {
  color: #879a94;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.tor-reward-warning {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(244, 190, 74, 0.34);
  border-radius: 5px;
  background: rgba(100, 70, 19, 0.14);
}

.tor-reward-warning > span {
  color: #f4be4a;
  font-size: 20px;
}

.tor-reward-warning p {
  margin: 0;
  color: #ece1c3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.tor-reward-guide {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #a267b8;
  border-radius: 5px;
  background: #713b86;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.tor-reward-guide:hover {
  background: #87499f;
}

.tor-reward-guide img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.tor-reward-success-card {
  border-top-color: #4bd3a2;
  text-align: center;
}

.tor-reward-success-card .tor-reward-head {
  text-align: left;
}

.tor-reward-success-mark {
  display: grid;
  width: 78px;
  height: 78px;
  margin: 25px auto 17px;
  place-items: center;
  border: 1px solid #58dfb1;
  border-radius: 50%;
  background: rgba(43, 145, 106, 0.1);
  color: #59e3b3;
  box-shadow: 0 0 28px rgba(56, 221, 165, 0.2);
  font-size: 47px;
  font-weight: 400;
}

.tor-reward-success-copy {
  margin: 0 0 22px;
  color: #ecf6f2;
  font: 850 20px/1.36 "Trebuchet MS", "Segoe UI", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .access-reminder-warning {
    animation: none;
  }
}

@media (max-width: 560px) {
  .access-reminder-card {
    padding: 19px 16px 16px;
  }

  .access-reminder-head {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
  }

  .access-reminder-icon {
    width: 48px;
    background-size: 37px 37px;
  }

  .access-reminder-head h2 {
    font-size: 19px;
  }

  .tor-reward-card {
    padding: 19px 16px 16px;
  }

  .tor-reward-head {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    min-height: 48px;
  }

  .tor-reward-head > img {
    width: 48px;
    height: 48px;
  }

  .tor-reward-head h2 {
    font-size: 20px;
  }

  .tor-reward-description {
    margin-top: 18px;
    font-size: 14px;
  }
}

.mirror-switch-compact {
  width: 100%;
  max-width: none;
  min-height: 32px;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  padding: 4px 8px;
  border-color: #2b353a;
  background: #141a1c;
}

html.clearnet-site .user-panel .mirror-switch-compact {
  min-height: 38px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 4px 10px;
}

html.clearnet-site .user-panel .mirror-switch-compact .mirror-switch-icon {
  width: 28px;
  height: 28px;
  background-size: 24px 24px;
}

.mirror-switch-compact .mirror-switch-icon {
  width: 18px;
  height: 18px;
}

.mirror-switch-compact .mirror-switch-icon::before,
.mirror-switch-compact .mirror-switch-icon::after {
  width: 8px;
  height: 5px;
}

.mirror-switch-compact .mirror-switch-icon::before {
  top: 3px;
}

.mirror-switch-compact .mirror-switch-icon::after {
  bottom: 3px;
}

.mirror-switch-compact .mirror-switch-icon i::before {
  top: 2px;
  right: 3px;
  border-width: 3px 0 3px 4px;
}

.mirror-switch-compact .mirror-switch-icon i::after {
  bottom: 2px;
  left: 3px;
  border-width: 3px 4px 3px 0;
}

.user-panel .mirror-switch-compact span:last-child {
  font-size: 10px;
}

.panel-lang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  border: 1px solid #2b353a;
  border-radius: 5px;
  background: #111719;
}

.panel-lang a {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #aebbc0;
  text-decoration: none;
  font-family: Consolas, "Courier New", monospace;
  font-size: 17px;
  font-weight: 800;
}

.panel-lang a.active,
.panel-lang a:hover {
  color: #f4fff9;
  background: #263035;
}

.notification-modal {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 5, 6, 0.84);
  backdrop-filter: blur(7px);
}

.notification-modal[hidden] {
  display: none;
}

.notification-card {
  width: min(470px, 100%);
  overflow: hidden;
  border: 1px solid #344249;
  border-top-color: #4bd6a1;
  border-radius: 7px;
  background: #111719;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58), 0 0 28px rgba(75, 214, 161, 0.08);
}

.notification-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #293338;
}

.notification-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.notification-title > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
}

.notification-title > .notification-telegram-mark {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(72, 183, 239, 0.72);
  border-radius: 50%;
  background: #229ed9;
  box-shadow: 0 0 0 4px rgba(34, 158, 217, 0.09), 0 8px 24px rgba(34, 158, 217, 0.24);
}

.notification-telegram-mark::after {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.notification-telegram-mark svg {
  width: 25px;
  height: 25px;
  fill: #fff;
  filter: drop-shadow(0 2px 2px rgba(0, 73, 112, 0.26));
}

.notification-title h2 {
  margin: 0;
  color: #eefaf5;
  font-size: 17px;
  line-height: 1.15;
}

.notification-title p {
  margin: 4px 0 0;
  color: #7f8c91;
  font: 9px Consolas, "Courier New", monospace;
  text-transform: uppercase;
}

.notification-card > header > button {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid #3b464c;
  border-radius: 6px;
  background: #20282c;
  color: #c2ccd0;
  cursor: pointer;
  font-size: 21px;
}

.notification-copy {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.notification-pairing-flow {
  display: grid;
  gap: 7px;
}

.notification-pairing-flow[hidden],
.notification-linked[hidden],
.notification-card > footer [hidden] {
  display: none;
}

.notification-linked {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 66px;
  padding: 11px 13px;
  border: 1px solid rgba(75, 214, 161, 0.48);
  border-radius: 6px;
  background: rgba(24, 79, 59, 0.22);
  box-shadow: inset 0 0 24px rgba(75, 214, 161, 0.04);
}

.notification-linked > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #48ce9c;
  border-radius: 50%;
  background: rgba(75, 214, 161, 0.13);
  color: #6ee1b6;
  font-size: 22px;
  font-weight: 900;
}

.notification-linked strong {
  color: #75e4bb;
  font-size: 14px;
}

.notification-linked p {
  margin: 5px 0 0;
  color: #b6c4c0;
  font-size: 11px;
  line-height: 1.45;
}

.notification-bot-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(75, 214, 161, 0.32);
  border-radius: 6px;
  background: #0d1415;
}

.notification-bot-name > span {
  color: #758389;
  font: 9px Consolas, "Courier New", monospace;
  text-transform: uppercase;
}

.notification-bot-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.notification-bot-identity strong {
  overflow: hidden;
  color: #6ee1b6;
  font: 700 13px Consolas, "Courier New", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-username-copy {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  padding: 0;
  border: 1px solid #354349;
  border-radius: 5px;
  background: #172023;
  color: #b9c7c9;
  cursor: pointer;
}

.notification-username-copy:hover,
.notification-username-copy.copied {
  border-color: #48ce9c;
  color: #73e4b9;
}

.notification-username-copy.copied svg {
  display: none;
}

.notification-username-copy.copied::before {
  content: "✓";
  font-size: 15px;
  font-weight: 900;
}

.notification-username-copy:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.notification-username-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

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

.notification-delivery-notes > div {
  display: grid;
  min-height: 48px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #2f3b40;
  border-radius: 6px;
  background: #11191b;
}

.notification-delivery-notes > div > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(75, 214, 161, 0.35);
  border-radius: 50%;
  color: #68dbae;
}

.notification-delivery-notes svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.notification-delivery-notes p {
  margin: 0;
  color: #b9c5c2;
  font-size: 10px;
  line-height: 1.4;
}

.notification-pairing-label {
  margin: 1px 0;
  overflow-x: auto;
  color: #aebbb8;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  scrollbar-width: none;
}

.notification-pairing-code {
  min-width: 0;
  overflow-x: auto;
  padding: 14px 13px;
  border: 1px solid rgba(75, 214, 161, 0.42);
  border-radius: 6px;
  background: #0a1112;
  box-shadow: inset 0 0 18px rgba(75, 214, 161, 0.035);
  scrollbar-width: thin;
}

.notification-pairing-code strong {
  display: block;
  width: max-content;
  color: #72e6ba;
  font: 800 13px/1.35 Consolas, "Courier New", monospace;
  white-space: nowrap;
}

.notification-card > footer {
  display: grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, .75fr);
  gap: 9px;
  padding: 0 16px 16px;
}

.notification-open-bot,
.notification-card > footer button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid #3a474d;
  border-radius: 6px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
}

.notification-open-bot {
  border-color: #3fc696;
  background: #4bd6a1;
  color: #07150f;
}

.notification-open-bot-mark {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 50%;
  background: #229ed9;
  box-shadow: 0 4px 12px rgba(34, 158, 217, 0.25);
}

.notification-open-bot-mark svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.notification-card > footer button {
  background: #182024;
  color: #d4dddf;
  cursor: pointer;
}

.notification-card > footer button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.notification-card > footer button.copied {
  border-color: #48ce9c;
  color: #78e5bd;
}

.notification-card > footer .notification-rebind {
  border-color: rgba(235, 183, 70, 0.46);
  color: #f1c765;
}

.notification-rebind > span:first-child {
  font-size: 18px;
  line-height: 1;
}

.notification-open-bot.disabled,
.notification-card > footer button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

@media (max-width: 600px) {
  .category-control-row {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .recent-videos-open {
    grid-column: 1 / -1;
    min-height: 42px;
  }

  .notification-modal {
    padding: 8px;
  }

  .notification-card > footer {
    grid-template-columns: 1fr;
  }

  .notification-bot-name { align-items: center; flex-direction: row; }

  .notification-delivery-notes {
    grid-template-columns: 1fr;
  }
}

.recent-videos-modal {
  position: fixed;
  z-index: 108;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(2, 4, 4, 0.86);
  backdrop-filter: blur(9px);
}

.recent-videos-modal[hidden] {
  display: none;
}

.recent-videos-card {
  display: grid;
  width: min(100%, 720px);
  max-height: min(760px, calc(100dvh - 32px));
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #344249;
  border-radius: 7px;
  background: #101719;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.66);
}

.recent-videos-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #2b363b;
}

.recent-videos-head-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(239, 187, 75, 0.45);
  border-radius: 50%;
  background: rgba(239, 187, 75, 0.09);
  color: #f3c85f;
  font-family: Georgia, serif;
  font-size: 25px;
}

.recent-videos-head h2,
.recent-videos-head p {
  margin: 0;
}

.recent-videos-head h2 {
  color: #f1faf6;
  font-size: 20px;
  line-height: 1.15;
}

.recent-videos-head p {
  margin-top: 4px;
  color: #8e9a9f;
  font-size: 11px;
}

.recent-videos-head > button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #39464c;
  border-radius: 5px;
  background: #1a2327;
  color: #cbd5d2;
  cursor: pointer;
  font-size: 22px;
}

.recent-videos-list {
  display: grid;
  gap: 1px;
  overflow-y: auto;
  padding: 8px;
  background: #273136;
}

.recent-video-item {
  display: grid;
  width: 100%;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 0;
  border-radius: 4px;
  background: #11191b;
  color: #eaf4f0;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, color 150ms ease;
}

.recent-video-item:hover {
  background: #17231f;
  color: #ffffff;
}

.recent-video-poster {
  position: relative;
  overflow: hidden;
  width: 132px;
  aspect-ratio: 16 / 9;
  border: 1px solid #354148;
  border-radius: 3px;
  background: #070a0b;
}

.recent-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-video-poster::after {
  position: absolute;
  content: "▶";
  inset: 50% auto auto 50%;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(4, 7, 8, 0.74);
  color: #ffffff;
  font-size: 11px;
  transform: translate(-50%, -50%);
}

.recent-video-copy {
  min-width: 0;
}

.recent-video-copy strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-video-copy time {
  display: block;
  margin-top: 7px;
  color: #95a29e;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
}

.recent-video-arrow {
  color: #5bdbac;
  font-size: 20px;
}

.recent-videos-message {
  display: grid;
  min-height: 220px;
  place-items: center;
  margin: 0;
  background: #11191b;
  color: #87938f;
  font-size: 13px;
  text-align: center;
}

.recent-videos-message.error {
  color: #ff7880;
}

@media (max-width: 600px) {
  .recent-videos-modal {
    padding: 8px;
  }

  .recent-video-item {
    grid-template-columns: 104px minmax(0, 1fr) 12px;
    gap: 10px;
    padding: 8px;
  }

  .recent-video-poster {
    width: 104px;
  }

  .recent-video-copy strong {
    white-space: normal;
  }
}

.tickets-modal {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(2, 4, 4, 0.86);
  backdrop-filter: blur(9px);
}

.tickets-modal[hidden] {
  display: none;
}

.tickets-card {
  display: grid;
  width: min(100%, 660px);
  max-height: min(760px, calc(100dvh - 32px));
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #344249;
  border-radius: 7px;
  background: #101719;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.66);
}

.tickets-head {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #29343a;
}

.tickets-head > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tickets-head-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid rgba(75, 214, 161, 0.35);
  border-radius: 5px;
  background: #15251f;
  font-size: 20px;
}

.tickets-head h2,
.tickets-head p {
  margin: 0;
}

.tickets-head h2 {
  color: #effaf6;
  font-size: 17px;
}

.tickets-head p {
  margin-top: 3px;
  color: #87959a;
  font-size: 10px;
}

.tickets-head > button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #364248;
  border-radius: 4px;
  background: #20282b;
  color: #bdc8cb;
  cursor: pointer;
  font-size: 19px;
}

.tickets-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #263136;
}

.tickets-toolbar button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #36434a;
  border-radius: 4px;
  background: #171f22;
  color: #dce8e4;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
}

.tickets-toolbar [data-ticket-new] {
  border-color: rgba(75, 214, 161, 0.5);
  background: #173129;
  color: #a8efd5;
}

.tickets-list {
  display: grid;
  gap: 7px;
  min-height: 0;
  max-height: 520px;
  padding: 12px 14px 14px;
  overflow-y: auto;
}

.tickets-list-message {
  display: grid;
  min-height: 220px;
  place-items: center;
  margin: 0;
  color: #7f8d92;
  font-size: 12px;
  text-align: center;
}

.tickets-list[hidden],
.ticket-create-form[hidden],
.ticket-thread[hidden] {
  display: none;
}

.tickets-list-message.error {
  color: #ff8489;
}

.ticket-list-item {
  display: grid;
  width: 100%;
  min-height: 66px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid #2d393e;
  border-radius: 5px;
  background: #11191c;
  color: #e9f2ef;
  cursor: pointer;
  text-align: left;
}

.ticket-list-item:hover {
  border-color: #4b5c63;
  background: #162023;
}

.ticket-list-item > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.ticket-list-item > span:last-child {
  justify-items: end;
}

.ticket-list-item strong,
.ticket-list-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-list-item strong {
  font-size: 11px;
}

.ticket-list-item small,
.ticket-list-item time {
  color: #7f8c91;
  font-size: 9px;
}

.ticket-status {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(232, 184, 72, 0.36);
  border-radius: 999px;
  background: rgba(232, 184, 72, 0.1);
  color: #efc45f;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.ticket-status.answered {
  border-color: rgba(75, 214, 161, 0.38);
  background: rgba(75, 214, 161, 0.1);
  color: #75e5bb;
}

.ticket-status.closed {
  border-color: rgba(126, 139, 148, 0.38);
  background: rgba(126, 139, 148, 0.1);
  color: #aeb8be;
}

.ticket-create-form {
  display: grid;
  min-height: 0;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
}

.tickets-toolbar button[hidden] {
  display: none;
}

.ticket-create-form label {
  display: grid;
  gap: 6px;
}

.ticket-create-form label > span {
  color: #a8b4b8;
  font-size: 10px;
  font-weight: 800;
}

.ticket-create-form input,
.ticket-create-form textarea,
.ticket-reply-form textarea {
  width: 100%;
  border: 1px solid #354248;
  border-radius: 4px;
  outline: 0;
  background: #0d1315;
  color: #eef6f3;
  font: 11px/1.45 "Segoe UI", sans-serif;
}

.ticket-create-form input {
  height: 40px;
  padding: 0 11px;
}

.ticket-create-form textarea {
  min-height: 150px;
  padding: 10px 11px;
  resize: vertical;
}

.ticket-create-form input:focus,
.ticket-create-form textarea:focus,
.ticket-reply-form textarea:focus {
  border-color: #4bd6a1;
  box-shadow: 0 0 0 3px rgba(75, 214, 161, 0.08);
}

.ticket-create-form > button,
.ticket-reply-form button {
  min-height: 40px;
  border: 0;
  border-radius: 4px;
  background: #4bd6a1;
  color: #06110d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.ticket-create-form > button.error {
  background: #ff676e;
}

.ticket-thread {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(180px, 1fr) auto;
  overflow: hidden;
}

.ticket-thread > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #263136;
}

.ticket-thread > header div {
  min-width: 0;
}

.ticket-thread > header span:first-child {
  color: #7f8d92;
  font: 9px Consolas, monospace;
}

.ticket-thread h3 {
  overflow: hidden;
  margin: 2px 0 0;
  color: #edf7f4;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-messages {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  overflow-y: auto;
  background: #0d1315;
}

.ticket-message {
  width: min(84%, 470px);
  padding: 8px 10px;
  border: 1px solid #303c41;
  border-radius: 5px;
  background: #151d20;
}

.ticket-message.user {
  justify-self: end;
  border-color: rgba(75, 214, 161, 0.3);
  background: #14231e;
}

.ticket-message strong {
  color: #8eddbf;
  font-size: 9px;
}

.ticket-message p {
  margin: 4px 0;
  color: #e5eeeb;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.ticket-message time {
  display: block;
  color: #738087;
  font-size: 8px;
  text-align: right;
}

.ticket-reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid #263136;
}

.ticket-reply-form textarea {
  min-height: 52px;
  padding: 8px 10px;
  resize: none;
}

@media (max-width: 560px) {
  .tickets-modal {
    padding: 7px;
  }

  .tickets-card {
    max-height: calc(100dvh - 14px);
  }

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

  .ticket-list-item > span:last-child {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
  }

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

  .ticket-message {
    width: 92%;
  }
}

.video-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.empty-catalog {
  display: grid;
  width: min(100%, 620px);
  justify-items: start;
  padding: 72px 0 40px;
}

.empty-frame {
  display: grid;
  width: 152px;
  aspect-ratio: 16 / 10;
  margin-bottom: 30px;
  place-items: center;
  border: 1px solid #3a4347;
  background:
    linear-gradient(135deg, rgba(75, 214, 161, 0.13), transparent 48%),
    #111516;
  box-shadow: 10px 10px 0 #070808;
}

.empty-frame span {
  color: #8d979b;
  font-size: 26px;
}

.empty-catalog h2 {
  margin: 0;
  color: #effff8;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 32px;
  line-height: 1.1;
  text-shadow: 0 0 7px rgba(75, 214, 161, 0.32), 0 0 20px rgba(75, 214, 161, 0.12);
}

.empty-catalog > p:not(.eyebrow) {
  max-width: 540px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.empty-catalog .text-link {
  margin-top: 22px;
  font-size: 13px;
}

.catalog-pages {
  display: inline-grid;
  grid-template-columns: 46px auto 46px;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 28px auto 0;
  padding: 4px;
  border: 1px solid #2f3b40;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(75, 214, 161, 0.12), transparent 58%),
    rgba(13, 17, 19, 0.92);
  box-shadow: 0 0 22px rgba(75, 214, 161, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.catalog-shell > .catalog-pages {
  display: grid;
  width: max-content;
}

.catalog-pages a,
.catalog-pages span {
  display: inline-flex;
  min-width: 46px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #eafff7;
  text-decoration: none;
  font-weight: 900;
}

.catalog-pages a {
  color: var(--accent);
  font-size: 29px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(75, 214, 161, 0.28);
}

.catalog-pages a:hover {
  background: rgba(75, 214, 161, 0.16);
  color: #ffffff;
}

.catalog-pages span {
  min-width: 82px;
  padding: 0 14px;
  border-inline: 1px solid rgba(255, 255, 255, 0.06);
  color: #f6fff9;
  font-family: Consolas, "Courier New", monospace;
  font-size: 17px;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(75, 214, 161, 0.2);
}

.catalog-pages a.disabled {
  pointer-events: none;
  color: #4c5b60;
  opacity: 0.62;
  text-shadow: none;
}

.preview-modal {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2, 4, 4, 0.82);
  backdrop-filter: blur(10px);
}

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

.preview-card {
  position: relative;
  display: grid;
  width: min(100%, 780px);
  gap: 14px;
  padding: 18px;
  border: 1px solid #465157;
  border-radius: 8px;
  background: #111617;
  box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.28);
}

.preview-video-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050707;
}

.preview-card video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #050707;
}

.preview-loader {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: preview-loader-spin 0.8s linear infinite;
}

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

.preview-media-info {
  position: absolute;
  z-index: 4;
  top: 11px;
  right: 54px;
  left: 11px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e8f6f1;
  box-shadow: none;
  pointer-events: none;
}

.preview-media-info span {
  overflow: hidden;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(122, 148, 140, 0.45);
  border-radius: 4px;
  background: rgba(7, 12, 11, 0.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-media-info span:last-child {
  color: #bff5df;
  text-align: right;
}

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

.preview-mirror {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 52px;
  left: 14px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow-wrap: anywhere;
  color: #f3fff9;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  text-decoration-color: rgba(75, 214, 161, 0.58);
  text-underline-offset: 4px;
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
}

.preview-mirror:hover {
  color: var(--accent);
}

.preview-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.preview-title {
  margin: 0;
  color: #f2fff9;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(75, 214, 161, 0.2);
}

.preview-buy {
  display: flex;
  width: min(100%, 360px);
  min-height: 46px;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 1px solid rgba(75, 214, 161, 0.68);
  border-radius: 5px;
  background: #17231f;
  color: #effff8;
  cursor: pointer;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.preview-buy::before {
  content: none;
}

.preview-buy:hover:not(:disabled) {
  background: #1c3029;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(75, 214, 161, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.preview-buy:active:not(:disabled) {
  transform: translateY(0);
}

.preview-buy:disabled {
  cursor: wait;
  filter: saturate(0.55);
  opacity: 0.72;
}

.video-card.purchase-removing {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.purchases-modal,
.purchase-detail-modal,
.purchase-watch-modal,
.referral-modal {
  position: fixed;
  z-index: 96;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 4, 4, 0.84);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.purchase-detail-modal {
  z-index: 97;
}

.purchase-watch-modal {
  z-index: 98;
}

.archive-preparing-modal {
  position: fixed;
  z-index: 125;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 4, 4, 0.88);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.archive-preparing-modal[hidden] {
  display: none;
}

.archive-preparing-modal.is-visible {
  opacity: 1;
}

.archive-preparing-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 5px 13px;
  width: min(100%, 410px);
  padding: 22px;
  border: 1px solid rgba(75, 214, 161, 0.58);
  border-radius: 7px;
  background: #111719;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.66);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
}

.archive-preparing-modal.is-visible .archive-preparing-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.archive-preparing-icon {
  display: grid;
  width: 54px;
  height: 54px;
  grid-row: span 2;
  place-items: center;
  border: 1px solid rgba(255, 196, 72, 0.45);
  border-radius: 6px;
  background: rgba(255, 196, 72, 0.08);
  font-size: 27px;
}

.archive-preparing-card > div:not(.archive-preparing-progress) {
  display: grid;
  gap: 3px;
}

.archive-preparing-card p {
  margin: 0;
  color: #ffc448;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 900;
}

.archive-preparing-card h2 {
  margin: 0;
  color: #f1fff9;
  font-size: 20px;
  font-weight: 900;
}

.archive-preparing-card span:not(.archive-preparing-icon):not(.archive-preparing-progress span) {
  color: #aebbc0;
  font-size: 12px;
  line-height: 1.45;
}

.archive-preparing-progress {
  grid-column: 1 / -1;
  height: 8px;
  margin-top: 17px;
  overflow: hidden;
  border: 1px solid #304046;
  border-radius: 999px;
  background: #071011;
}

.archive-preparing-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #4bd6a1;
  box-shadow: 0 0 16px rgba(75, 214, 161, 0.58);
  transition: width 260ms ease;
}

.archive-preparing-card > strong {
  grid-column: 1 / -1;
  color: #4bd6a1;
  font-family: Consolas, "Courier New", monospace;
  font-size: 22px;
  text-align: center;
}

.archive-preparing-card > small {
  grid-column: 1 / -1;
  min-height: 18px;
  color: #93a2a8;
  font-size: 11px;
  text-align: center;
}

.archive-preparing-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #344147;
  border-radius: 4px;
  background: #182124;
  color: #ced9dc;
  cursor: pointer;
  font-size: 21px;
}

.archive-preparing-cancel {
  grid-column: 1 / -1;
  min-height: 38px;
  border: 1px solid #344147;
  border-radius: 4px;
  background: #182124;
  color: #dbe8e3;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 560px) {
  .archive-preparing-modal {
    padding: 12px;
  }

  .archive-preparing-card {
    padding: 18px;
  }
}

.purchases-modal[hidden],
.purchase-detail-modal[hidden],
.purchase-watch-modal[hidden],
.referral-modal[hidden] {
  display: none;
}

.purchases-modal.is-visible,
.purchase-detail-modal.is-visible,
.purchase-watch-modal.is-visible,
.referral-modal.is-visible {
  opacity: 1;
}

.purchases-card,
.purchase-detail-card,
.purchase-watch-card,
.referral-card {
  width: min(100%, 660px);
  max-height: min(760px, calc(100dvh - 40px));
  overflow: hidden;
  border: 1px solid #39464b;
  border-radius: 7px;
  background: #111719;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.62);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
}

.purchases-modal.is-visible .purchases-card,
.purchase-detail-modal.is-visible .purchase-detail-card,
.purchase-watch-modal.is-visible .purchase-watch-card,
.referral-modal.is-visible .referral-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.purchases-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #2c363a;
}

.referral-modal {
  z-index: 98;
}

.referral-card {
  display: grid;
  width: min(100%, 680px);
  max-height: min(820px, calc(100dvh - 40px));
  overflow-y: auto;
}

.referral-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #2c363a;
}

.referral-head > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #364248;
  border-radius: 4px;
  background: #20282b;
  color: #bdc8cb;
  cursor: pointer;
  font-size: 21px;
}

.referral-head > button:hover {
  border-color: #ff706a;
  background: rgba(255, 77, 77, 0.12);
  color: #ff7b75;
}

.referral-offer {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 18px 18px 0;
  padding: 16px;
  border: 1px solid rgba(232, 180, 94, 0.34);
  border-radius: 6px;
  background: linear-gradient(105deg, rgba(232, 180, 94, 0.1), rgba(75, 214, 161, 0.06));
}

.referral-percent {
  display: grid;
  width: 82px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 216, 79, 0.5);
  border-radius: 5px;
  background: #181b16;
  color: #ffd84f;
  font-family: Consolas, "Courier New", monospace;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(255, 216, 79, 0.3);
}

.referral-offer strong {
  color: #f4fff9;
  font-size: 15px;
}

.referral-offer p {
  margin: 5px 0 0;
  color: #aeb9b6;
  font-size: 12px;
  line-height: 1.5;
}

.referral-field {
  display: grid;
  gap: 7px;
  margin: 16px 18px 0;
}

.referral-field > span:first-child {
  color: #929fa3;
  font-size: 11px;
  font-weight: 750;
}

.referral-field-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid #344147;
  border-radius: 5px;
  background: #0c1113;
}

.referral-field-control:focus-within {
  border-color: rgba(75, 214, 161, 0.7);
}

.referral-field-control input {
  min-width: 0;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #dcebe5;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
}

.referral-field-control button {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid #344147;
  background: #1b2326;
  color: #b8c7c3;
  cursor: pointer;
}

.referral-field-control button:hover,
.referral-field-control button.copied {
  background: #20322c;
  color: var(--accent);
}

.referral-field-control svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.referral-field-control button.copied svg {
  display: none;
}

.referral-field-control button.copied::after {
  content: "✓";
  font-size: 18px;
  font-weight: 900;
}

.referral-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 18px 0;
}

.referral-stats > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #303b40;
  border-radius: 5px;
  background: #101618;
}

.referral-stats > div > span {
  font-size: 19px;
}

.referral-stats small {
  color: #8f9b9f;
  font-size: 10px;
  font-weight: 700;
}

.referral-stats b {
  color: #f3fff9;
  font-family: Consolas, "Courier New", monospace;
  font-size: 15px;
}

.referral-stats > div:last-child b {
  color: #ffd84f;
}

.referral-wallet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 12px 18px 0;
  padding: 14px;
  border: 1px solid rgba(103, 214, 180, 0.34);
  border-radius: 6px;
  background: #0d1516;
}

.referral-wallet > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: end;
  gap: 3px 10px;
}

.referral-wallet small {
  grid-column: 2 / -1;
  color: #81918f;
  font-size: 10px;
  font-weight: 800;
}

.referral-wallet strong {
  grid-column: 2;
  color: #f4fff9;
  font: 900 19px/1.2 Consolas, "Courier New", monospace;
}

.referral-wallet > div > span {
  grid-column: 3;
  color: #a8b5b1;
  font: 700 11px/1.4 Consolas, "Courier New", monospace;
}

.referral-wallet .ltc-logo {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: center;
  place-items: center;
  border: 1px solid #6f8fc2;
  border-radius: 50%;
  background: #345d9d;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 5px 14px rgba(25, 54, 101, 0.34);
  color: #fff;
  font-style: normal;
}

.referral-wallet .ltc-logo span {
  position: relative;
  font: 900 19px/1 Arial, sans-serif;
  transform: skew(-8deg);
}

.referral-wallet .ltc-logo span::after {
  position: absolute;
  width: 13px;
  height: 2px;
  left: -3px;
  bottom: 3px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform: rotate(-12deg);
}

.referral-wallet > button,
.referral-withdraw-form > button[type="submit"] {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #42c99e;
  border-radius: 5px;
  background: #45d1a4;
  color: #07130f;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.referral-wallet > button:disabled {
  border-color: #354044;
  background: #252e31;
  color: #728084;
  cursor: not-allowed;
}

.referral-withdraw-form {
  display: grid;
  gap: 11px;
  margin: 12px 18px 0;
  padding: 14px;
  border: 1px solid #354349;
  border-radius: 6px;
  background: #0b1113;
}

.referral-withdraw-form[hidden] {
  display: none;
}

.referral-withdraw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.referral-withdraw-head strong {
  color: #edf9f4;
  font-size: 13px;
}

.referral-withdraw-head button {
  border: 0;
  background: transparent;
  color: #879599;
  cursor: pointer;
  font-size: 10px;
}

.referral-withdraw-form label {
  display: grid;
  gap: 6px;
  color: #8d9a9e;
  font-size: 10px;
  font-weight: 750;
}

.referral-withdraw-form label > input,
.referral-withdraw-form label > span {
  min-height: 42px;
  border: 1px solid #344147;
  border-radius: 5px;
  background: #0e1416;
}

.referral-withdraw-form label > input,
.referral-withdraw-form label > span input {
  min-width: 0;
  padding: 0 11px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e4f1ec;
  font: 700 11px Consolas, "Courier New", monospace;
}

.referral-withdraw-form label > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
}

.referral-withdraw-form label > span b {
  color: #e5bd57;
  font-size: 10px;
}

.referral-withdraw-form p {
  margin: 0;
  color: #7f8c90;
  font-size: 10px;
}

.referral-withdraw-form output {
  min-height: 14px;
  color: #65dcb3;
  font-size: 10px;
  text-align: center;
}

.referral-withdraw-form output.error {
  color: #ff777d;
}

.referral-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 18px 8px;
}

button.referral-withdrawals-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 9px;
  width: calc(100% - 36px);
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #303b40;
  border-radius: 5px;
  background: #101618;
  cursor: pointer;
  text-align: left;
}

button.referral-withdrawals-head i {
  color: #69dcb6;
  font: 400 18px/1 Arial, sans-serif;
  font-style: normal;
  transition: transform 160ms ease;
}

button.referral-withdrawals-head.open i {
  transform: rotate(90deg);
}

.referral-history-head h3 {
  margin: 0;
  color: #f1fbf7;
  font-size: 14px;
}

.referral-history-head span {
  padding: 3px 7px;
  border: 1px solid rgba(255, 216, 79, 0.28);
  border-radius: 3px;
  color: #ffd84f;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 800;
}

.referral-history {
  display: grid;
  gap: 6px;
  margin: 0 18px 18px;
}

.referral-withdrawals {
  display: grid;
  gap: 6px;
  margin: 0 18px 18px;
}

.referral-withdrawals[hidden] {
  display: none;
}

.referral-withdrawal-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid #2d383c;
  border-radius: 5px;
  background: #0e1416;
}

.referral-withdrawal-item > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.referral-withdrawal-item > div:last-child {
  justify-items: end;
}

.referral-withdrawal-item strong {
  color: #e8f4ef;
  font: 800 11px Consolas, "Courier New", monospace;
}

.referral-withdrawal-item small {
  overflow: hidden;
  color: #748287;
  font: 9px Consolas, "Courier New", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-withdrawal-item time {
  color: #667378;
  font: 9px Consolas, "Courier New", monospace;
}

.referral-withdrawal-status {
  padding: 4px 7px;
  border: 1px solid #775f28;
  border-radius: 999px;
  background: #2d260f;
  color: #f0c85c;
  font-size: 9px;
}

.referral-withdrawal-status.paid {
  border-color: #28664f;
  background: #123025;
  color: #6fdfb7;
}

.referral-withdrawal-status.rejected {
  border-color: #71333a;
  background: #32171b;
  color: #ff8188;
}

.referral-history-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid #2c363a;
  border-radius: 4px;
  background: #0e1416;
}

.referral-history-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #182023;
  font-size: 16px;
}

.referral-history-item > div:nth-child(2),
.referral-history-result {
  display: grid;
  gap: 3px;
}

.referral-history-item strong {
  color: #eaf5f1;
  font-size: 12px;
}

.referral-history-item small,
.referral-history-item time {
  color: #7f8d91;
  font-family: Consolas, "Courier New", monospace;
  font-size: 9px;
}

.referral-history-result {
  justify-items: end;
}

.referral-history-result b {
  color: #ffd84f;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.referral-history-item.registration .referral-history-result b {
  color: var(--accent);
}

.referral-history-message {
  margin: 0;
  padding: 24px 12px;
  border: 1px dashed #303b40;
  color: #879397;
  font-size: 12px;
  text-align: center;
}

.referral-history-message.error {
  color: #ff7b75;
}

@media (max-width: 560px) {
  .referral-modal {
    padding: 8px;
  }

  .referral-card {
    max-height: calc(100dvh - 16px);
  }

  .referral-head {
    padding: 13px;
  }

  .referral-offer {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 11px;
    margin: 12px 12px 0;
    padding: 12px;
  }

  .referral-percent {
    width: 62px;
    height: 52px;
    font-size: 19px;
  }

  .referral-field,
  .referral-stats,
  .referral-wallet,
  .referral-withdraw-form,
  .referral-history-head,
  .referral-history,
  .referral-withdrawals {
    margin-right: 12px;
    margin-left: 12px;
  }

  .referral-stats {
    grid-template-columns: 1fr;
  }

  .referral-wallet {
    grid-template-columns: 1fr;
  }

  .referral-wallet > div {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .referral-history-item {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 8px;
  }

  .referral-history-icon {
    width: 30px;
    height: 30px;
  }
}

.purchases-head > button,
.purchase-detail-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #364248;
  border-radius: 4px;
  background: #20282b;
  color: #bdc8cb;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
}

.purchases-head > button:hover,
.purchase-detail-close:hover {
  border-color: #ff706a;
  color: #ff8d87;
}

.purchases-list {
  display: grid;
  max-height: min(590px, calc(100dvh - 150px));
  gap: 1px;
  overflow-y: auto;
  padding: 8px;
}

.purchases-list-item {
  display: grid;
  width: 100%;
  min-height: 50px;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #0e1416;
  color: #e8f2ef;
  cursor: pointer;
  text-align: left;
}

.purchases-list-item:hover {
  border-color: #3b5149;
  background: #16201d;
}

.purchases-list-item span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchases-list-item i {
  color: var(--accent);
  font-size: 21px;
  font-style: normal;
}

.purchases-list-message {
  margin: 0;
  padding: 42px 18px;
  color: #89959a;
  text-align: center;
  font-size: 13px;
}

.purchases-list-message.error {
  color: #ff8d87;
}

.purchase-detail-card {
  position: relative;
  display: grid;
  width: min(100%, 430px);
  max-height: calc(100dvh - 30px);
  gap: 12px;
  overflow-y: auto;
  padding: 18px;
}

.purchase-detail-close {
  position: absolute;
  z-index: 5;
  top: 20px;
  right: 20px;
  background: rgba(8, 12, 13, 0.88);
}

.purchase-detail-back {
  display: inline-flex;
  width: max-content;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  margin-right: 48px;
  padding: 0 11px;
  border: 1px solid #344147;
  border-radius: 4px;
  background: #172023;
  color: #dce8e4;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.purchase-detail-back:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.purchase-detail-success {
  margin: 0 44px 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(75, 214, 161, 0.48);
  border-radius: 5px;
  background: rgba(75, 214, 161, 0.09);
  color: #75edbd;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  animation: purchase-success-breathe 1.8s ease-in-out infinite;
}

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

.purchase-detail-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding-right: 42px;
}

.purchase-detail-brand {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid rgba(75, 214, 161, 0.34);
  border-radius: 6px;
  background: rgba(75, 214, 161, 0.08);
}

.purchase-detail-brand::before {
  top: 3px;
  left: 3px;
  width: 38px;
  height: 38px;
}

.purchase-detail-brand::after {
  top: 4px;
  right: 3px;
  width: 6px;
  height: 6px;
}

.purchase-detail-brand span {
  width: 33px;
  height: 33px;
}

.purchase-detail-summary div {
  display: grid;
  gap: 2px;
}

.purchase-detail-summary small {
  color: #ffc448;
  font-family: Consolas, "Courier New", monospace;
  font-size: 9px;
  font-weight: 900;
}

.purchase-detail-summary strong {
  color: #f2fff9;
  font-size: 16px;
  font-weight: 900;
}

.purchase-detail-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid #344047;
  border-radius: 5px;
  background: #050707;
}

.purchase-detail-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050707;
}

.purchase-detail-meta {
  display: grid;
  gap: 7px;
  margin: 2px 0 0;
}

.purchase-detail-meta > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #2e393e;
  border-radius: 4px;
  background: #0e1416;
}

.purchase-detail-meta dt {
  color: #8f9ba0;
  font-size: 11px;
  font-weight: 750;
}

.purchase-detail-meta dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: #edf7f4;
  font-size: 12px;
  font-weight: 750;
}

.purchase-detail-watch,
.purchase-detail-download {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: #06110d;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

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

.purchase-detail-watch {
  margin: 0;
  border-color: var(--accent);
  background: var(--accent);
  color: #06110d;
}

.purchase-detail-watch[hidden] {
  display: none;
}

.purchase-detail-watch:hover {
  background: #62e4b2;
}

.purchase-detail-download {
  border-color: #3b484d;
  background: #1a2225;
  color: #dce8e4;
}

.purchase-detail-download:hover {
  border-color: #63747a;
  background: #222d31;
  color: #fff;
}

.purchase-watch-card {
  display: grid;
  width: min(100%, 960px);
  max-height: calc(100dvh - 24px);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.purchase-watch-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #2d383d;
  background: #101719;
}

.purchase-watch-head strong {
  overflow: hidden;
  color: #ecf8f4;
  font-size: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-watch-back,
.purchase-watch-close {
  min-height: 34px;
  border: 1px solid #38464b;
  border-radius: 4px;
  background: #192124;
  color: #dce7e4;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.purchase-watch-back {
  padding: 0 13px;
}

.purchase-watch-close {
  width: 34px;
  padding: 0;
  font-size: 20px;
}

.purchase-watch-back:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.purchase-watch-close:hover {
  border-color: #ff706a;
  color: #ff7b75;
}

.purchase-watch-stage {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  height: min(70dvh, 640px);
  min-height: min(360px, calc(100dvh - 90px));
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: stretch;
  background: #030505;
}

.purchase-watch-media {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-row: 1;
  overflow: hidden;
  place-items: center;
  background: #030505;
}

.purchase-watch-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #030505;
}

.purchase-watch-controls {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 48px;
  grid-row: 2;
  grid-template-columns: 36px auto minmax(80px, 1fr) auto 36px 36px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-top: 1px solid rgba(103, 123, 128, 0.42);
  background: rgba(5, 8, 9, 0.93);
  color: #eef9f5;
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.42);
}

.purchase-watch-controls button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid #3b494e;
  border-radius: 4px;
  background: #172023;
  color: #f4fffb;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.purchase-watch-controls button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.purchase-watch-controls time {
  min-width: 38px;
  color: #dce7e3;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.purchase-watch-controls input[type="range"] {
  width: 100%;
  min-width: 80px;
  accent-color: var(--accent);
  cursor: pointer;
}

.premium-modal {
  position: fixed;
  z-index: 99;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 4, 5, 0.86);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 170ms ease;
}

.premium-modal[hidden] {
  display: none;
}

.premium-modal.is-visible {
  opacity: 1;
}

.premium-card {
  position: relative;
  display: grid;
  width: min(100%, 470px);
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(105, 207, 245, 0.34);
  border-radius: 7px;
  background: #101719;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68), 0 0 42px rgba(75, 181, 224, 0.1);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 170ms ease, transform 170ms ease;
}

.premium-modal.is-visible .premium-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.premium-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #364248;
  border-radius: 4px;
  background: #20282b;
  color: #bdc8cb;
  cursor: pointer;
  font-size: 20px;
}

.premium-close:hover {
  border-color: #ff706a;
  color: #ff7b75;
}

.premium-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 38px;
}

.premium-gem {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border: 1px solid rgba(111, 213, 255, 0.4);
  border-radius: 6px;
  background: #152329;
  font-size: 27px;
  box-shadow: inset 0 0 20px rgba(84, 195, 240, 0.07);
}

.premium-head strong {
  color: #dcf7ff;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(102, 211, 255, 0.22);
}

.premium-head p {
  margin: 3px 0 0;
  color: #8c9ca2;
  font-size: 11.5px;
  line-height: 1.35;
}

.premium-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-top: 1px solid #29343a;
  border-bottom: 1px solid #29343a;
}

.premium-price b {
  color: #f5fbff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 22px;
  line-height: 1;
}

.premium-price b span {
  color: #ffc43d;
  font-family: inherit;
}

.premium-price small {
  color: #9eacb1;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.premium-includes {
  margin: 1px 0 -2px;
  color: #dce8ea;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.premium-benefits {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-benefits li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 9px;
  border: 1px solid #263237;
  border-radius: 5px;
  background: #111a1d;
}

.premium-benefits li > span {
  display: grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(104, 204, 244, 0.27);
  border-radius: 4px;
  background: #152329;
  color: #8edcff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 900;
}

.premium-benefits li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.premium-benefits strong {
  color: #edf7f8;
  font-size: 12px;
  font-weight: 900;
}

.premium-benefits p {
  margin: 0;
  color: #98a8ad;
  font-size: 10.5px;
  line-height: 1.35;
}

.premium-purchase {
  min-height: 46px;
  border: 1px solid #66dcad;
  border-radius: 4px;
  background: #4dd3a1;
  color: #07120e;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.premium-success-modal {
  position: fixed;
  z-index: 101;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 5, 6, 0.9);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 180ms ease;
}

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

.premium-success-modal.is-visible {
  opacity: 1;
}

.premium-success-card {
  position: relative;
  width: min(100%, 510px);
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(88, 224, 173, 0.42);
  border-radius: 7px;
  background: #101719;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72), 0 0 46px rgba(69, 213, 158, 0.12);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.premium-success-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #49d7a2, #78dcff, #ffc448);
  content: "";
}

.premium-success-modal.is-visible .premium-success-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.premium-success-close {
  top: 18px;
  right: 18px;
}

.premium-success-head {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-right: 40px;
}

.premium-success-gem {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(111, 213, 255, 0.4);
  border-radius: 7px;
  background: #152329;
  font-size: 34px;
  box-shadow: inset 0 0 24px rgba(84, 195, 240, 0.08);
}

.premium-success-check {
  position: absolute;
  left: 49px;
  bottom: -5px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 3px solid #101719;
  border-radius: 50%;
  background: #54d9a7;
  color: #071510;
  font-size: 13px;
  font-weight: 950;
}

.premium-success-head div {
  display: grid;
  gap: 3px;
}

.premium-success-head small {
  color: #ffc448;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 900;
}

.premium-success-head strong {
  color: #effffc;
  font-size: 23px;
  font-weight: 950;
  text-shadow: 0 0 16px rgba(83, 222, 170, 0.2);
}

.premium-success-head p {
  margin: 0;
  color: #9babad;
  font-size: 12px;
  line-height: 1.45;
}

.premium-success-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 5px;
  color: #78898d;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.premium-success-divider::after {
  height: 1px;
  flex: 1;
  background: #29363a;
  content: "";
}

.premium-success-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-success-benefits li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  min-height: 65px;
  border-bottom: 1px solid #263237;
}

.premium-success-benefits li > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(105, 207, 245, 0.28);
  border-radius: 5px;
  background: #152329;
  color: #8edcff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 900;
}

.premium-success-benefits li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.premium-success-benefits strong {
  color: #ecf7f5;
  font-size: 12px;
  font-weight: 900;
}

.premium-success-benefits p {
  margin: 0;
  color: #8d9da1;
  font-size: 10.5px;
  line-height: 1.4;
}

.premium-success-benefits li > i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(80, 217, 166, 0.38);
  border-radius: 50%;
  background: rgba(80, 217, 166, 0.1);
  color: #65e6b5;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.premium-success-done {
  display: flex;
  min-height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 17px;
  border: 1px solid #65dfb1;
  border-radius: 5px;
  background: #4dd3a1;
  color: #07140f;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
}

.premium-success-done:hover {
  background: #72e2b8;
  box-shadow: 0 0 24px rgba(77, 211, 161, 0.16);
}

.premium-success-done span {
  font-size: 16px;
}

.premium-purchase:hover:not(:disabled) {
  background: #72e2b8;
  box-shadow: 0 0 22px rgba(77, 211, 161, 0.16);
}

.premium-purchase.purchased,
.premium-purchase:disabled {
  border-color: rgba(75, 214, 161, 0.45);
  background: rgba(75, 214, 161, 0.12);
  color: #75edbd;
  cursor: default;
}

@media (max-width: 560px) {
  .premium-modal {
    padding: 9px;
  }

  .premium-card {
    gap: 10px;
    padding: 16px 13px 13px;
  }

  .premium-head strong {
    font-size: 16px;
  }

  .premium-gem {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 23px;
  }

  .premium-price b {
    font-size: 19px;
  }

  .premium-benefits li {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 6px 7px;
  }

  .premium-success-modal {
    padding: 9px;
  }

  .premium-success-card {
    padding: 20px 14px 14px;
  }

  .premium-success-head {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
  }

  .premium-success-gem {
    width: 54px;
    height: 54px;
    font-size: 27px;
  }

  .premium-success-check {
    left: 39px;
  }

  .premium-success-head strong {
    font-size: 18px;
  }

  .premium-success-benefits li {
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    gap: 9px;
  }

  .premium-success-benefits li > span {
    width: 32px;
    height: 32px;
  }
}

@keyframes purchase-success-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(75, 214, 161, 0); }
  50% { box-shadow: 0 0 22px rgba(75, 214, 161, 0.14); }
}

@media (max-width: 560px) {
  .purchases-modal,
  .purchase-detail-modal,
  .purchase-watch-modal {
    padding: 10px;
  }

  .purchase-detail-card {
    padding: 10px;
  }

  .purchase-detail-close {
    top: 17px;
    right: 17px;
  }

  .purchase-detail-success {
    margin-right: 42px;
    font-size: 12px;
  }

  .purchase-detail-meta > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .purchase-detail-actions {
    grid-template-columns: 1fr;
  }

  .purchase-watch-head {
    grid-template-columns: auto minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 9px;
  }

  .purchase-watch-back {
    padding: 0 10px;
  }

  .purchase-watch-close {
    width: 32px;
  }

  .purchase-watch-stage {
    height: min(62dvh, 520px);
    min-height: min(260px, calc(100dvh - 80px));
  }

  .purchase-watch-controls {
    grid-template-columns: 34px auto minmax(54px, 1fr) auto 34px;
    gap: 6px;
    padding: 6px 7px;
  }

  .purchase-watch-mute {
    display: none !important;
  }
}

.insufficient-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 4, 4, 0.86);
  backdrop-filter: blur(10px);
}

.insufficient-modal[hidden] {
  display: none;
}

.insufficient-card {
  position: relative;
  display: grid;
  width: min(100%, 390px);
  justify-items: center;
  gap: 16px;
  padding: 28px 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 78, 87, 0.5);
  border-radius: 8px;
  background: #141718;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 28px rgba(255, 60, 72, 0.08);
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.insufficient-modal.is-visible .insufficient-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.insufficient-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: #ff4e57;
  box-shadow: 0 0 18px rgba(255, 78, 87, 0.72);
  content: "";
}

.insufficient-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #3c4447;
  border-radius: 4px;
  background: #202629;
  color: #aab4b8;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.insufficient-close:hover {
  border-color: rgba(255, 78, 87, 0.65);
  color: #ff7c83;
}

.insufficient-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 78, 87, 0.62);
  border-radius: 50%;
  background: rgba(255, 78, 87, 0.1);
  color: #ff5962;
  font-size: 35px;
  font-weight: 300;
  line-height: 1;
  animation: insufficient-pulse 1.8s ease-in-out infinite;
}

.insufficient-card h2 {
  margin: 0;
  color: #ff5962;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 16px rgba(255, 78, 87, 0.3);
  animation: insufficient-text-pulse 1.8s ease-in-out infinite;
}

.insufficient-topup {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #06110d;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.insufficient-topup:hover {
  filter: brightness(1.08);
}

@keyframes insufficient-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 78, 87, 0.08); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(255, 78, 87, 0); transform: scale(1.04); }
}

@keyframes insufficient-text-pulse {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .insufficient-icon,
  .insufficient-card h2 {
    animation: none;
  }
}

.invoice-modal {
  position: fixed;
  z-index: 92;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  background: rgba(2, 4, 4, 0.88);
  backdrop-filter: blur(10px);
}

.invoice-modal[hidden] {
  display: none;
}

.invoice-card {
  width: min(100%, 470px);
  padding: 18px;
  border: 1px solid #3d4a4f;
  border-radius: 8px;
  background: #121719;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.62);
}

.invoice-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #293438;
}

.invoice-head > button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #394449;
  border-radius: 4px;
  background: #20272a;
  color: #aeb8bc;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.invoice-timer {
  min-width: 58px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 186, 72, 0.34);
  border-radius: 4px;
  background: rgba(255, 186, 72, 0.08);
  color: #ffc351;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.invoice-timer.paid {
  border-color: rgba(75, 214, 161, 0.45);
  color: var(--accent);
}

.invoice-timer.expired {
  border-color: rgba(255, 78, 87, 0.45);
  color: #ff6e76;
}

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

.invoice-details > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #2f3a3f;
  border-radius: 5px;
  background: #0e1315;
}

.invoice-details dt,
.invoice-link-field > span:first-child {
  color: #8e999e;
  font-size: 11px;
  font-weight: 700;
}

.invoice-details dd {
  margin: 0;
  color: #f2f8f6;
  font-family: Consolas, "Courier New", monospace;
  font-size: 16px;
  font-weight: 800;
}

.invoice-link-field {
  display: grid;
  gap: 7px;
}

.invoice-link-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  overflow: hidden;
  border: 1px solid #3b484e;
  border-radius: 5px;
  background: #0d1214;
  transition: grid-template-columns 160ms ease;
}

.invoice-link-control.copy-confirmed {
  grid-template-columns: minmax(0, 1fr) 112px;
}

.invoice-link-control input {
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #c9d5d2;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.invoice-link-control button {
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid #3b484e;
  background: #1d2528;
  color: #b7c4c1;
  cursor: pointer;
  white-space: nowrap;
}

.invoice-link-control button:hover,
.invoice-link-control button.copied {
  background: rgba(75, 214, 161, 0.14);
  color: var(--accent);
}

.invoice-link-control svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.invoice-link-control button.copied svg {
  display: none;
}

.invoice-link-control button.copied::after {
  content: attr(data-copy-success);
  font-size: 11px;
  font-weight: 800;
}

.invoice-instruction {
  margin: 14px 0;
  padding: 12px;
  border-left: 3px solid #ffc351;
  background: rgba(255, 195, 81, 0.06);
  color: #b6c0c3;
  font-size: 12px;
  line-height: 1.55;
}

.invoice-instruction strong {
  color: #ffc351;
}

.payment-success-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 5, 5, 0.82);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
}

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

.payment-success-modal.is-visible {
  opacity: 1;
}

.payment-success-card {
  width: min(100%, 430px);
  overflow: hidden;
  border: 1px solid #365148;
  border-radius: 7px;
  background: #111719;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 34px rgba(75, 214, 161, 0.09);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.payment-success-modal.is-visible .payment-success-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.payment-success-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #293a35;
}

.payment-success-head > button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #334047;
  border-radius: 4px;
  background: #20282b;
  color: #bdc8cb;
  cursor: pointer;
  font-size: 20px;
}

.payment-success-head > button:hover {
  border-color: #ff706a;
  color: #ff8d87;
}

.payment-success-check {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  margin: 24px auto 14px;
  border: 1px solid rgba(75, 214, 161, 0.7);
  border-radius: 50%;
  background: rgba(75, 214, 161, 0.1);
  color: var(--accent);
  font-size: 39px;
  font-weight: 900;
  box-shadow: 0 0 0 8px rgba(75, 214, 161, 0.04), 0 0 30px rgba(75, 214, 161, 0.2);
  animation: payment-success-pulse 1.8s ease-in-out infinite;
}

.payment-success-card p {
  margin: 0;
  padding: 0 24px 23px;
  color: #e8f2ef;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.payment-success-card p strong {
  color: #ffd454;
  white-space: nowrap;
}

.payment-success-done {
  display: block;
  width: calc(100% - 32px);
  min-height: 48px;
  margin: 0 16px 16px;
  border: 1px solid #4bd6a1;
  border-radius: 5px;
  background: linear-gradient(135deg, #48d9a4, #57d7b3);
  color: #07110d;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 10px 22px rgba(75, 214, 161, 0.2);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.payment-success-done:hover {
  background: linear-gradient(135deg, #5be5b5, #70e6c5);
  box-shadow: 0 12px 26px rgba(75, 214, 161, 0.3);
  transform: translateY(-1px);
}

@keyframes payment-success-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 8px rgba(75, 214, 161, 0.04), 0 0 24px rgba(75, 214, 161, 0.16); }
  50% { transform: scale(1.045); box-shadow: 0 0 0 13px rgba(75, 214, 161, 0.025), 0 0 38px rgba(75, 214, 161, 0.3); }
}

.invoice-waiting {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(75, 214, 161, 0.28);
  border-radius: 5px;
  background: rgba(75, 214, 161, 0.07);
  color: #d9f7eb;
  font-size: 14px;
  font-weight: 850;
}

.invoice-waiting i {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(75, 214, 161, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: invoice-spin 0.8s linear infinite;
}

.invoice-waiting.paid {
  border-color: rgba(75, 214, 161, 0.55);
  color: var(--accent);
}

.invoice-waiting.expired {
  border-color: rgba(255, 78, 87, 0.45);
  background: rgba(255, 78, 87, 0.07);
  color: #ff747c;
}

.invoice-waiting.paid i,
.invoice-waiting.expired i {
  display: none;
}

.invoice-cancel {
  width: 100%;
  min-height: 42px;
  margin-top: 9px;
  border: 1px solid rgba(255, 78, 87, 0.38);
  border-radius: 5px;
  background: rgba(255, 78, 87, 0.08);
  color: #ff7b82;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.invoice-cancel:hover {
  border-color: rgba(255, 78, 87, 0.68);
  background: rgba(255, 78, 87, 0.14);
}

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

@media (max-width: 520px) {
  .invoice-head {
    grid-template-columns: minmax(0, 1fr) auto 30px;
  }

  .invoice-details {
    grid-template-columns: 1fr;
  }
}

.balance-modal {
  position: fixed;
  z-index: 160;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  background: rgba(2, 4, 4, 0.82);
  backdrop-filter: blur(8px);
}

.balance-modal[hidden] {
  display: none;
}

.balance-card {
  width: min(100%, 360px);
  padding: 16px;
  border: 1px solid #3b474c;
  border-radius: 6px;
  background: #121719;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.48);
}

.balance-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.balance-brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.balance-card-head .balance-brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.balance-card-head .balance-brand-mark::before {
  width: 38px;
  height: 38px;
  top: 2px;
  left: 2px;
}

.balance-card-head .balance-brand-mark::after {
  width: 6px;
  height: 6px;
  top: 3px;
}

.balance-card-head .balance-brand-mark span {
  width: 33px;
  height: 33px;
}

.balance-brand-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.balance-brand-copy strong {
  color: #ffba48;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1;
  background: linear-gradient(90deg, #ff4a43 0%, #ff7950 42%, #ffd84f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.balance-brand-copy h2 {
  margin: 0;
  color: #939da2;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.balance-card-head > button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: #20272a;
  color: #aab5b9;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.balance-card-head > button:hover {
  background: #2a3337;
  color: #fff;
}

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

.balance-options button {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #303a3f;
  border-radius: 5px;
  background: #0e1315;
  color: #dfe8e4;
  cursor: pointer;
}

.balance-options button:hover {
  border-color: #58656a;
  background: #171e21;
}

.balance-options button.selected {
  border-color: var(--accent);
  background: rgba(75, 214, 161, 0.1);
  color: #f4fff9;
  box-shadow: inset 0 0 0 1px rgba(75, 214, 161, 0.12);
}

.balance-options b {
  font-family: Consolas, "Courier New", monospace;
  font-size: 16px;
}

.balance-options span {
  color: #ffd454;
  font-size: 15px;
}

.balance-custom {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.balance-custom > span:first-child {
  color: #89959a;
  font-size: 10px;
  font-weight: 650;
}

.balance-custom-control {
  display: grid;
  min-height: 40px;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  border: 1px solid #303a3f;
  border-radius: 4px;
  background: #0e1315;
}

.balance-custom-control:focus-within {
  border-color: #59666b;
}

.balance-custom-control input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef6f3;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.balance-custom-control input::-webkit-inner-spin-button,
.balance-custom-control input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.balance-custom-control b {
  color: #ffd454;
  font-size: 13px;
}

.balance-premium-cashback {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(103, 199, 238, 0.32);
  border-radius: 4px;
  background: #122027;
  color: #dff7ff;
}

.balance-premium-cashback span {
  font-size: 16px;
}

.balance-premium-cashback strong {
  font-size: 11px;
  font-weight: 900;
}

.balance-payment-via {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  color: #a6b1b5;
  font-size: 11px;
  font-weight: 650;
}

.telegram-mark {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: #229ed9;
  box-shadow: 0 0 12px rgba(34, 158, 217, 0.24);
}

.telegram-mark svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.balance-confirm {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #07130f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.balance-confirm:disabled {
  background: #283135;
  color: #6f7b80;
  cursor: not-allowed;
}

.balance-help-open {
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  border: 1px solid #344147;
  border-radius: 4px;
  background: #171e21;
  color: #cbd5d8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.balance-help-open:hover {
  border-color: #59686e;
  background: #20292d;
  color: #fff;
}

.stars-help-card {
  width: min(100%, 480px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  scrollbar-color: #46545a #151b1e;
  scrollbar-width: thin;
}

.stars-help-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
}

.stars-help-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.stars-help-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(255, 212, 84, 0.34);
  border-radius: 5px;
  background: rgba(255, 212, 84, 0.08);
  font-size: 19px;
}

.stars-help-head h2,
.stars-help-head p {
  margin: 0;
}

.stars-help-head h2 {
  color: #f2f8f6;
  font-size: 17px;
  line-height: 1.15;
}

.stars-help-head p {
  margin-top: 4px;
  color: #879398;
  font-size: 10px;
}

.stars-help-head > button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: #20272a;
  color: #aab5b9;
  cursor: pointer;
  font-size: 18px;
}

.stars-help-intro {
  margin: 17px 0 14px;
  padding-left: 11px;
  border-left: 2px solid #ffd454;
  color: #b7c1c4;
  font-size: 12px;
  line-height: 1.55;
}

.stars-help-intro strong {
  color: #f2f7f5;
}

.stars-help-card h3 {
  margin: 0 0 9px;
  color: #f0f6f4;
  font-size: 12px;
}

.stars-help-links {
  display: grid;
  gap: 6px;
}

.stars-help-link-row {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) 44px;
  overflow: hidden;
  border: 1px solid #303b40;
  border-radius: 4px;
  background: #0e1416;
}

.stars-help-links a {
  display: grid;
  min-height: 48px;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: #dfe8e5;
  text-decoration: none;
}

.stars-help-links a:hover {
  background: rgba(34, 158, 217, 0.07);
}

.stars-help-link-row:has(a:hover),
.stars-help-link-row:has(.stars-link-copy:hover) {
  border-color: #229ed9;
}

.stars-help-links a > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #192226;
  color: #ffd454;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
}

.stars-help-links a > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.stars-help-links strong {
  font-size: 11px;
}

.stars-help-links small {
  overflow: hidden;
  color: #7f8c91;
  font-family: Consolas, "Courier New", monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stars-link-copy {
  display: grid;
  width: 44px;
  min-height: 48px;
  place-items: center;
  border: 0;
  border-left: 1px solid #303b40;
  background: #151d20;
  color: #a8b6bb;
  cursor: pointer;
}

.stars-link-copy:hover {
  border-color: #229ed9;
  color: #dce9ed;
}

.stars-link-copy svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.stars-link-copy.copied {
  border-color: var(--accent);
  color: var(--accent);
}

.stars-link-copy.copied svg {
  display: none;
}

.stars-link-copy.copied::before {
  content: "✓";
  font-size: 18px;
  font-weight: 800;
}

.stars-help-warning {
  margin: 10px 0 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 91, 85, 0.35);
  border-left: 3px solid #ff5b55;
  border-radius: 3px;
  background: rgba(255, 91, 85, 0.1);
  color: #ffd077;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.stars-help-back {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #07130f;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.credentials-modal {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 4, 4, 0.78);
  backdrop-filter: blur(10px);
}

.credentials-card {
  width: min(100%, 520px);
  padding: 30px;
  border: 1px solid #465157;
  border-top: 4px solid var(--accent);
  background:
    linear-gradient(135deg, rgba(75, 214, 161, 0.08), transparent 52%),
    #14191b;
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.32), 0 0 34px rgba(75, 214, 161, 0.13);
}

.credentials-card h2 {
  margin: 0;
  color: #f5fff9;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 30px;
  line-height: 1.05;
  text-shadow: 0 0 9px rgba(75, 214, 161, 0.45), 0 0 24px rgba(75, 214, 161, 0.16);
}

.credentials-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 18px;
}

.credentials-list > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: #0e1112;
}

.credentials-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.credentials-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff7d7;
  font-family: Consolas, "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
}

.credentials-list .credentials-mirror {
  color: #d9e4e0;
  font-size: 11px;
  line-height: 1.35;
}

.copy-credentials,
.saved-credentials {
  display: flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-weight: 800;
}

.copy-credentials {
  background: var(--accent);
  color: #06130f;
  box-shadow: 0 0 12px rgba(75, 214, 161, 0.2);
}

.copy-credentials:hover {
  background: #72e6ba;
}

.copy-credentials span {
  font-size: 20px;
}

.copy-status {
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.credentials-warning {
  margin: 18px 0;
  color: #ff4d45;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 77, 69, 0.72), 0 0 20px rgba(255, 77, 69, 0.24);
  animation: warning-breathe 2.8s ease-in-out infinite;
}

.saved-credentials {
  background: #252c2f;
  color: #f4f5f3;
}

.saved-credentials:hover {
  background: #313a3e;
  color: var(--accent);
}

@keyframes warning-breathe {
  0%, 100% {
    opacity: 0.72;
    text-shadow: 0 0 5px rgba(255, 77, 69, 0.34), 0 0 12px rgba(255, 77, 69, 0.1);
    transform: scale(0.995);
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 77, 69, 0.82), 0 0 28px rgba(255, 77, 69, 0.36);
    transform: scale(1);
  }
}

@media (max-width: 900px) {
  .auth-layout {
    grid-template-columns: 1fr;
    gap: 52px;
    padding-top: 20px;
  }

  .auth-intro h1 {
    max-width: 680px;
  }

  .auth-panel {
    width: min(100%, 540px);
  }

  .catalog-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .catalog-layout {
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 0;
  }

  .user-panel {
    width: 230px;
  }

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

@media (max-width: 620px) {
  .auth-header,
  .auth-layout,
  .auth-footer,
  .header-inner,
  .site-footer {
    width: min(calc(100% - 32px), var(--content));
  }

  .auth-header {
    padding: 20px 0;
  }

  .brand {
    min-width: 0;
    gap: 10px;
  }

  .brand-mark {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .brand-mark::before {
    width: 50px;
    height: 50px;
    top: 4px;
    left: 4px;
  }

  .brand-mark span {
    width: 43px;
    height: 43px;
  }

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

  .auth-layout {
    gap: 40px;
    padding: 30px 0 48px;
  }

  .auth-intro h1 {
    font-size: 44px;
  }

  .lead {
    font-size: 16px;
  }

  .hero-preview {
    box-shadow: 8px 8px 0 #080909;
  }

  .privacy-list {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px;
  }

  .privacy-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 7px;
    font-size: 11px;
  }

  .benefit-icon {
    width: 38px;
    height: 38px;
  }

  .benefit-icon-tor img {
    width: 36px;
    height: 36px;
  }

  .auth-panel {
    padding: 26px 20px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.24);
  }

  .auth-footer span:last-child,
  .site-footer span:last-child {
    display: none;
  }

  .header-inner {
    min-height: 64px;
  }

  .mirror-switch {
    width: 40px;
    max-width: 40px;
    min-height: 38px;
    grid-template-columns: 26px;
    justify-content: center;
    padding: 5px;
  }

  .mirror-switch-icon {
    width: 26px;
    height: 26px;
  }

  .mirror-switch span:last-child {
    display: none;
  }

  html.clearnet-site .user-panel .mirror-switch-compact {
    width: 40px;
    max-width: 40px;
    min-height: 40px;
    grid-template-columns: 28px;
    gap: 0;
    justify-content: center;
    padding: 5px;
  }

  html.clearnet-site .user-panel .mirror-switch-compact [data-mirror-label] {
    display: none;
  }

  .account-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-shell {
    width: 100%;
    min-height: calc(100vh - 64px);
    padding: 0;
  }

  .catalog-layout {
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 0;
  }

  .user-panel {
    width: 210px;
    padding: 0;
  }

  .catalog-main {
    padding: 22px 14px 60px;
  }

  .catalog-heading {
    gap: 34px;
  }

  .catalog-heading h1 {
    font-size: 38px;
  }

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

  .credentials-card {
    padding: 24px 18px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
  }

  .credentials-list > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

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

  .user-panel {
    position: static;
    height: auto;
    min-height: calc(100vh - 64px);
    order: -1;
    border-left: 0;
    border-bottom: 1px solid #293238;
  }
}

@media (max-width: 760px) {
  html {
    zoom: 1;
  }

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

  .catalog-main {
    width: 100%;
  }

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

  .mobile-panel-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid #39454a;
    border-radius: 50%;
    background: #171e21;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
  }

  .notification-bonus-cta {
    width: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    margin-left: auto;
    padding: 0;
  }

  .notification-bonus-cta span {
    display: none;
  }

  .site-header .notification-bonus-cta {
    display: none;
  }

  .user-panel .notification-bonus-panel {
    display: inline-flex;
    width: calc(100% - 28px);
    min-height: 40px;
    flex: 0 0 auto;
    margin: 10px 14px 0;
    padding: 0 12px;
  }

  .user-panel .notification-bonus-panel span {
    display: inline;
  }

  .site-header .tor-reward-cta {
    display: none;
  }

  .user-panel .tor-reward-panel {
    display: inline-flex;
  }

  .mobile-panel-toggle:hover,
  .mobile-panel-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    background: #1b2925;
    box-shadow: 0 0 0 3px rgba(75, 214, 161, 0.1);
  }

  .user-panel {
    position: fixed;
    z-index: 90;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 88vw);
    height: auto;
    max-height: 100dvh;
    min-height: 0;
    grid-template-rows: max-content minmax(0, 1fr) max-content;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow: hidden;
    visibility: hidden;
    border: 0;
    border-left: 1px solid #344047;
    background: #0e1315;
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.48);
    opacity: 0;
    transform: translateX(100%);
    transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease;
  }

  .user-panel-mobile-head {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 8px 14px;
    border-bottom: 1px solid #293238;
    color: #8f9ba0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .user-panel-mobile-head button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: #20282b;
    color: #c4ced1;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
  }

  .user-panel-bottom {
    align-self: stretch;
  }

  .user-panel-top {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .user-panel-top::-webkit-scrollbar {
    display: none;
  }

  .user-panel-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: block;
    visibility: hidden;
    background: rgba(2, 4, 4, 0.68);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  html.mobile-user-panel-open,
  body.mobile-user-panel-open {
    height: 100%;
    overflow: hidden;
  }

  body.mobile-user-panel-open .user-panel {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  body.mobile-user-panel-open .user-panel-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

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