* {
    box-sizing: border-box;
    }
  
  html,
  body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, Arial, sans-serif;
  background: #020711;
  color: #eef7ff;
  }
  
  body {
  overflow-x: hidden;
  }
  
  button {
  font-family: Inter, Arial, sans-serif;
  }
  
  .app {
  min-height: 100vh;
  display: flex;
  background:
  radial-gradient(
  circle at 72% 10%,
  rgba(0, 122, 255, .10),
  transparent 30%
  ),
  #020711;
  }
  
  /* =========================
  SIDEBAR
  ========================= */
  
  .sidebar {
  width: 244px;
  min-height: 100vh;
  
  border-right: 1px solid rgba(75, 157, 255, .14);
  
  background: rgba(3, 12, 25, .92);
  
  padding: 25px 18px;
  
  display: flex;
  flex-direction: column;
  }
  
  .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  
  font-size: 19px;
  font-weight: 800;
  
  letter-spacing: .5px;
  
  padding: 0 12px 30px;
  }
  
  .brand-x {
  font-size: 27px;
  font-weight: 800;
  
  color: #18a5ff;
  
  text-shadow:
  0 0 18px rgba(0, 153, 255, .8);
  }
  
  nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  }
  
  .nav-item {
  border: 0;
  background: transparent;
  
  color: #8ca2b8;
  
  text-align: left;
  
  padding: 13px 14px;
  
  border-radius: 10px;
  
  font: 500 14px Inter;
  
  cursor: pointer;
  
  display: flex;
  gap: 13px;
  align-items: center;
  
  transition: .2s;
  }
  
  .nav-item span {
  width: 18px;
  
  text-align: center;
  
  font-size: 18px;
  }
  
  .nav-item:hover {
  background: rgba(0, 125, 255, .08);
  color: #dff2ff;
  }
  
  .nav-item.active {
  color: #fff;
  
  background:
  linear-gradient(
  90deg,
  rgba(0, 126, 255, .28),
  rgba(0, 126, 255, .08)
  );
  
  box-shadow:
  inset 2px 0 #0797ff,
  0 0 22px rgba(0, 126, 255, .08);
  }
  
  .sidebar-bottom {
  margin-top: auto;
  }
  
  .support-mini {
  border: 1px solid rgba(52, 144, 235, .16);
  
  border-radius: 11px;
  
  padding: 12px;
  
  font-size: 14px;
  
  display: flex;
  gap: 9px;
  
  color: #d9ecff;
  }
  
  .support-mini small {
  display: block;
  
  color: #6e849a;
  
  font-size: 10px;
  
  margin-top: 3px;
  }
  
  .version {
  color: #405468;
  
  font-size: 10px;
  
  margin: 18px 12px 0;
  }
  
  /* =========================
  MAIN / TOPBAR
  ========================= */
  
  .main {
  flex: 1;
  min-width: 0;
  }
  
  .topbar {
  height: 74px;
  
  border-bottom: 1px solid rgba(75, 157, 255, .10);
  
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  padding: 0 42px;
  }
  
  .top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  }
  
  .icon-btn,
  .profile,
  .mobile-menu {
  border: 0;
  background: transparent;
  
  color: #b5c8db;
  
  cursor: pointer;
  }
  
  .icon-btn {
  font-size: 22px;
  width: 40px;
  }
  
  .profile {
  display: flex;
  align-items: center;
  gap: 9px;
  
  font: 500 13px Inter;
  }

  /* =========================
   PROFILE MENU
   ========================= */

.profile-menu {
    position: fixed;
    top: 74px;
    right: 28px;
  
    width: 280px;
  
    padding: 14px;
  
    background: rgba(13, 20, 30, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
  
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.45),
      0 0 30px rgba(56, 169, 255, 0.08);
  
    backdrop-filter: blur(18px);
  
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
  
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s ease;
  
    z-index: 9999;
  }
  
  .profile-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  
  
  /* PROFILE HEADER */
  
  .profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
  
    padding: 8px 8px 14px;
  
    margin-bottom: 6px;
  
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  
  .profile-head > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .profile-head b {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
  }
  
  .profile-head small {
    color: #718399;
    font-size: 11px;
  }
  
  
  /* BIG AVATAR */
  
  .avatar.big {
    width: 42px;
    height: 42px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    flex-shrink: 0;
  
    border-radius: 50%;
  
    background:
      linear-gradient(
        135deg,
        #38a9ff,
        #1677c8
      );
  
    color: #ffffff;
  
    font-size: 16px;
    font-weight: 800;
  
    box-shadow:
      0 0 18px rgba(56, 169, 255, 0.25);
  }
  
  
  /* MENU BUTTONS */
  
  .profile-menu > button {
    width: 100%;
  
    display: flex;
    align-items: center;
  
    padding: 11px 10px;
  
    border: 0;
    border-radius: 10px;
  
    background: transparent;
  
    color: #b5c8db;
  
    font: 500 13px Inter;
  
    text-align: left;
  
    cursor: pointer;
  
    transition:
      background 0.15s ease,
      color 0.15s ease;
  }
  
  .profile-menu > button:hover {
    background: rgba(56, 169, 255, 0.08);
    color: #ffffff;
  }
  
  .avatar {
  width: 34px;
  height: 34px;
  
  border-radius: 50%;
  
  display: grid;
  place-items: center;
  
  background:
  linear-gradient(
  145deg,
  #087cff,
  #062d67
  );
  
  border: 1px solid rgba(61, 168, 255, .45);
  
  box-shadow:
  0 0 20px rgba(0, 120, 255, .2);
  
  color: #fff;
  
  font-weight: 700;
  }
  
  /* =========================
  CONTENT
  ========================= */
  
  .content {
  max-width: 1180px;
  
  margin: 0 auto;
  
  padding: 42px 42px 70px;
  }
  
  .welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  margin-bottom: 26px;
  }
  
  .welcome h1 {
  font-size: 26px;
  
  margin: 0 0 7px;
  
  letter-spacing: -.6px;
  }
  
  .welcome p {
  margin: 0;
  
  color: #71869c;
  
  font-size: 13px;
  }
  
  .status-pill {
  font-size: 11px;
  
  color: #6fe8b2;
  
  background: rgba(0, 200, 120, .07);
  
  border: 1px solid rgba(0, 220, 140, .17);
  
  border-radius: 30px;
  
  padding: 9px 13px;
  }
  
  .status-pill i,
  .eyebrow i {
  display: inline-block;
  
  width: 7px;
  height: 7px;
  
  border-radius: 50%;
  
  background: #19dc91;
  
  box-shadow: 0 0 9px #19dc91;
  
  margin-right: 6px;
  }
  
  /* =========================
  SUBSCRIPTION
  ========================= */
  
  .subscription-card {
  position: relative;
  
  overflow: hidden;
  
  min-height: 285px;
  
  border: 1px solid rgba(18, 140, 255, .33);
  
  border-radius: 18px;
  
  background:
  linear-gradient(
  115deg,
  #061526 0%,
  #04101f 58%,
  #031426 100%
  );
  
  box-shadow:
  0 18px 55px rgba(0, 0, 0, .25),
  inset 0 1px rgba(255, 255, 255, .025);
  
  display: flex;
  }
  
  .card-glow {
  position: absolute;
  
  width: 480px;
  height: 260px;
  
  right: 100px;
  top: -130px;
  
  background: rgba(0, 125, 255, .14);
  
  filter: blur(70px);
  }
  
  .subscription-content {
  position: relative;
  
  padding: 27px 31px;
  
  z-index: 2;
  
  width: 59%;
  }
  
  .eyebrow {
  font-size: 10px;
  
  font-weight: 700;
  
  color: #63e6b0;
  
  letter-spacing: 1.1px;
  
  margin-bottom: 20px;
  }
  
  .remaining-label {
  font-size: 12px;
  
  color: #738aa1;
  }
  
  .remaining {
  font-size: 39px;
  
  font-weight: 800;
  
  letter-spacing: -1.7px;
  
  margin: 5px 0;
  }
  
  .remaining span {
  font-size: 15px;
  
  font-weight: 500;
  
  color: #8195a9;
  
  letter-spacing: 0;
  }
  
  .date {
  font-size: 12px;
  
  color: #71869b;
  }
  
  .divider {
  height: 1px;
  
  background: rgba(130, 170, 205, .11);
  
  margin: 20px 0 14px;
  }
  
  .sub-meta {
  display: flex;
  
  gap: 65px;
  
  margin-bottom: 17px;
  }
  
  .sub-meta div {
  display: flex;
  
  flex-direction: column;
  
  gap: 5px;
  }
  
  .sub-meta span {
  font-size: 10px;
  
  color: #61768a;
  }
  
  .sub-meta b {
  font-size: 12px;
  }
  
  /* =========================
  BUTTONS
  ========================= */
  
  .primary,
  .secondary {
  border: 0;
  
  border-radius: 9px;
  
  height: 41px;
  
  padding: 0 17px;
  
  font: 600 12px Inter;
  
  cursor: pointer;
  
  transition: .2s;
  }
  
  .primary {
  color: #fff;
  
  background:
  linear-gradient(
  100deg,
  #087cf3,
  #0062d9
  );
  
  box-shadow:
  0 8px 22px rgba(0, 105, 240, .22);
  }
  
  .primary:hover {
  filter: brightness(1.12);
  
  transform: translateY(-1px);
  }
  
  .primary span,
  .secondary span {
  margin-left: 12px;
  }
  
  .secondary {
  color: #a8d7ff;
  
  background: rgba(8, 105, 200, .08);
  
  border: 1px solid rgba(26, 139, 230, .28);
  }
  
  /* =========================
  SUBSCRIPTION ART
  ========================= */
  
  .subscription-art {
  position: relative;
  
  flex: 1;
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  overflow: hidden;
  }
  
  .subscription-art:before {
  content: "";
  
  position: absolute;
  
  width: 250px;
  height: 250px;
  
  border-radius: 50%;
  
  background:
  radial-gradient(
  circle,
  #087dfd 0%,
  rgba(0, 125, 255, .17) 34%,
  transparent 68%
  );
  
  filter: blur(4px);
  }
  
  .x-orb {
  position: relative;
  
  width: 140px;
  height: 140px;
  
  border-radius: 50%;
  
  display: grid;
  
  place-items: center;
  
  font-size: 72px;
  
  font-weight: 800;
  
  font-style: italic;
  
  color: #17a8ff;
  
  text-shadow:
  0 0 28px #078cff;
  
  border: 1px solid rgba(0, 156, 255, .28);
  
  box-shadow:
  0 0 55px rgba(0, 123, 255, .22),
  inset 0 0 35px rgba(0, 129, 255, .13);
  }
  
  .art-label {
  position: absolute;
  
  bottom: 28px;
  right: 30px;
  
  color: #547087;
  
  font-size: 9px;
  }
  
  /* =========================
  STATS
  ========================= */
  
  .stats {
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  
  gap: 14px;
  
  margin: 15px 0;
  }
  
  .stat-card {
  min-height: 103px;
  
  border: 1px solid rgba(69, 139, 202, .15);
  
  border-radius: 13px;
  
  background: rgba(5, 18, 33, .75);
  
  padding: 16px;
  
  position: relative;
  }
  
  .stat-icon {
  position: absolute;
  
  right: 15px;
  top: 15px;
  
  color: #0697ff;
  
  font-size: 20px;
  }
  
  .stat-card span {
  display: block;
  
  color: #647a91;
  
  font-size: 10px;
  
  margin-bottom: 7px;
  }
  
  .stat-card strong {
  display: block;
  
  font-size: 15px;
  }
  
  .stat-card small {
  display: block;
  
  color: #597087;
  
  font-size: 10px;
  
  margin-top: 4px;
  }
  
  .stat-card .online {
  color: #62e8b0;
  }
  
  /* =========================
  ACTION CARDS
  ========================= */
  
  .action-grid {
  display: grid;
  
  grid-template-columns: 1.55fr 1fr;
  
  gap: 14px;
  }
  
  .action-card {
  border: 1px solid rgba(69, 139, 202, .15);
  
  border-radius: 14px;
  
  background: rgba(5, 18, 33, .72);
  
  padding: 22px;
  
  position: relative;
  
  min-height: 190px;
  }
  
  .action-icon {
  width: 38px;
  height: 38px;
  
  border-radius: 10px;
  
  display: grid;
  
  place-items: center;
  
  background: rgba(0, 128, 255, .11);
  
  color: #0b9cff;
  
  font-size: 20px;
  
  margin-bottom: 15px;
  }
  
  .action-card h2 {
  font-size: 15px;
  
  margin: 0 0 7px;
  }
  
  .action-card p {
  font-size: 11px;
  
  line-height: 1.6;
  
  color: #6d8398;
  
  margin: 0 0 17px;
  }
  
  .connect-card .primary {
  position: absolute;
  
  bottom: 20px;
  left: 22px;
  }
  
  .referral-card {
  background:
  linear-gradient(
  145deg,
  rgba(5, 20, 37, .9),
  rgba(3, 15, 29, .8)
  );
  }
  
  .ref-stats {
  display: flex;
  
  gap: 35px;
  
  margin: 9px 0 15px;
  }
  
  .ref-stats strong {
  display: block;
  
  font-size: 19px;
  }
  
  .ref-stats span {
  font-size: 9px;
  
  color: #61778b;
  }
  
  /* =========================
  CONNECTION PAGE
  ========================= */
  
  .connect-page {
  animation: pageFade .25s ease;
  }
  
  @keyframes pageFade {
  from {
  opacity: 0;
  transform: translateY(5px);
  }
  
  to {
  opacity: 1;
  transform: translateY(0);
  }
  }
  
  .page-header {
  display: flex;
  
  align-items: flex-end;
  
  justify-content: space-between;
  
  margin-bottom: 24px;
  }
  
  .page-header h1 {
  font-size: 26px;
  
  margin: 0 0 7px;
  
  letter-spacing: -.6px;
  }
  
  .page-header p {
  color: #71869c;
  
  font-size: 13px;
  
  margin: 0;
  }
  
  .connection-status {
  display: flex;
  
  align-items: center;
  
  gap: 8px;
  
  color: #62e8b0;
  
  font-size: 11px;
  
  padding: 9px 13px;
  
  border: 1px solid rgba(0, 220, 140, .17);
  
  background: rgba(0, 200, 120, .07);
  
  border-radius: 30px;
  }
  
  .connection-status i {
  width: 7px;
  height: 7px;
  
  display: block;
  
  border-radius: 50%;
  
  background: #19dc91;
  
  box-shadow: 0 0 9px #19dc91;
  }
  
  /* DEVICE SELECTOR */
  
  .device-tabs {
  display: grid;
  
  grid-template-columns: repeat(4, 1fr);
  
  gap: 10px;
  
  margin-bottom: 15px;
  }
  
  .device-tab {
  border: 1px solid rgba(69, 139, 202, .15);
  
  border-radius: 12px;
  
  background: rgba(5, 18, 33, .72);
  
  color: #8197ab;
  
  min-height: 70px;
  
  cursor: pointer;
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  gap: 10px;
  
  font-size: 12px;
  
  transition: .2s;
  }
  
  .device-tab:hover {
  color: #dff2ff;
  
  border-color: rgba(0, 137, 255, .3);
  
  background: rgba(0, 110, 220, .07);
  }
  
  .device-tab.active {
  color: #fff;
  
  border-color: rgba(0, 145, 255, .5);
  
  background:
  linear-gradient(
  145deg,
  rgba(0, 126, 255, .17),
  rgba(0, 75, 150, .08)
  );
  
  box-shadow:
  inset 0 0 25px rgba(0, 126, 255, .06),
  0 0 25px rgba(0, 126, 255, .05);
  }
  
  .device-tab-icon {
  font-size: 21px;
  }
  
  .device-tab-text strong {
  display: block;
  
  font-size: 12px;
  
  margin-bottom: 3px;
  }
  
  .device-tab-text small {
  display: block;
  
  color: #5e7489;
  
  font-size: 9px;
  }
  
  /* CONNECTION HERO */
  
  .connection-hero {
  position: relative;
  
  overflow: hidden;
  
  border: 1px solid rgba(18, 140, 255, .28);
  
  border-radius: 16px;
  
  background:
  linear-gradient(
  120deg,
  #061729,
  #041221 62%,
  #03101e
  );
  
  min-height: 260px;
  
  padding: 26px;
  
  display: grid;
  
  grid-template-columns: 1fr 260px;
  
  gap: 25px;
  
  margin-bottom: 15px;
  }
  
  .connection-hero:before {
  content: "";
  
  position: absolute;
  
  width: 330px;
  height: 330px;
  
  right: 90px;
  top: -180px;
  
  border-radius: 50%;
  
  background: rgba(0, 126, 255, .13);
  
  filter: blur(65px);
  }
  
  .connection-main {
  position: relative;
  
  z-index: 2;
  }
  
  .connection-label {
  display: inline-flex;
  
  align-items: center;
  
  gap: 7px;
  
  color: #65e8b2;
  
  font-size: 9px;
  
  font-weight: 700;
  
  letter-spacing: 1px;
  
  margin-bottom: 14px;
  }
  
  .connection-label i {
  width: 7px;
  height: 7px;
  
  border-radius: 50%;
  
  background: #19dc91;
  
  box-shadow: 0 0 9px #19dc91;
  }
  
  .connection-main h2 {
  margin: 0 0 8px;
  
  font-size: 22px;
  
  letter-spacing: -.5px;
  }
  
  .connection-main > p {
  margin: 0 0 22px;
  
  max-width: 550px;
  
  color: #71879b;
  
  font-size: 11px;
  
  line-height: 1.65;
  }
  
  .connection-actions {
  display: flex;
  
  gap: 9px;
  
  flex-wrap: wrap;
  }
  
  .connection-actions .primary {
  min-width: 160px;
  }
  
  .connection-actions .secondary {
  min-width: 150px;
  }
  
  .connection-info {
  position: relative;
  
  z-index: 2;
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  }
  
  .connection-orb {
  width: 155px;
  height: 155px;
  
  border-radius: 50%;
  
  display: grid;
  
  place-items: center;
  
  position: relative;
  
  border: 1px solid rgba(0, 153, 255, .25);
  
  background:
  radial-gradient(
  circle,
  rgba(0, 136, 255, .16),
  rgba(0, 40, 90, .04) 60%,
  transparent 70%
  );
  
  box-shadow:
  0 0 55px rgba(0, 126, 255, .15),
  inset 0 0 45px rgba(0, 126, 255, .08);
  }
  
  .connection-orb:before,
  .connection-orb:after {
  content: "";
  
  position: absolute;
  
  border-radius: 50%;
  
  border: 1px solid rgba(0, 153, 255, .13);
  }
  
  .connection-orb:before {
  width: 185px;
  height: 185px;
  }
  
  .connection-orb:after {
  width: 215px;
  height: 215px;
  
  border-color: rgba(0, 153, 255, .07);
  }
  
  .connection-orb-x {
  font-size: 62px;
  
  font-style: italic;
  
  font-weight: 800;
  
  color: #17a8ff;
  
  text-shadow:
  0 0 28px #078cff;
  }
  
  /* CONFIG CARD */
  
  .config-card {
  border: 1px solid rgba(69, 139, 202, .15);
  
  border-radius: 14px;
  
  background: rgba(5, 18, 33, .72);
  
  padding: 21px;
  
  margin-bottom: 15px;
  }
  
  .config-top {
  display: flex;
  
  align-items: center;
  
  justify-content: space-between;
  
  margin-bottom: 15px;
  }
  
  .config-top h3 {
  font-size: 14px;
  
  margin: 0 0 4px;
  }
  
  .config-top p {
  color: #62798e;
  
  font-size: 10px;
  
  margin: 0;
  }
  
  .config-badge {
  font-size: 9px;
  
  color: #65e8b2;
  
  border: 1px solid rgba(0, 220, 140, .16);
  
  background: rgba(0, 200, 120, .06);
  
  border-radius: 20px;
  
  padding: 7px 10px;
  }
  
  .config-row {
  display: grid;
  
  grid-template-columns: 1fr 180px;
  
  gap: 10px;
  }
  
  .config-box {
  min-height: 62px;
  
  border-radius: 10px;
  
  background: #020b16;
  
  border: 1px solid rgba(72, 137, 190, .13);
  
  padding: 11px 13px;
  
  display: flex;
  
  align-items: center;
  
  justify-content: space-between;
  
  gap: 10px;
  }
  
  .config-text {
  min-width: 0;
  }
  
  .config-text span {
  display: block;
  
  color: #50677c;
  
  font-size: 8px;
  
  margin-bottom: 5px;
  }
  
  .config-text code {
  display: block;
  
  max-width: 100%;
  
  overflow: hidden;
  
  text-overflow: ellipsis;
  
  white-space: nowrap;
  
  color: #a7c7e2;
  
  font: 10px monospace;
  }
  
  .copy-btn {
  flex: 0 0 auto;
  
  border: 1px solid rgba(0, 136, 255, .2);
  
  border-radius: 7px;
  
  background: rgba(0, 126, 255, .08);
  
  color: #74bfff;
  
  height: 32px;
  
  padding: 0 10px;
  
  cursor: pointer;
  
  font-size: 10px;
  
  transition: .2s;
  }
  
  .copy-btn:hover {
  background: rgba(0, 126, 255, .16);
  
  color: #fff;
  }
  
  /* CONNECTION METHODS */
  
  .methods-title {
  font-size: 14px;
  
  margin: 25px 0 11px;
  }
  
  .methods-grid {
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  
  gap: 12px;
  }
  
  .method-card {
  position: relative;
  
  border: 1px solid rgba(69, 139, 202, .15);
  
  border-radius: 13px;
  
  background: rgba(5, 18, 33, .72);
  
  padding: 18px;
  
  min-height: 150px;
  
  transition: .2s;
  }
  
  .method-card:hover {
  transform: translateY(-2px);
  
  border-color: rgba(0, 136, 255, .28);
  
  box-shadow:
  0 10px 30px rgba(0, 80, 170, .08);
  }
  
  .method-card.recommended {
  border-color: rgba(0, 145, 255, .32);
  
  background:
  linear-gradient(
  145deg,
  rgba(0, 112, 230, .08),
  rgba(5, 18, 33, .72)
  );
  }
  
  .recommended-badge {
  position: absolute;
  
  right: 12px;
  top: 12px;
  
  color: #65c8ff;
  
  font-size: 8px;
  
  border-radius: 10px;
  
  padding: 4px 7px;
  
  background: rgba(0, 126, 255, .10);
  
  border: 1px solid rgba(0, 126, 255, .15);
  }
  
  .method-icon {
  width: 36px;
  height: 36px;
  
  display: grid;
  
  place-items: center;
  
  border-radius: 9px;
  
  background: rgba(0, 126, 255, .09);
  
  color: #0b9cff;
  
  font-size: 18px;
  
  margin-bottom: 12px;
  }
  
  .method-card h3 {
  font-size: 12px;
  
  margin: 0 0 6px;
  }
  
  .method-card p {
  color: #61788d;
  
  font-size: 9px;
  
  line-height: 1.55;
  
  margin: 0;
  }
  
  /* INSTRUCTIONS */
  
  .instructions-card {
  margin-top: 15px;
  
  border: 1px solid rgba(69, 139, 202, .15);
  
  border-radius: 14px;
  
  background: rgba(5, 18, 33, .72);
  
  padding: 21px;
  }
  
  .instructions-header {
  margin-bottom: 18px;
  }
  
  .instructions-header h3 {
  font-size: 14px;
  
  margin: 0 0 4px;
  }
  
  .instructions-header p {
  color: #62798e;
  
  font-size: 10px;
  
  margin: 0;
  }
  
  .steps {
  display: grid;
  
  grid-template-columns: repeat(4, 1fr);
  
  gap: 10px;
  }
  
  .step {
  position: relative;
  
  min-height: 110px;
  
  padding: 14px;
  
  border-radius: 10px;
  
  background: rgba(2, 11, 22, .55);
  
  border: 1px solid rgba(72, 137, 190, .09);
  }
  
  .step-number {
  width: 26px;
  height: 26px;
  
  display: grid;
  
  place-items: center;
  
  border-radius: 8px;
  
  color: #55b9ff;
  
  background: rgba(0, 126, 255, .10);
  
  font-size: 10px;
  
  font-weight: 700;
  
  margin-bottom: 11px;
  }
  
  .step strong {
  display: block;
  
  font-size: 10px;
  
  margin-bottom: 5px;
  }
  
  .step p {
  color: #5f768b;
  
  font-size: 8px;
  
  line-height: 1.5;
  
  margin: 0;
  }
  
  /* QR */
  
  .qr-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
  
    display: none;
    align-items: center;
    justify-content: center;
  
    padding: 20px;
  
    background: rgba(0, 5, 12, .72);
    backdrop-filter: blur(8px);
  }
  
  .qr-modal.show {
    display: flex;
  }

  /* =========================
   PAYMENT PAGE
   ========================= */

.payment-page {
    width: 100%;
}

.payment-current {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 28px;
    padding: 28px 32px;
    border: 1px solid rgba(73, 166, 255, .18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 50%, rgba(0, 157, 255, .10), transparent 35%),
        rgba(7, 17, 31, .82);
    overflow: hidden;
}

.payment-current::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    top: -130px;
    border-radius: 50%;
    background: rgba(0, 174, 255, .08);
    filter: blur(45px);
}

.payment-current-info {
    position: relative;
    z-index: 1;
}

.payment-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: #62e8b0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.payment-label i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #62e8b0;
    box-shadow: 0 0 12px rgba(98, 232, 176, .8);
}

.payment-current-info h2 {
    margin: 0 0 8px;
    font-size: 28px;
    color: #fff;
}

.payment-current-info p {
    margin: 0;
    color: #7f91a7;
    font-size: 14px;
}

.payment-current-info strong {
    color: #dceaff;
}

.payment-days {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.payment-days strong {
    font-size: 48px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 30px rgba(0, 174, 255, .35);
}

.payment-days span {
    color: #71849b;
    font-size: 13px;
    line-height: 1.45;
}

.payment-section {
    margin-top: 34px;
}

.section-heading {
    margin-bottom: 17px;
}

.section-heading h2 {
    margin: 0 0 6px;
    color: #f4f8ff;
    font-size: 19px;
}

.section-heading p {
    margin: 0;
    color: #708198;
    font-size: 13px;
}

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

.tariff-card {
    position: relative;
    min-height: 155px;
    padding: 20px;
    text-align: left;
    border: 1px solid rgba(104, 133, 165, .14);
    border-radius: 18px;
    background: rgba(7, 16, 29, .76);
    color: #fff;
    cursor: pointer;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.tariff-card:hover {
    transform: translateY(-2px);
    border-color: rgba(64, 177, 255, .35);
}

.tariff-card.active {
    border-color: rgba(43, 169, 255, .75);
    background:
        linear-gradient(
            145deg,
            rgba(15, 57, 88, .72),
            rgba(6, 20, 36, .9)
        );
    box-shadow:
        0 0 0 1px rgba(43, 169, 255, .10),
        0 12px 35px rgba(0, 130, 255, .10);
}

.tariff-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tariff-top span {
    color: #dbe8f7;
    font-size: 14px;
    font-weight: 700;
}

.tariff-top b {
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(98, 232, 176, .10);
    color: #62e8b0;
    font-size: 10px;
}

.tariff-price {
    margin-top: 18px;
    color: #fff;
    font-size: 25px;
    font-weight: 800;
}

.tariff-per {
    margin-top: 5px;
    color: #6e8095;
    font-size: 12px;
}

.tariff-check {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: transparent;
    font-size: 12px;
}

.tariff-card.active .tariff-check {
    border-color: #2caeff;
    background: #2caeff;
    color: #fff;
    box-shadow: 0 0 14px rgba(44, 174, 255, .35);
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.payment-method {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 18px 20px;
    text-align: left;
    border: 1px solid rgba(104, 133, 165, .14);
    border-radius: 17px;
    background: rgba(7, 16, 29, .76);
    color: #fff;
    cursor: pointer;
    transition: .2s ease;
}

.payment-method:hover {
    border-color: rgba(64, 177, 255, .35);
}

.payment-method.active {
    border-color: rgba(43, 169, 255, .65);
    background: rgba(9, 40, 65, .65);
}

.payment-method-icon {
    display: grid;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 13px;
    background: rgba(44, 174, 255, .09);
    font-size: 20px;
}

.payment-method strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.payment-method span {
    display: block;
    color: #718299;
    font-size: 12px;
}

.payment-method-check {
    display: grid;
    width: 22px;
    height: 22px;
    margin-left: auto;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: transparent;
    font-size: 11px;
}

.payment-method.active .payment-method-check {
    border-color: #2caeff;
    background: #2caeff;
    color: #fff;
}

.payment-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 30px;
    padding: 22px 24px;
    border: 1px solid rgba(73, 166, 255, .17);
    border-radius: 19px;
    background: rgba(8, 19, 33, .9);
}

.payment-summary-info span {
    display: block;
    margin-bottom: 4px;
    color: #718399;
    font-size: 12px;
}

.payment-summary-info strong {
    display: inline-block;
    margin-right: 10px;
    color: #fff;
    font-size: 27px;
}

.payment-summary-info small {
    color: #718399;
    font-size: 12px;
}

.payment-button {
    min-width: 190px;
}

.payment-security {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 17px 20px;
    border: 1px solid rgba(104, 133, 165, .10);
    border-radius: 16px;
    background: rgba(5, 13, 24, .55);
}

.security-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    background: rgba(98, 232, 176, .08);
}

.payment-security strong {
    display: block;
    margin-bottom: 4px;
    color: #cddbeb;
    font-size: 13px;
}

.payment-security p {
    max-width: 720px;
    margin: 0;
    color: #64768c;
    font-size: 12px;
    line-height: 1.55;
}


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

@media (max-width: 950px) {

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

}

@media (max-width: 600px) {

    .payment-current {
        align-items: flex-start;
        flex-direction: column;
        padding: 23px;
    }

    .payment-days {
        margin-top: 5px;
    }

    .payment-days strong {
        font-size: 38px;
    }

    .payment-methods {
        grid-template-columns: 1fr;
    }

    .payment-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-button {
        width: 100%;
    }

}

@media (max-width: 430px) {

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

    .tariff-card {
        min-height: 135px;
    }

    .payment-summary-info strong {
        font-size: 24px;
    }

}
/* =========================
   REFERRALS PAGE
   ========================= */

   .referrals-page {
    width: 100%;
}

.referral-hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 28px;
    padding: 34px;
    border: 1px solid rgba(55, 174, 255, .2);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(0, 157, 255, .13),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(8, 25, 43, .96),
            rgba(4, 12, 23, .96)
        );
    overflow: hidden;
}

.referral-hero::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -120px;
    top: -150px;
    border-radius: 50%;
    background: rgba(0, 160, 255, .09);
    filter: blur(55px);
}

.referral-hero-content {
    position: relative;
    z-index: 2;
    max-width: 730px;
}

.referral-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #4ab9ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.referral-hero h2 {
    margin: 0;
    color: #fff;
    font-size: 31px;
    line-height: 1.15;
}

.referral-hero p {
    max-width: 650px;
    margin: 14px 0 24px;
    color: #8092a8;
    font-size: 14px;
    line-height: 1.65;
}

.referral-hero p strong {
    color: #62e8b0;
}

.referral-link-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid rgba(104, 133, 165, .18);
    border-radius: 15px;
    background: rgba(2, 9, 17, .65);
}

.referral-link-info {
    min-width: 0;
    flex: 1;
    padding-left: 10px;
}

.referral-link-info span {
    display: block;
    margin-bottom: 5px;
    color: #61758b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.referral-link-info code {
    display: block;
    overflow: hidden;
    color: #b9dfff;
    font-family: monospace;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-actions {
    margin-top: 14px;
}

.referral-actions .primary {
    min-width: 170px;
}

.referral-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
}

.referral-orb {
    display: flex;
    width: 175px;
    height: 175px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid rgba(53, 182, 255, .45);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(33, 158, 255, .18),
            rgba(3, 17, 31, .95) 68%
        );
    box-shadow:
        0 0 45px rgba(0, 149, 255, .13),
        inset 0 0 35px rgba(0, 149, 255, .08);
}

.referral-orb div {
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 25px rgba(53, 184, 255, .45);
}

.referral-orb span {
    margin-top: 8px;
    color: #62bff1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}


/* =========================
   REFERRAL STATS
   ========================= */

.referral-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.referral-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border: 1px solid rgba(104, 133, 165, .13);
    border-radius: 18px;
    background: rgba(7, 16, 29, .75);
}

.referral-stat-icon {
    display: grid;
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 13px;
    background: rgba(41, 169, 255, .09);
    font-size: 21px;
}

.referral-stat span {
    display: block;
    margin-bottom: 4px;
    color: #6d8096;
    font-size: 11px;
}

.referral-stat strong {
    margin-right: 5px;
    color: #fff;
    font-size: 25px;
}

.referral-stat small {
    color: #61758b;
    font-size: 11px;
}


/* =========================
   REFERRAL LIST
   ========================= */

.referral-list-card {
    margin-top: 32px;
    padding: 25px;
    border: 1px solid rgba(104, 133, 165, .13);
    border-radius: 20px;
    background: rgba(7, 16, 29, .75);
}

.referral-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(104, 133, 165, .09);
}

.referral-list-header h2 {
    margin: 0 0 5px;
    color: #f1f6fc;
    font-size: 18px;
}

.referral-list-header p {
    margin: 0;
    color: #697c91;
    font-size: 12px;
}

.referral-count {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 10px;
    background: rgba(43, 169, 255, .1);
    color: #55bbff;
    font-size: 13px;
    font-weight: 800;
}

.referral-user {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(104, 133, 165, .07);
}

.referral-user:last-child {
    border-bottom: none;
}

.referral-user-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    place-items: center;
    border: 1px solid rgba(55, 175, 255, .25);
    border-radius: 50%;
    background: rgba(25, 107, 158, .18);
    color: #9edbff;
    font-size: 14px;
    font-weight: 700;
}

.referral-user-info {
    min-width: 0;
    flex: 1;
}

.referral-user-info strong {
    display: block;
    margin-bottom: 4px;
    color: #dce8f5;
    font-size: 13px;
}

.referral-user-info span {
    display: block;
    color: #65788e;
    font-size: 11px;
}

.referral-user-reward {
    padding: 6px 9px;
    border-radius: 7px;
    background: rgba(98, 232, 176, .08);
    color: #62e8b0;
    font-size: 11px;
    font-weight: 700;
}

.referral-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid rgba(104, 133, 165, .12);
    border-radius: 11px;
    background: rgba(255,255,255,.015);
    color: #8ba1b8;
    font-size: 12px;
    cursor: pointer;
    transition: .2s ease;
}

.referral-more:hover {
    border-color: rgba(43, 169, 255, .3);
    color: #53baff;
}


/* =========================
   HOW IT WORKS
   ========================= */

.referral-how {
    margin-top: 32px;
    padding: 27px;
    border: 1px solid rgba(104, 133, 165, .11);
    border-radius: 20px;
    background: rgba(5, 13, 24, .58);
}

.referral-how-header {
    margin-bottom: 23px;
}

.referral-how-header h2 {
    margin: 0 0 5px;
    color: #f1f6fc;
    font-size: 18px;
}

.referral-how-header p {
    margin: 0;
    color: #697c91;
    font-size: 12px;
}

.referral-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.referral-step {
    position: relative;
    padding: 21px;
    border: 1px solid rgba(104, 133, 165, .09);
    border-radius: 16px;
    background: rgba(8, 18, 31, .65);
}

.referral-step-number {
    position: absolute;
    top: 17px;
    right: 18px;
    color: #34475c;
    font-size: 11px;
    font-weight: 800;
}

.referral-step-icon {
    display: grid;
    width: 43px;
    height: 43px;
    margin-bottom: 17px;
    place-items: center;
    border-radius: 12px;
    background: rgba(42, 169, 255, .09);
    font-size: 19px;
}

.referral-step h3 {
    margin: 0 0 7px;
    color: #d9e5f2;
    font-size: 14px;
}

.referral-step p {
    margin: 0;
    color: #687b91;
    font-size: 11px;
    line-height: 1.55;
}


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

@media (max-width: 950px) {

    .referral-hero {
        gap: 20px;
    }

    .referral-visual {
        min-width: 170px;
    }

    .referral-orb {
        width: 145px;
        height: 145px;
    }

    .referral-orb div {
        font-size: 37px;
    }

}

@media (max-width: 750px) {

    .referral-hero {
        flex-direction: column;
    }

    .referral-visual {
        display: none;
    }

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

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

}

@media (max-width: 600px) {

    .referral-hero {
        padding: 24px;
    }

    .referral-hero h2 {
        font-size: 25px;
    }

    .referral-link-box {
        align-items: stretch;
        flex-direction: column;
    }

    .referral-link-info {
        padding: 8px;
    }

    .referral-link-info code {
        font-size: 10px;
    }

    .referral-link-box .copy-btn {
        width: 100%;
    }

    .referral-list-card,
    .referral-how {
        padding: 20px;
    }

}

@media (max-width: 430px) {

    .referral-user {
        align-items: flex-start;
    }

    .referral-user-reward {
        font-size: 10px;
    }

}
/* =========================
   DEVICES PAGE
========================= */

.devices-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.devices-limit-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 28px;
    border: 1px solid rgba(0, 212, 255, .14);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(0, 212, 255, .08),
            rgba(10, 15, 25, .95)
        );
}

.devices-limit-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.devices-limit-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(0, 212, 255, .08);
    border: 1px solid rgba(0, 212, 255, .15);
    font-size: 28px;
}

.devices-limit-label {
    display: block;
    margin-bottom: 6px;
    color: #7e8a9d;
    font-size: 13px;
}

.devices-limit-number {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.devices-limit-number strong {
    font-size: 34px;
}

.devices-limit-number span {
    color: #8b97aa;
}

.devices-progress {
    align-self: center;
}

.devices-progress-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #8b97aa;
    font-size: 13px;
}

.devices-progress-top strong {
    color: #00d4ff;
}

.devices-progress-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
}

.devices-progress-fill {
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, .5);
}

.devices-progress p {
    margin: 10px 0 0;
    color: #6f7b8e;
    font-size: 12px;
}

.devices-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.available-devices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.available-device {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: rgba(10, 15, 24, .72);
    transition: .2s ease;
}

.available-device:hover {
    border-color: rgba(0, 212, 255, .25);
    transform: translateY(-2px);
}

.available-device-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    font-size: 22px;
}

.available-device-info {
    flex: 1;
    min-width: 0;
}

.available-device-info strong {
    display: block;
    margin-bottom: 5px;
}

.available-device-info span {
    color: #737f91;
    font-size: 12px;
}

.device-connect-btn {
    padding: 10px 15px;
    border: 1px solid rgba(0, 212, 255, .2);
    border-radius: 10px;
    background: rgba(0, 212, 255, .07);
    color: #00d4ff;
    cursor: pointer;
    transition: .2s ease;
}

.device-connect-btn:hover {
    background: rgba(0, 212, 255, .14);
}

.active-devices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.active-device {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: rgba(10, 15, 24, .72);
}

.active-device-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(0, 212, 255, .07);
    font-size: 22px;
}

.active-device-info {
    flex: 1;
}

.active-device-info strong {
    display: block;
    margin-bottom: 5px;
}

.active-device-info span {
    display: block;
    color: #737f91;
    font-size: 12px;
}

.active-device-info small {
    display: inline-block;
    margin-top: 6px;
    color: #58e6a5;
    font-size: 11px;
}

.active-device-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #58e6a5;
    font-size: 12px;
}

.devices-info-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
}

.devices-info-icon {
    font-size: 20px;
}

.devices-info-card strong {
    display: block;
    margin-bottom: 6px;
}

.devices-info-card p {
    margin: 0;
    color: #737f91;
    font-size: 13px;
    line-height: 1.6;
}


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

@media (max-width: 800px) {

    .devices-limit-card {
        grid-template-columns: 1fr;
    }

    .available-devices {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .devices-limit-card {
        padding: 20px;
    }

    .available-device {
        padding: 16px;
    }

    .device-connect-btn {
        padding: 9px 12px;
        font-size: 12px;
    }

    .active-device {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .active-device-status {
        width: 100%;
        margin-left: 66px;
    }

}
/* =========================
   DEVICE UPGRADE
========================= */

.device-upgrade-card {
    padding: 24px;
    border: 1px solid rgba(0, 212, 255, .14);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(0, 212, 255, .055),
            rgba(10, 15, 24, .9)
        );
}

.device-upgrade-content {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.device-upgrade-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(0, 212, 255, .09);
    border: 1px solid rgba(0, 212, 255, .18);
    color: #00d4ff;
    font-size: 27px;
}

.device-upgrade-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 5px;
}

.device-upgrade-info p {
    margin: 0;
    color: #788496;
    font-size: 13px;
}

.device-upgrade-info strong {
    color: #00d4ff;
}

.device-plan-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.device-plan {
    position: relative;
    padding: 18px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
    color: inherit;
    cursor: pointer;
    transition: .2s ease;
}

.device-plan:hover {
    border-color: rgba(0, 212, 255, .25);
}

.device-plan.active {
    border-color: rgba(0, 212, 255, .55);
    background: rgba(0, 212, 255, .07);
    box-shadow: 0 0 25px rgba(0, 212, 255, .06);
}

.device-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.device-plan-top span {
    font-size: 15px;
    font-weight: 700;
}

.device-plan-top strong {
    color: #00d4ff;
    font-size: 17px;
}

.device-plan-top b {
    margin-left: 5px;
    color: #58e6a5;
    font-size: 11px;
}

.device-plan small {
    color: #707c8f;
    font-size: 12px;
}

.device-plan-badge {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 4px 8px;
    border-radius: 7px;
    background: #00d4ff;
    color: #031018;
    font-size: 10px;
    font-weight: 800;
}

.device-upgrade-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #7c8798;
    font-size: 13px;
}

.device-upgrade-footer strong {
    color: #e9f1fa;
}

.device-disable-btn {
    padding: 11px 16px;
    border: 1px solid rgba(255, 100, 100, .18);
    border-radius: 10px;
    background: rgba(255, 80, 80, .05);
    color: #ff8d8d;
    cursor: pointer;
    transition: .2s ease;
}

.device-disable-btn:hover {
    border-color: rgba(255, 100, 100, .35);
    background: rgba(255, 80, 80, .09);
}


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

@media (max-width: 700px) {

    .device-plan-options {
        grid-template-columns: 1fr;
    }

    .device-upgrade-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .device-upgrade-footer button {
        width: 100%;
    }

}

@media (max-width: 430px) {

    .device-upgrade-card {
        padding: 18px;
    }

    .device-upgrade-content {
        align-items: flex-start;
    }

}
/* =========================
   SUPPORT PAGE
========================= */

.support-page {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.support-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 250px;
    padding: 32px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 212, 255, .14);
    border-radius: 24px;
    background:
        linear-gradient(
            120deg,
            rgba(0, 212, 255, .07),
            rgba(8, 13, 22, .96)
        );
}

.support-hero-content {
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.support-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #00d4ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.support-hero h2 {
    margin: 0 0 10px;
    font-size: 32px;
}

.support-hero p {
    max-width: 560px;
    margin: 0 0 22px;
    color: #7c889a;
    line-height: 1.6;
}

.support-telegram-btn {
    padding: 13px 20px;
}

.support-visual {
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    flex: 0 0 190px;
}

.support-orb {
    width: 140px;
    height: 140px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 212, 255, .35);
    border-radius: 50%;
    background: rgba(0, 212, 255, .04);
    color: #00d4ff;
    font-size: 60px;
    box-shadow:
        0 0 40px rgba(0, 212, 255, .08),
        inset 0 0 30px rgba(0, 212, 255, .04);
}

.support-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.support-topics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.support-topic {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 17px;
    background: rgba(10, 15, 24, .72);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: .2s ease;
}

.support-topic:hover {
    border-color: rgba(0, 212, 255, .25);
    transform: translateY(-2px);
}

.support-topic-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(0, 212, 255, .07);
    font-size: 21px;
}

.support-topic div:nth-child(2) {
    flex: 1;
}

.support-topic strong {
    display: block;
    margin-bottom: 5px;
}

.support-topic span {
    color: #737f91;
    font-size: 12px;
}

.support-topic b {
    color: #596577;
    font-size: 24px;
    font-weight: 400;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(10, 15, 24, .72);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.faq-question b {
    color: #00d4ff;
    font-size: 20px;
    font-weight: 400;
    transition: .2s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: #788496;
    font-size: 13px;
    line-height: 1.7;
    transition: .25s ease;
}

.faq-item.open .faq-answer {
    max-height: 150px;
    padding: 0 20px 18px;
}

.faq-item.open .faq-question b {
    transform: rotate(45deg);
}

.support-contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(0, 212, 255, .12);
    border-radius: 18px;
    background: rgba(0, 212, 255, .035);
}

.support-contact-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(0, 212, 255, .08);
    font-size: 21px;
}

.support-contact-info {
    flex: 1;
}

.support-contact-info strong {
    display: block;
    margin-bottom: 5px;
}

.support-contact-info p {
    margin: 0;
    color: #737f91;
    font-size: 12px;
}

.support-ticket-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    padding: 25px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    background: rgba(10, 15, 24, .72);
}

.support-ticket-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(88, 230, 165, .08);
    color: #58e6a5;
    font-size: 20px;
}

.support-ticket-empty strong {
    margin-bottom: 6px;
}

.support-ticket-empty span {
    max-width: 450px;
    color: #6f7b8e;
    font-size: 12px;
    line-height: 1.6;
}


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

@media (max-width: 750px) {

    .support-hero {
        padding: 24px;
    }

    .support-visual {
        display: none;
    }

    .support-topics {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .support-contact-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .support-contact-info {
        min-width: calc(100% - 70px);
    }

    .support-contact-card button {
        width: 100%;
    }

}

@media (max-width: 430px) {

    .support-hero {
        padding: 20px;
    }

    .support-hero h2 {
        font-size: 27px;
    }

    .support-topic {
        padding: 15px;
    }

}
/* =========================================================
   HOME PAGE
========================================================= */

.home-page {
    width: 100%;
}


/* SUBSCRIPTION */

.home-subscription-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    min-height: 330px;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(0, 170, 255, .12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(16, 24, 35, .98),
            rgba(9, 14, 22, .98)
        );
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}


.home-subscription-main {
    position: relative;
    z-index: 2;
}


.home-subscription-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


.home-subscription-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.55);
    font-size: 13px;
}


.home-subscription-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7ee7a5;
    font-size: 14px;
    font-weight: 600;
}


.home-subscription-icon {
    display: none;
}


.home-days {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 24px;
}


.home-days strong {
    font-size: 68px;
    line-height: 1;
    letter-spacing: -3px;
}


.home-days span {
    color: rgba(255,255,255,.55);
    font-size: 20px;
}


.home-subscription-expiry {
    margin: 14px 0 26px;
    color: rgba(255,255,255,.55);
    font-size: 14px;
}


.home-subscription-expiry strong {
    color: rgba(255,255,255,.88);
}


.home-subscription-progress {
    max-width: 560px;
}


.home-progress-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
}


.home-progress-top strong {
    color: rgba(255,255,255,.8);
}


.home-progress-bar {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.08);
}


.home-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: #38a9ff;
    box-shadow: 0 0 14px rgba(56,169,255,.55);
}


.home-subscription-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}


/* VPN VISUAL */

.home-subscription-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.home-vpn-orb {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    height: 125px;
    border: 1px solid rgba(75, 180, 255, .4);
    border-radius: 50%;
    background: rgba(30, 120, 190, .08);
    box-shadow:
        0 0 50px rgba(45, 160, 255, .2),
        inset 0 0 40px rgba(45, 160, 255, .08);
}


.home-vpn-orb-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(45, 160, 255, .12);
    box-shadow: 0 0 35px rgba(45,160,255,.25);
    font-size: 30px;
}


.home-orbit {
    position: absolute;
    border: 1px solid rgba(75,180,255,.14);
    border-radius: 50%;
}


.orbit-one {
    width: 210px;
    height: 210px;
    transform: rotate(25deg);
}


.orbit-two {
    width: 270px;
    height: 120px;
    transform: rotate(-35deg);
}


.home-orb-status {
    position: absolute;
    bottom: 22px;
    color: rgba(255,255,255,.5);
    font-size: 12px;
}


/* STATS */

.home-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 34px;
}


.home-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}


.home-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    font-size: 20px;
}


.home-stat-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.home-stat-card span {
    color: rgba(255,255,255,.45);
    font-size: 12px;
}


.home-stat-card strong {
    font-size: 21px;
}


.home-stat-card strong small {
    color: rgba(255,255,255,.4);
    font-size: 13px;
    font-weight: 500;
}


.home-stat-arrow {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    font-size: 20px;
    transition: .2s;
}


.home-stat-arrow:hover {
    color: #fff;
    transform: translateX(3px);
}


/* SECTIONS */

.home-section {
    margin-bottom: 34px;
}


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


.home-action-card {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: .2s;
}


.home-action-card:hover {
    border-color: rgba(70,170,255,.3);
    background: rgba(70,170,255,.04);
    transform: translateY(-2px);
}


.home-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    font-size: 21px;
}


.home-action-card div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.home-action-card strong {
    font-size: 14px;
}


.home-action-card span {
    color: rgba(255,255,255,.42);
    font-size: 12px;
}


.home-action-card > b {
    color: rgba(255,255,255,.35);
    font-size: 18px;
}


/* REFERRAL */

.home-referral-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 24px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(70,170,255,.12);
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(60,170,255,.12),
            transparent 30%
        ),
        rgba(255,255,255,.025);
}


.home-referral-label {
    margin-bottom: 12px;
    color: #65bfff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}


.home-referral-content h2 {
    max-width: 600px;
    margin: 0 0 12px;
    font-size: 25px;
    line-height: 1.25;
}


.home-referral-content h2 span {
    color: #65bfff;
}


.home-referral-content p {
    max-width: 600px;
    margin: 0 0 20px;
    color: rgba(255,255,255,.5);
    font-size: 14px;
    line-height: 1.6;
}


.home-referral-content p strong {
    color: rgba(255,255,255,.85);
}


.home-referral-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 135px;
    height: 135px;
    flex-shrink: 0;
    border: 1px solid rgba(70,170,255,.3);
    border-radius: 50%;
    background: rgba(50,150,230,.08);
    box-shadow: 0 0 60px rgba(50,150,230,.12);
}


.home-referral-circle strong {
    color: #65bfff;
    font-size: 38px;
}


.home-referral-circle span {
    color: rgba(255,255,255,.5);
    font-size: 11px;
    letter-spacing: .1em;
}


/* SYSTEM */

.home-system-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    background: rgba(255,255,255,.02);
}


.home-system-left {
    display: flex;
    align-items: center;
    gap: 14px;
}


.home-system-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(60,210,120,.08);
    color: #72e29a;
    font-weight: 700;
}


.home-system-left div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.home-system-left span {
    color: rgba(255,255,255,.4);
    font-size: 12px;
}


.home-system-status {
    color: #72e29a;
    font-size: 12px;
}


/* MOBILE */

@media (max-width: 900px) {

    .home-subscription-card {
        grid-template-columns: 1fr;
    }

    .home-subscription-visual {
        display: none;
    }

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

}


@media (max-width: 600px) {

    .home-subscription-card {
        padding: 24px;
        border-radius: 20px;
    }

    .home-days strong {
        font-size: 54px;
    }

    .home-subscription-actions {
        flex-direction: column;
    }

    .home-subscription-actions button {
        width: 100%;
    }

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

    .home-referral-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    .home-referral-visual {
        display: none;
    }

    .home-system-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-system-status {
        margin-left: 54px;
    }

}
/* =========================
   PROFILE PAGE
   ========================= */

   .profile-page {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 40px;
}


/* PROFILE HERO */

.profile-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(56, 169, 255, 0.12),
            transparent 35%
        ),
        rgba(13, 20, 30, 0.82);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.profile-avatar-large {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #38a9ff,
            #1677c8
        );

    color: #fff;
    font-size: 30px;
    font-weight: 800;

    box-shadow:
        0 0 35px rgba(56, 169, 255, 0.25);
}

.profile-main-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.profile-name-large {
    color: #fff;
    font-size: 24px;
    font-weight: 750;
}

.profile-username {
    color: #718399;
    font-size: 13px;
}

.profile-telegram-id {
    margin-top: 4px;
    color: #607086;
    font-size: 11px;
}

.profile-telegram-id span {
    color: #91a6ba;
    font-family: monospace;
}

.profile-telegram-badge {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 8px 12px;

    border-radius: 10px;

    background: rgba(65, 210, 130, 0.08);
    border: 1px solid rgba(65, 210, 130, 0.15);

    color: #73d99b;
    font-size: 12px;
}

.profile-telegram-badge span {
    font-size: 8px;
}


/* SECTION */

.profile-section {
    margin-bottom: 28px;
}

.section-title {
    margin-bottom: 12px;

    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}


/* SUBSCRIPTION */

.profile-subscription-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px;

    border: 1px solid rgba(56, 169, 255, 0.14);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(56, 169, 255, 0.08),
            rgba(13, 20, 30, 0.9)
        );
}

.profile-subscription-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-subscription-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(56, 169, 255, 0.1);

    font-size: 22px;
}

.profile-subscription-name {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.profile-subscription-status {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 5px;

    color: #70d79a;
    font-size: 12px;
}

.profile-subscription-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.profile-subscription-date span {
    color: #66778b;
    font-size: 11px;
}

.profile-subscription-date strong {
    color: #fff;
    font-size: 14px;
}

.profile-subscription-date small {
    color: #38a9ff;
    font-size: 11px;
}


/* STATS */

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

.profile-stat-card {
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;

    background: rgba(13, 20, 30, 0.72);
}

.profile-stat-icon {
    margin-bottom: 12px;
    font-size: 20px;
}

.profile-stat-value {
    color: #fff;
    font-size: 22px;
    font-weight: 750;
}

.profile-stat-label {
    margin-top: 4px;
    color: #6d7e92;
    font-size: 11px;
}


/* ACTIONS */

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-action {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 15px 17px;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 15px;

    background: rgba(13, 20, 30, 0.72);

    color: #fff;
    text-align: left;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.profile-action:hover {
    transform: translateY(-1px);

    border-color: rgba(56, 169, 255, 0.2);

    background: rgba(56, 169, 255, 0.05);
}

.profile-action.primary {
    border-color: rgba(56, 169, 255, 0.2);
    background:
        linear-gradient(
            90deg,
            rgba(56, 169, 255, 0.12),
            rgba(13, 20, 30, 0.75)
        );
}

.profile-action-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    background: rgba(56, 169, 255, 0.08);

    font-size: 18px;
}

.profile-action > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-action b {
    font-size: 13px;
}

.profile-action small {
    color: #68798d;
    font-size: 11px;
}

.profile-action-arrow {
    margin-left: auto;
    color: #607286;
    font-size: 18px;
}


/* ACCOUNT */

.profile-account-card {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;

    background: rgba(13, 20, 30, 0.72);
}

.profile-account-row {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px;

    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    background: transparent;

    color: #fff;
    text-align: left;

    cursor: pointer;
}

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

.profile-account-row:hover {
    background: rgba(255, 255, 255, 0.025);
}

.profile-account-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.04);

    font-size: 16px;
}

.profile-account-row > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-account-row b {
    font-size: 13px;
}

.profile-account-row small {
    color: #68798d;
    font-size: 11px;
}

.profile-account-row.danger b {
    color: #e58b8b;
}

.profile-account-row.danger .profile-account-icon {
    background: rgba(220, 80, 80, 0.08);
}


/* INFO */

.profile-info-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 17px;

    border: 1px solid rgba(56, 169, 255, 0.08);
    border-radius: 16px;

    background: rgba(56, 169, 255, 0.035);
}

.profile-info-icon {
    font-size: 20px;
}

.profile-info-card b {
    color: #d7e4ef;
    font-size: 12px;
}

.profile-info-card p {
    margin: 4px 0 0;

    color: #68798d;
    font-size: 11px;
    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 700px) {

    .profile-hero {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .profile-avatar-large {
        width: 66px;
        height: 66px;
        font-size: 24px;
    }

    .profile-name-large {
        font-size: 20px;
    }

    .profile-telegram-badge {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .profile-subscription-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .profile-subscription-date {
        align-items: flex-start;
    }

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

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

   .admin-page {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.admin-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(65, 210, 130, 0.07);
    border: 1px solid rgba(65, 210, 130, 0.12);
    color: #72d99b;
    font-size: 11px;
}

.admin-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #52d889;
    box-shadow: 0 0 10px rgba(82, 216, 137, 0.7);
}


/* STATS */

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.admin-stat-card {
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background: rgba(13, 20, 30, 0.75);
}

.admin-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.admin-stat-top span {
    font-size: 19px;
}

.admin-stat-top small {
    color: #5d7185;
    font-size: 10px;
}

.admin-stat-card strong {
    display: block;
    color: #fff;
    font-size: 23px;
    font-weight: 750;
}

.admin-stat-card p {
    margin: 4px 0 0;
    color: #68798d;
    font-size: 11px;
}


/* GRID */

.admin-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 14px;
    margin-bottom: 28px;
}

.admin-card {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background: rgba(13, 20, 30, 0.75);
}

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

.admin-card-header h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
}

.admin-card-header p {
    margin: 4px 0 0;
    color: #66788b;
    font-size: 10px;
}

.admin-link-btn {
    border: 0;
    background: transparent;
    color: #38a9ff;
    font-size: 11px;
    cursor: pointer;
}

.admin-card-value {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}


/* USERS */

.admin-user-list {
    display: flex;
    flex-direction: column;
}

.admin-user-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.admin-user-avatar {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(56, 169, 255, 0.1);

    color: #8bcaff;
    font-size: 12px;
    font-weight: 700;
}

.admin-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-user-info b {
    color: #dce8f2;
    font-size: 12px;
}

.admin-user-info span {
    color: #5e7184;
    font-size: 9px;
}

.admin-user-status {
    margin-left: auto;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 9px;
}

.admin-user-status.active {
    color: #71d99a;
    background: rgba(65, 210, 130, 0.07);
}

.admin-user-status.expired {
    color: #df8b8b;
    background: rgba(220, 80, 80, 0.07);
}

.admin-user-status.trial {
    color: #e5c77d;
    background: rgba(220, 180, 70, 0.07);
}


/* CHART */

.admin-chart {
    height: 190px;
    display: flex;
    align-items: flex-end;
}

.chart-bars {
    width: 100%;
    height: 150px;

    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.chart-bars span {
    flex: 1;
    min-height: 10px;

    border-radius: 5px 5px 2px 2px;

    background: linear-gradient(
        180deg,
        #38a9ff,
        rgba(56, 169, 255, 0.18)
    );
}


/* SECTIONS */

.admin-section {
    margin-bottom: 28px;
}

.admin-section-title {
    margin-bottom: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

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

.admin-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 18px;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;

    background: rgba(13, 20, 30, 0.72);

    text-align: left;
    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.admin-action:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 169, 255, 0.18);
}

.admin-action > span {
    margin-bottom: 13px;
    font-size: 21px;
}

.admin-action b {
    color: #fff;
    font-size: 12px;
}

.admin-action small {
    margin-top: 4px;
    color: #66788b;
    font-size: 10px;
}


/* SYSTEM */

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

.admin-system-item {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;

    background: rgba(13, 20, 30, 0.65);
}

.admin-system-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
}

.admin-system-dot.online {
    background: #52d889;
    box-shadow: 0 0 10px rgba(82, 216, 137, 0.5);
}

.admin-system-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-system-item b {
    color: #dce8f2;
    font-size: 11px;
}

.admin-system-item small {
    color: #617488;
    font-size: 9px;
}


/* MOBILE */

@media (max-width: 850px) {

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .admin-actions {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 550px) {

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

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

    .admin-card-header {
        flex-direction: column;
    }

}
/* =========================
   ADMIN USERS
   ========================= */

   .admin-refresh-btn {
    padding: 9px 13px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;

    background: rgba(255,255,255,.03);

    color: #a9bbcd;
    font-size: 11px;

    cursor: pointer;
}

.admin-refresh-btn:hover {
    background: rgba(56,169,255,.08);
    color: #fff;
}


.admin-users-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.admin-mini-stat {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;

    background: rgba(13,20,30,.72);
}

.admin-mini-stat > span {
    font-size: 20px;
}

.admin-mini-stat div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-mini-stat strong {
    color: #fff;
    font-size: 18px;
}

.admin-mini-stat small {
    color: #66798c;
    font-size: 9px;
}


/* TOOLBAR */

.admin-users-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-search {
    flex: 1;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 13px;

    height: 42px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;

    background: rgba(13,20,30,.72);
}

.admin-search > span {
    color: #607489;
    font-size: 20px;
}

.admin-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;
    font: 12px Inter;
}

.admin-search input::placeholder {
    color: #586b7e;
}

.admin-users-toolbar select {
    min-width: 180px;

    padding: 0 12px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;

    outline: none;

    background: #0d141e;
    color: #a9bbcd;

    font: 11px Inter;
}


/* TABLE */

.admin-users-table-card {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;

    background: rgba(13,20,30,.72);
}

.admin-table-header,
.admin-user-table-row {
    display: grid;

    grid-template-columns:
        1.7fr
        1fr
        .7fr
        .8fr
        .7fr;

    align-items: center;

    column-gap: 15px;

    padding: 13px 17px;
}

.admin-table-header {
    color: #596d81;
    font-size: 9px;

    background: rgba(255,255,255,.015);

    border-bottom: 1px solid rgba(255,255,255,.05);
}

.admin-user-table-row {
    min-height: 65px;

    border-bottom: 1px solid rgba(255,255,255,.045);
}

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

.admin-table-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-table-avatar {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(56,169,255,.1);

    color: #8bcaff;

    font-size: 12px;
    font-weight: 700;
}

.admin-table-user > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-table-user b {
    color: #dce8f2;
    font-size: 11px;
}

.admin-table-user span {
    color: #6c8195;
    font-size: 9px;
}

.admin-table-user small {
    color: #4e6276;
    font-size: 8px;
}


.admin-subscription-status {
    display: inline-block;

    padding: 5px 7px;

    border-radius: 6px;

    font-size: 8px;
}

.admin-subscription-status.active {
    color: #71d99a;
    background: rgba(65,210,130,.07);
}

.admin-subscription-status.expired {
    color: #df8b8b;
    background: rgba(220,80,80,.07);
}

.admin-subscription-status.trial {
    color: #e5c77d;
    background: rgba(220,180,70,.07);
}

.admin-table-date {
    display: block;

    margin-top: 4px;

    color: #53677a;
    font-size: 8px;
}

.admin-referrals-count {
    color: #a9bdcf;
    font-size: 10px;
}

.admin-registration {
    color: #788a9d;
    font-size: 9px;
}

.admin-view-user {
    padding: 7px 9px;

    border: 1px solid rgba(56,169,255,.12);
    border-radius: 8px;

    background: rgba(56,169,255,.05);

    color: #58b4ff;
    font-size: 9px;

    cursor: pointer;
}

.admin-view-user:hover {
    background: rgba(56,169,255,.1);
}


/* MODAL */

.admin-user-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition: .2s ease;

    z-index: 10000;
}

.admin-user-modal.show {
    opacity: 1;
    visibility: visible;
}

.admin-user-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.68);

    backdrop-filter: blur(7px);
}

.admin-user-modal-content {
    position: relative;

    width: min(650px, 100%);
    max-height: 90vh;

    overflow-y: auto;

    padding: 25px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;

    background: #0d141e;

    box-shadow:
        0 30px 80px rgba(0,0,0,.5);

    transform: translateY(10px) scale(.98);

    transition: .2s ease;
}

.admin-user-modal.show
.admin-user-modal-content {
    transform: translateY(0) scale(1);
}

.admin-modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 9px;

    background: rgba(255,255,255,.05);

    color: #8295a8;

    font-size: 20px;

    cursor: pointer;
}


/* PROFILE */

.admin-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;

    padding-right: 35px;
}

.admin-profile-avatar {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #38a9ff,
        #1677c8
    );

    color: #fff;

    font-size: 24px;
    font-weight: 800;
}

.admin-profile-header h2 {
    margin: 0;

    color: #fff;
    font-size: 20px;
}

.admin-profile-header p {
    margin: 3px 0;

    color: #718399;
    font-size: 11px;
}

.admin-profile-header span {
    color: #596d81;
    font-size: 9px;
}

.admin-profile-header span b {
    color: #9db1c4;
}


.admin-profile-status {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 20px 0;

    padding: 10px 12px;

    border-radius: 10px;

    background: rgba(65,210,130,.06);

    color: #71d99a;

    font-size: 10px;
}

.admin-profile-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #52d889;
}


.admin-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.admin-profile-info {
    padding: 13px;

    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;

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

.admin-profile-info span {
    display: block;

    margin-bottom: 5px;

    color: #617589;
    font-size: 9px;
}

.admin-profile-info strong {
    color: #dce8f2;
    font-size: 11px;
}


.admin-profile-section {
    margin-top: 22px;
}

.admin-profile-section h3 {
    margin: 0 0 10px;

    color: #fff;
    font-size: 12px;
}


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

.admin-referral-box > div {
    padding: 12px;

    border-radius: 11px;

    background: rgba(56,169,255,.04);
}

.admin-referral-box span {
    display: block;

    margin-bottom: 4px;

    color: #617589;
    font-size: 8px;
}

.admin-referral-box b {
    color: #dce8f2;
    font-size: 11px;
}


.admin-invited-list {
    display: flex;
    flex-direction: column;

    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;

    overflow: hidden;
}

.admin-invited-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 12px;

    border-bottom: 1px solid rgba(255,255,255,.04);
}

.admin-invited-list > div:last-child {
    border-bottom: 0;
}

.admin-invited-list span {
    color: #cbd9e5;
    font-size: 10px;
}

.admin-invited-list small {
    color: #71d99a;
    font-size: 8px;
}


.admin-profile-actions {
    display: flex;
    gap: 8px;

    margin-top: 22px;
}

.admin-profile-action {
    flex: 1;

    padding: 10px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;

    background: rgba(255,255,255,.03);

    color: #a9bbcd;
    font-size: 9px;

    cursor: pointer;
}

.admin-profile-action.primary {
    border-color: rgba(56,169,255,.18);
    background: rgba(56,169,255,.08);
    color: #58b4ff;
}

.admin-profile-action.danger {
    border-color: rgba(220,80,80,.12);
    color: #df8b8b;
}
@media (max-width: 850px) {

    .admin-users-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-table-header {
        display: none;
    }

    .admin-user-table-row {
        grid-template-columns: 1fr auto;
        row-gap: 10px;
    }

    .admin-user-table-row > div:nth-child(2),
    .admin-user-table-row > div:nth-child(3),
    .admin-user-table-row > div:nth-child(4) {
        display: none;
    }

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

}

@media (max-width: 550px) {

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

    .admin-users-toolbar {
        flex-direction: column;
    }

    .admin-users-toolbar select {
        height: 42px;
    }

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

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

    .admin-profile-actions {
        flex-direction: column;
    }

}
/* =========================================================
   ADMIN ADS
========================================================= */

.admin-primary-btn {
    border: none;
    border-radius: 12px;
    padding: 11px 17px;
    background: linear-gradient(
        135deg,
        #1e8fff,
        #006fe6
    );
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.admin-primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 132, 255, .25);
}


.admin-ads-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}


.admin-ads-stat {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}


.admin-ads-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(0, 132, 255, .12);
    font-size: 21px;
}


.admin-ads-stat strong {
    display: block;
    font-size: 22px;
    margin-bottom: 4px;
}


.admin-ads-stat span {
    color: #8d99aa;
    font-size: 13px;
}


.admin-ads-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}


.admin-ads-toolbar .admin-search {
    flex: 1;
}


.admin-ads-toolbar select {
    min-width: 190px;
}


.admin-ads-table-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    overflow: hidden;
}


.admin-ads-table-header,
.admin-ad-row {
    display: grid;
    grid-template-columns:
        2fr
        .8fr
        1fr
        .7fr
        1fr
        .8fr
        .9fr
        .8fr;

    align-items: center;
    gap: 15px;
    padding: 16px 20px;
}


.admin-ads-table-header {
    color: #7e8999;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.06);
}


.admin-ad-row {
    min-height: 72px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}


.admin-ad-row:last-child {
    border-bottom: none;
}


.admin-ad-row:hover {
    background: rgba(255,255,255,.02);
}


.admin-ad-source {
    display: flex;
    align-items: center;
    gap: 12px;
}


.admin-ad-source strong {
    display: block;
    margin-bottom: 4px;
}


.admin-ad-source small {
    color: #7f8a9a;
    font-size: 12px;
}


.admin-ad-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    font-size: 18px;
}


.admin-conversion {
    color: #55d68a;
    font-weight: 700;
}


.admin-ad-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}


.admin-ad-status.active {
    color: #57df91;
    background: rgba(40, 200, 110, .10);
}


.admin-ad-status.paused {
    color: #ffb454;
    background: rgba(255, 170, 60, .10);
}


.admin-ad-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}


.admin-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: white;
    cursor: pointer;
}


.admin-icon-btn:hover {
    background: rgba(255,255,255,.08);
}


/* MODAL */

.admin-ad-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}


.admin-ad-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}


.admin-ad-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
}


.admin-ad-modal-content {
    position: relative;
    z-index: 2;
    width: min(680px, calc(100% - 30px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #11161e;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 30px 90px rgba(0,0,0,.5);
}


.admin-modal-close {
    position: absolute;
    top: 16px;
    right: 17px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}


.admin-ad-link-box {
    margin-top: 22px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(0,132,255,.06);
    border: 1px solid rgba(0,132,255,.15);
}


.admin-ad-link-box > span {
    display: block;
    color: #8d99aa;
    font-size: 12px;
    margin-bottom: 9px;
}


.admin-ad-link-box > div {
    display: flex;
    align-items: center;
    gap: 10px;
}


.admin-ad-link-box code {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #70b9ff;
    font-size: 12px;
}


.admin-ad-link-box button {
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,.08);
    color: white;
    cursor: pointer;
}


.admin-ad-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
}


.admin-ad-detail-stats > div {
    padding: 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}


.admin-ad-detail-stats strong {
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
}


.admin-ad-detail-stats span {
    color: #808b9b;
    font-size: 12px;
}


.admin-ad-funnel {
    margin-top: 22px;
}


.admin-ad-funnel h3 {
    margin-bottom: 14px;
}


.admin-funnel-step {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}


.admin-funnel-step span {
    color: #9aa5b5;
}


.admin-funnel-line {
    height: 12px;
    width: 2px;
    margin-left: 25px;
    background: rgba(255,255,255,.12);
}


.admin-ad-actions-large {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}


.admin-secondary-btn,
.admin-danger-btn {
    flex: 1;
    border: none;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    font-weight: 700;
}


.admin-secondary-btn {
    background: rgba(255,255,255,.07);
    color: white;
}


.admin-danger-btn {
    background: rgba(255,70,70,.10);
    color: #ff7373;
}


/* CREATE */

.admin-create-ad h2 {
    margin-bottom: 8px;
}


.admin-create-ad > p {
    color: #8b96a7;
    line-height: 1.5;
    margin-bottom: 24px;
}


.admin-create-ad label {
    display: block;
    margin: 16px 0 7px;
    color: #aeb7c5;
    font-size: 13px;
}


.admin-create-ad input,
.admin-create-ad select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    color: white;
    outline: none;
}


.admin-create-ad input:focus,
.admin-create-ad select:focus {
    border-color: rgba(0,132,255,.5);
}


.admin-create-ad-preview {
    margin-top: 20px;
    padding: 15px;
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}


.admin-create-ad-preview span {
    display: block;
    color: #8994a5;
    font-size: 12px;
    margin-bottom: 8px;
}


.admin-create-ad-preview code {
    color: #67b5ff;
    word-break: break-all;
    font-size: 12px;
}


.admin-create-submit {
    width: 100%;
    margin-top: 20px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .admin-ads-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-ads-table-card {
        overflow-x: auto;
    }

    .admin-ads-table-header,
    .admin-ad-row {
        min-width: 1000px;
    }

}


@media (max-width: 600px) {

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

    .admin-ads-toolbar {
        flex-direction: column;
    }

    .admin-ad-detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-ad-actions-large {
        flex-direction: column;
    }

}
.admin-ad-detail-extra {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.admin-ad-detail-extra > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.admin-ad-detail-extra span {
    color: var(--muted);
}

.admin-ad-detail-extra strong {
    color: #fff;
}
/* ============================================================
   ADMIN AD USERS
   ============================================================ */

.admin-ad-users-section {
    margin-top: 24px;
}

.admin-ad-users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.admin-ad-users-header h3 {
    margin: 0;
}

.admin-ad-users-header span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.admin-ad-users-header > strong {
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.admin-ad-users-table {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.admin-ad-users-table-head,
.admin-ad-user-row {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1.1fr 0.8fr;
    align-items: center;
    gap: 16px;
}

.admin-ad-users-table-head {
    padding: 12px 16px;
    color: var(--muted);
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.admin-ad-user-row {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

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

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

.admin-ad-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    font-weight: 700;
}

.admin-ad-user-main strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-ad-user-main small,
.admin-ad-user-payments small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.admin-ad-user-date {
    color: var(--muted);
    font-size: 12px;
}

.admin-ad-user-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.admin-ad-user-status.active {
    background: rgba(60, 210, 130, 0.12);
    color: #61dc95;
}

.admin-ad-user-status.trial {
    background: rgba(70, 150, 255, 0.12);
    color: #73adff;
}

.admin-ad-user-status.expired {
    background: rgba(255, 90, 90, 0.12);
    color: #ff7b7b;
}

.admin-ad-user-payments strong {
    display: block;
}

.admin-ad-users-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
}

@media (max-width: 850px) {

    .admin-ad-users-table-head {
        display: none;
    }

    .admin-ad-user-row {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .admin-ad-user-date {
        text-align: right;
    }

    .admin-ad-user-status {
        justify-self: start;
    }

    .admin-ad-user-payments {
        justify-self: end;
        text-align: right;
    }
}



/* =========================================================
   XETVPN HOME FINAL POLISH
========================================================= */

.home-page {
    animation: homePageIn .35s ease both;
}

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


/* HEADER */

.home-page .page-header {
    margin-bottom: 22px;
}

.home-page .page-header h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.8px;
}

.home-page .page-header p {
    color: rgba(255,255,255,.48);
}


/* MAIN SUBSCRIPTION */

.home-subscription-card {
    isolation: isolate;
    border-color: rgba(67, 175, 255, .14);
    background:
        radial-gradient(
            circle at 82% 50%,
            rgba(0, 157, 255, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(0, 92, 255, .09),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #101a28 0%,
            #09121f 58%,
            #07101b 100%
        );
    box-shadow:
        0 24px 70px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.home-subscription-card:hover {
    transform: translateY(-2px);
    border-color: rgba(67, 175, 255, .24);
    box-shadow:
        0 28px 80px rgba(0,0,0,.38),
        0 0 45px rgba(0,130,255,.06);
}

.home-subscription-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            rgba(75,190,255,.08),
            transparent 25%,
            transparent 70%,
            rgba(75,190,255,.05)
        );
    z-index: -1;
}

.home-subscription-status {
    color: #70e6a0;
}

.home-days strong {
    color: #f7fbff;
    text-shadow:
        0 0 32px rgba(61,174,255,.10);
}

.home-progress-bar {
    height: 7px;
    background: rgba(255,255,255,.065);
}

.home-progress-fill {
    background:
        linear-gradient(
            90deg,
            #168fff,
            #5ec7ff
        );
    box-shadow:
        0 0 16px rgba(55,172,255,.48);
}

.home-subscription-actions .primary {
    box-shadow:
        0 8px 28px rgba(0,126,255,.18);
}


/* VPN ORB */

.home-vpn-orb {
    width: 146px;
    height: 146px;
    border-color: rgba(81,190,255,.42);
    background:
        radial-gradient(
            circle,
            rgba(52,166,255,.16),
            rgba(22,96,168,.06) 55%,
            transparent 72%
        );
    box-shadow:
        0 0 65px rgba(33,158,255,.18),
        inset 0 0 45px rgba(45,160,255,.10);
    animation: homeOrbPulse 4s ease-in-out infinite;
}

.home-vpn-orb-inner {
    width: 88px;
    height: 88px;
    font-size: 34px;
    background:
        radial-gradient(
            circle,
            rgba(53,175,255,.20),
            rgba(31,115,190,.08)
        );
    box-shadow:
        0 0 40px rgba(45,160,255,.28);
}

.home-orbit {
    border-color: rgba(75,180,255,.17);
}

.orbit-one {
    animation:
        homeOrbitOne 12s linear infinite;
}

.orbit-two {
    animation:
        homeOrbitTwo 15s linear infinite;
}

@keyframes homeOrbPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 65px rgba(33,158,255,.18),
            inset 0 0 45px rgba(45,160,255,.10);
    }
    50% {
        transform: scale(1.025);
        box-shadow:
            0 0 78px rgba(33,158,255,.25),
            inset 0 0 48px rgba(45,160,255,.13);
    }
}

@keyframes homeOrbitOne {
    from {
        transform: rotate(25deg);
    }
    to {
        transform: rotate(385deg);
    }
}

@keyframes homeOrbitTwo {
    from {
        transform: rotate(-35deg);
    }
    to {
        transform: rotate(-395deg);
    }
}


/* STATS */

.home-stat-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.075);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        );
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.home-stat-card::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(39,158,255,.06);
    filter: blur(24px);
    pointer-events: none;
}

.home-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(70,170,255,.20);
    background:
        linear-gradient(
            145deg,
            rgba(70,170,255,.05),
            rgba(255,255,255,.018)
        );
}


/* QUICK ACTIONS */

.home-action-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.075);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        );
}

.home-action-card::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(30,145,255,.045);
    filter: blur(28px);
    pointer-events: none;
}

.home-action-icon {
    border: 1px solid rgba(255,255,255,.035);
    background:
        linear-gradient(
            145deg,
            rgba(75,175,255,.08),
            rgba(255,255,255,.035)
        );
}


/* REFERRAL */

.home-referral-card {
    position: relative;
    border-color: rgba(71,170,255,.15);
    background:
        radial-gradient(
            circle at 88% 45%,
            rgba(48,159,255,.16),
            transparent 24%
        ),
        radial-gradient(
            circle at 15% 100%,
            rgba(0,88,190,.07),
            transparent 35%
        ),
        rgba(255,255,255,.025);
}

.home-referral-circle {
    animation: referralGlow 3.5s ease-in-out infinite;
}

@keyframes referralGlow {
    0%, 100% {
        box-shadow:
            0 0 60px rgba(50,150,230,.12);
    }
    50% {
        box-shadow:
            0 0 75px rgba(50,150,230,.22);
    }
}


/* SYSTEM */

.home-system-card {
    border-color: rgba(80,210,140,.08);
    background:
        linear-gradient(
            145deg,
            rgba(70,180,120,.035),
            rgba(255,255,255,.018)
        );
}

.home-system-icon {
    box-shadow:
        0 0 22px rgba(60,210,120,.08);
}


/* MOBILE IMPROVEMENTS */

@media (max-width: 900px) {

    .home-page .page-header {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .home-page .connection-status {
        align-self: flex-start;
    }

    .home-subscription-card {
        min-height: auto;
        padding: 28px;
    }

    .home-days strong {
        font-size: 62px;
    }

    .home-stat-card {
        min-height: 76px;
    }
}


@media (max-width: 600px) {

    .home-page .page-header h1 {
        font-size: 24px;
    }

    .home-subscription-card {
        padding: 22px;
        border-radius: 20px;
    }

    .home-days {
        gap: 9px;
        margin-top: 22px;
    }

    .home-days strong {
        font-size: 54px;
        letter-spacing: -2px;
    }

    .home-days span {
        font-size: 17px;
    }

    .home-subscription-expiry {
        font-size: 13px;
        line-height: 1.55;
    }

    .home-stats {
        gap: 10px;
    }

    .home-action-card {
        padding: 16px;
    }

    .home-referral-card {
        padding: 22px;
        border-radius: 20px;
    }

    .home-referral-content h2 {
        font-size: 22px;
    }

    .home-referral-content p {
        font-size: 13px;
    }

    .home-system-card {
        padding: 16px;
    }
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .home-page,
    .home-vpn-orb,
    .orbit-one,
    .orbit-two,
    .home-referral-circle {
        animation: none !important;
    }

    .home-subscription-card,
    .home-stat-card,
    .home-action-card {
        transition: none !important;
    }
}


/* =========================================================
   XETVPN PROFILE FINAL POLISH
========================================================= */

.profile-page {
    animation: profilePageIn .35s ease both;
}

@keyframes profilePageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* PROFILE HERO */

.profile-hero {
    border-color: rgba(70, 175, 255, .14);
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(35, 165, 255, .16),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(0, 90, 190, .06),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(16, 25, 37, .98),
            rgba(9, 15, 24, .96)
        );
    box-shadow:
        0 24px 65px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.profile-hero:hover {
    transform: translateY(-2px);
    border-color: rgba(70, 175, 255, .22);
    box-shadow:
        0 28px 75px rgba(0,0,0,.34),
        0 0 45px rgba(0,130,255,.06);
}

.profile-hero::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -100px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(35, 155, 255, .05);
    filter: blur(35px);
    pointer-events: none;
}

.profile-avatar-large {
    border: 1px solid rgba(255,255,255,.15);
    box-shadow:
        0 0 40px rgba(56, 169, 255, .24),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.profile-name-large {
    letter-spacing: -.35px;
}

.profile-telegram-badge {
    box-shadow:
        0 0 24px rgba(65, 210, 130, .05);
}


/* SECTION TITLES */

.profile-section .section-title {
    margin-left: 2px;
    font-size: 15px;
    letter-spacing: -.2px;
}


/* SUBSCRIPTION */

.profile-subscription-card {
    border-color: rgba(56, 169, 255, .17);
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(40, 155, 255, .10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(45, 145, 230, .09),
            rgba(13, 20, 30, .92)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 16px 40px rgba(0,0,0,.18);
    transition:
        transform .2s ease,
        border-color .2s ease;
}

.profile-subscription-card:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 169, 255, .25);
}

.profile-subscription-icon {
    border: 1px solid rgba(56, 169, 255, .10);
    box-shadow:
        0 0 24px rgba(56, 169, 255, .08);
}


/* STATS */

.profile-stat-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.07);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(13,20,30,.76)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.profile-stat-card::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(40, 155, 255, .06);
    filter: blur(28px);
    pointer-events: none;
}

.profile-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(70, 170, 255, .18);
    background:
        linear-gradient(
            145deg,
            rgba(45, 160, 255, .05),
            rgba(13,20,30,.78)
        );
}

.profile-stat-value {
    letter-spacing: -.4px;
}


/* ACTIONS */

.profile-action {
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018);
}

.profile-action::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(45, 160, 255, .045);
    filter: blur(28px);
    pointer-events: none;
}

.profile-action.primary {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 10px 32px rgba(0, 120, 255, .07);
}

.profile-action-icon {
    border: 1px solid rgba(70, 170, 255, .08);
    box-shadow:
        0 0 20px rgba(40, 150, 255, .05);
}


/* ACCOUNT */

.profile-account-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 16px 40px rgba(0,0,0,.12);
}

.profile-account-row {
    transition:
        background .18s ease,
        padding-left .18s ease;
}

.profile-account-row:hover {
    padding-left: 19px;
    background: rgba(65, 165, 255, .035);
}

.profile-account-row.danger:hover {
    background: rgba(220, 80, 80, .035);
}


/* INFO */

.profile-info-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 12px 34px rgba(0,0,0,.10);
}


/* MOBILE */

@media (max-width: 700px) {

    .profile-page {
        padding-bottom: 24px;
    }

    .profile-hero {
        padding: 20px;
        border-radius: 19px;
    }

    .profile-subscription-card {
        padding: 18px;
        border-radius: 16px;
    }

    .profile-stat-card {
        padding: 18px;
        border-radius: 16px;
    }

    .profile-action {
        padding: 14px;
        border-radius: 14px;
    }

    .profile-account-card {
        border-radius: 16px;
    }

    .profile-info-card {
        padding: 15px;
        border-radius: 14px;
    }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .profile-page,
    .profile-hero,
    .profile-subscription-card,
    .profile-stat-card,
    .profile-account-row {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================================
   CONNECTION METHOD SELECTOR
========================================================= */

.method-card {
    cursor: pointer;
}

.method-card.selected {
    border-color: rgba(0, 145, 255, .45);
    background:
        linear-gradient(
            145deg,
            rgba(0, 126, 255, .14),
            rgba(5, 18, 33, .78)
        );
    box-shadow:
        inset 0 0 30px rgba(0,126,255,.06),
        0 12px 32px rgba(0,80,170,.10);
}

.method-card.selected .method-icon {
    filter:
        drop-shadow(0 0 10px rgba(65,175,255,.3));
}

@media (max-width: 700px) {

    .device-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .connection-hero {
        grid-template-columns: 1fr;
    }

    .connection-info {
        display: none;
    }

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

}


/* =========================================================
   XETVPN MOBILE FIRST
   Основная адаптация сайта под смартфоны
========================================================= */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body {
        -webkit-tap-highlight-color: transparent;
    }

    /* APP */

    .app {
        display: block;
        width: 100%;
        min-height: 100vh;
    }


    /* SIDEBAR */

    .sidebar {
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;

        width: 278px;
        height: 100vh;
        min-height: 100vh;

        padding: 22px 15px;

        transform: translateX(-105%);
        transition: transform .25s ease;

        box-shadow:
            20px 0 60px rgba(0,0,0,.45);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar .brand {
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav-item {
        min-height: 48px;
        padding: 13px 14px;
        font-size: 14px;
    }


    /* MAIN */

    .main {
        width: 100%;
        min-width: 0;
    }


    /* TOPBAR */

    .topbar {
        position: sticky;
        top: 0;
        z-index: 9000;

        width: 100%;
        height: 62px;

        padding: 0 14px;

        justify-content: space-between;

        background:
            rgba(2, 7, 17, .88);

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

    .mobile-menu {
        display: flex;
        width: 42px;
        height: 42px;

        align-items: center;
        justify-content: center;

        border: 1px solid rgba(75,157,255,.12);
        border-radius: 12px;

        background: rgba(255,255,255,.025);

        color: #d9ecff;
        font-size: 21px;
    }

    .top-actions {
        gap: 5px;
    }

    .icon-btn {
        width: 40px;
        height: 40px;
    }

    .profile {
        gap: 7px;
        padding: 3px;
    }

    .profile-name {
        display: none;
    }


    /* PROFILE DROPDOWN */

    .profile-menu {
        top: 66px;
        right: 12px;
        left: 12px;

        width: auto;
        max-width: none;

        border-radius: 16px;
    }


    /* CONTENT */

    .content {
        width: 100%;
        max-width: none;

        margin: 0;
        padding: 22px 14px 42px;
    }


    /* PAGE HEADER */

    .page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;

        margin-bottom: 18px;
    }

    .page-header h1 {
        max-width: 100%;

        font-size: 23px;
        line-height: 1.2;
        letter-spacing: -.5px;
    }

    .page-header p {
        font-size: 12px;
        line-height: 1.5;
    }

    .connection-status {
        align-self: flex-start;
        padding: 8px 11px;
        font-size: 10px;
    }


    /* BUTTONS */

    button {
        touch-action: manipulation;
    }

    .primary,
    .secondary {
        min-height: 46px;
    }


    /* HOME */

    .home-page {
        width: 100%;
    }

    .home-subscription-card {
        width: 100%;
        grid-template-columns: 1fr;

        min-height: auto;
        padding: 22px;

        border-radius: 19px;
    }

    .home-subscription-visual {
        display: none;
    }

    .home-days strong {
        font-size: 52px;
    }

    .home-days span {
        font-size: 17px;
    }

    .home-subscription-expiry {
        line-height: 1.5;
    }

    .home-subscription-actions {
        flex-direction: column;
    }

    .home-subscription-actions button {
        width: 100%;
    }

    .home-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 26px;
    }

    .home-stat-card {
        min-height: 72px;
    }

    .home-actions-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .home-action-card {
        grid-template-columns: 44px 1fr auto;
        padding: 15px;
    }

    .home-referral-card {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
        border-radius: 19px;
    }

    .home-referral-content h2 {
        font-size: 21px;
    }

    .home-referral-content p {
        font-size: 13px;
    }

    .home-referral-visual {
        display: none;
    }

    .home-system-card {
        align-items: flex-start;
        flex-direction: column;
    }


    /* PROFILE */

    .profile-page {
        width: 100%;
        max-width: none;
        padding-bottom: 20px;
    }

    .profile-hero {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 14px;

        padding: 19px;
        margin-bottom: 22px;

        border-radius: 18px;
    }

    .profile-avatar-large {
        width: 62px;
        height: 62px;
        font-size: 22px;
    }

    .profile-main-info {
        min-width: 0;
    }

    .profile-name-large {
        font-size: 20px;
    }

    .profile-telegram-badge {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .profile-subscription-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;

        padding: 17px;
        border-radius: 16px;
    }

    .profile-subscription-date {
        align-items: flex-start;
    }

    .profile-stats-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .profile-stat-card {
        padding: 17px;
        border-radius: 15px;
    }

    .profile-action {
        min-height: 62px;
        padding: 13px;
    }


    /* CONNECTION */

    .connect-page {
        width: 100%;
    }

    .device-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .device-tab {
        min-height: 68px;
        padding: 10px 7px;

        flex-direction: column;
        gap: 5px;

        border-radius: 12px;
    }

    .device-tab-icon {
        font-size: 20px;
    }

    .device-tab-text {
        text-align: center;
    }

    .device-tab-text strong {
        font-size: 11px;
    }

    .device-tab-text small {
        font-size: 8px;
    }

    .connection-hero {
        grid-template-columns: 1fr;

        min-height: auto;
        padding: 21px;

        border-radius: 17px;
    }

    .connection-info {
        display: none;
    }

    .connection-main h2 {
        font-size: 21px;
        line-height: 1.3;
    }

    .connection-main > p {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .connection-actions {
        flex-direction: column;
    }

    .connection-actions button {
        width: 100%;
        min-height: 46px;
    }

    .config-card {
        padding: 17px;
        border-radius: 16px;
    }

    .config-top {
        align-items: flex-start;
        gap: 10px;
    }

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

    .config-box {
        min-width: 0;
    }

    .config-text {
        min-width: 0;
        overflow: hidden;
    }

    .config-text code {
        font-size: 9px;
    }

    .methods-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .method-card {
        min-height: auto;
        padding: 17px;
    }

    .instructions-card {
        padding: 18px;
    }


    /* PAYMENT */

    .payment-page {
        width: 100%;
    }

    .payment-current-card {
        width: 100%;
    }

    .payment-page .tariffs,
    .payment-page .tariffs-grid,
    .payment-page .payment-methods,
    .payment-page .payment-grid {
        grid-template-columns: 1fr !important;
    }


    /* REFERRALS */

    .referrals-page {
        width: 100%;
    }

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

    .referral-link-box {
        width: 100%;
    }

    .referral-link-box code {
        font-size: 10px;
    }


    /* DEVICES */

    .devices-page {
        width: 100%;
    }

    .devices-limit-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

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

    .device-card {
        width: 100%;
    }


    /* SUPPORT */

    .support-page {
        width: 100%;
    }

    .support-grid,
    .support-cards,
    .support-faq-grid {
        grid-template-columns: 1fr !important;
    }


    /* ADMIN */

    .admin-page {
        width: 100%;
        max-width: none;
        padding-bottom: 20px;
    }

    .admin-page .page-header {
        align-items: flex-start;
    }

    .admin-stats,
    .admin-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 9px;
    }

    .admin-profile-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-profile-actions {
        grid-template-columns: 1fr !important;
    }


    /* ADMIN TABLES */

    .admin-ads-table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-ads-table-header,
    .admin-ad-row {
        min-width: 900px;
    }

    .admin-ad-users-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-ad-users-table-head,
    .admin-ad-user-row {
        min-width: 620px;
    }


    /* MODALS */

    .admin-ad-modal-content {
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        overflow-y: auto;

        border-radius: 18px;
    }

    .qr-window {
        width: calc(100% - 24px);
        max-width: none;

        max-height: calc(100vh - 24px);
        overflow-y: auto;

        border-radius: 18px;
    }


    /* INPUTS */

    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px;
    }


    /* SECTION SPACING */

    .section-heading {
        margin-bottom: 12px;
    }

}


/* VERY SMALL PHONES */

@media (max-width: 430px) {

    .content {
        padding-left: 11px;
        padding-right: 11px;
    }

    .topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .device-tabs {
        gap: 7px;
    }

    .device-tab {
        min-height: 64px;
    }

    .home-subscription-card,
    .connection-hero,
    .profile-hero,
    .home-referral-card {
        border-radius: 16px;
    }

    .home-days strong {
        font-size: 48px;
    }

    .page-header h1 {
        font-size: 21px;
    }

}


/* DESKTOP MOBILE BUTTON STATE */

@media (min-width: 701px) {

    .mobile-menu {
        display: none;
    }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .home-page,
    .profile-page {
        transition: none !important;
        animation: none !important;
    }

}


/* =========================================================
   XETVPN MOBILE MENU FINAL
========================================================= */

@media (max-width: 700px) {

    .mobile-menu {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        border: 1px solid rgba(75,157,255,.16);
        border-radius: 12px;

        background:
            linear-gradient(
                145deg,
                rgba(35,145,255,.09),
                rgba(255,255,255,.025)
            );

        color: #dff2ff;

        font-size: 0;
        transition:
            background .18s ease,
            border-color .18s ease,
            transform .18s ease;
    }

    .mobile-menu::before {
        content: "☰";
        font-size: 21px;
        line-height: 1;
    }

    .mobile-menu:hover,
    .mobile-menu:active {
        background: rgba(35,145,255,.12);
        border-color: rgba(75,170,255,.28);
    }

    .mobile-menu:active {
        transform: scale(.95);
    }


    /* SIDEBAR */

    .sidebar {
        width: min(286px, 84vw);

        background:
            radial-gradient(
                circle at 20% 10%,
                rgba(0,126,255,.10),
                transparent 28%
            ),
            rgba(3,12,25,.98);

        border-right-color: rgba(75,157,255,.18);
        padding-top: 18px;
    }

    .sidebar.open {
        box-shadow:
            20px 0 70px rgba(0,0,0,.50),
            0 0 35px rgba(0,120,255,.05);
    }

    .sidebar .brand {
        padding-bottom: 22px;
    }

    .sidebar nav {
        gap: 5px;
    }

    .sidebar .nav-item {
        min-height: 50px;
        border-radius: 12px;
        padding: 12px 14px;
    }

    .sidebar .nav-item.active {
        box-shadow:
            inset 3px 0 #0797ff,
            0 0 24px rgba(0,126,255,.08);
    }


    /* DARK BACKDROP WHEN MENU IS OPEN */

    .sidebar::after {
        content: "";
        position: fixed;
        inset: 0;

        z-index: -1;

        background: rgba(0,0,0,.48);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    .sidebar.open::after {
        opacity: 1;
        visibility: visible;
    }


    /* TOPBAR */

    .topbar {
        box-shadow:
            0 8px 25px rgba(0,0,0,.14);
    }

    .top-actions {
        margin-left: auto;
    }


    /* TOUCH TARGETS */

    .nav-item,
    .mobile-menu,
    .icon-btn,
    .profile {
        -webkit-user-select: none;
        user-select: none;
    }

}

@media (max-width: 430px) {

    .sidebar {
        width: min(275px, 87vw);
    }

    .mobile-menu {
        width: 40px;
        height: 40px;
    }

}


/* =========================================================
   XETVPN AUTH SCREEN
========================================================= */

body.auth-checking .app {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

#authScreen {
    position: fixed;
    inset: 0;
    z-index: 50000;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow-y: auto;

    padding: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 126, 255, .12),
            transparent 35%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(0, 85, 190, .08),
            transparent 32%
        ),
        #020711;
}

.auth-shell {
    position: relative;

    width: 100%;
    max-width: 430px;
}

.auth-card {
    position: relative;
    overflow: hidden;

    width: 100%;

    padding: 30px 28px 24px;

    border: 1px solid rgba(75,157,255,.15);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(15,24,37,.98),
            rgba(7,13,22,.98)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,.48),
        0 0 55px rgba(0,120,255,.05);
}

.auth-card::before {
    content: "";

    position: absolute;

    left: 20%;
    top: -120px;

    width: 280px;
    height: 200px;

    border-radius: 50%;

    background: rgba(0,135,255,.08);

    filter: blur(45px);

    pointer-events: none;
}

.auth-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(30px);
}

.auth-glow-one {
    width: 160px;
    height: 160px;

    right: -60px;
    top: 40px;

    background: rgba(0,125,255,.08);
}

.auth-glow-two {
    width: 130px;
    height: 130px;

    left: -55px;
    bottom: 30px;

    background: rgba(0,95,190,.06);
}

.auth-brand {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 24px;

    color: #eaf6ff;

    font-size: 18px;
    font-weight: 800;
    letter-spacing: .6px;
}

.auth-brand-x {
    color: #19a7ff;

    font-size: 28px;
    font-weight: 800;

    text-shadow:
        0 0 22px rgba(0,150,255,.75);
}

.auth-heading {
    position: relative;
    z-index: 2;

    text-align: center;

    margin-bottom: 21px;
}

.auth-heading h1 {
    margin: 0 0 7px;

    font-size: 25px;
    letter-spacing: -.6px;
}

.auth-heading p {
    margin: 0;

    color: #71869c;

    font-size: 12px;
    line-height: 1.5;
}

.telegram-login-block {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
}

.telegram-widget {
    display: flex;
    justify-content: center;

    width: 100%;
}

.auth-divider {
    position: relative;

    display: flex;
    align-items: center;

    gap: 13px;

    margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";

    flex: 1;

    height: 1px;

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

.auth-divider span {
    color: #556a7e;

    font-size: 11px;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 5px;

    margin-bottom: 15px;

    padding: 4px;

    border-radius: 12px;

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

.auth-tab {
    min-height: 38px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #6f8397;

    font: 600 12px Inter, Arial, sans-serif;

    cursor: pointer;

    transition: .2s;
}

.auth-tab.active {
    color: #fff;

    background:
        rgba(45,150,255,.10);

    box-shadow:
        inset 0 0 18px rgba(45,150,255,.04);
}

.auth-form {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.auth-form label {
    display: flex;
    flex-direction: column;

    gap: 6px;

    color: #8ba0b3;

    font-size: 11px;
}

.auth-form input {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid rgba(75,157,255,.12);
    border-radius: 11px;

    outline: none;

    background: #020b16;

    color: #eef7ff;

    font: 400 13px Inter, Arial, sans-serif;

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

.auth-form input::placeholder {
    color: #465b70;
}

.auth-form input:focus {
    border-color: rgba(55,165,255,.38);

    box-shadow:
        0 0 0 3px rgba(30,145,255,.07);
}

.auth-error {
    min-height: 18px;

    color: #ff8686;

    font-size: 11px;
    line-height: 1.4;
}

.auth-submit {
    width: 100%;
    min-height: 47px;

    border: 1px solid rgba(69,176,255,.22);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #168fff,
            #0878d3
        );

    color: #fff;

    font: 700 13px Inter, Arial, sans-serif;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(0,126,255,.16);

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

.auth-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 13px 35px rgba(0,126,255,.23);
}

.auth-submit:disabled {
    opacity: .55;
    cursor: wait;

    transform: none;
}

.auth-security {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 18px;

    color: #566b7f;
}

.auth-security span {
    font-size: 15px;
}

.auth-security p {
    margin: 0;

    font-size: 10px;
    line-height: 1.45;
}

@media (max-width: 600px) {

    #authScreen {
        align-items: flex-start;

        padding:
            calc(16px + env(safe-area-inset-top))
            12px
            calc(16px + env(safe-area-inset-bottom));
    }

    .auth-card {
        padding: 25px 18px 20px;

        border-radius: 20px;
    }

    .auth-brand {
        margin-bottom: 21px;
    }

    .auth-heading h1 {
        font-size: 23px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .auth-submit {
        transition: none;
    }

}


/* ============================================================
   XETVPN PUBLIC HOME
   ============================================================ */

body.public-mode > *:not(#publicHome):not(script) {
    display: none !important;
}

body.public-mode #publicHome {
    display: block !important;
}

#publicHome {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow-y: auto;
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 170, 255, 0.12), transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(0, 100, 255, 0.10), transparent 35%),
        #05070b;
    color: #fff;
}

.public-home-shell {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 0 5vw;
}

.public-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.public-glow-one {
    width: 400px;
    height: 400px;
    background: rgba(0, 140, 255, 0.12);
    top: -150px;
    left: -100px;
}

.public-glow-two {
    width: 350px;
    height: 350px;
    background: rgba(0, 220, 255, 0.08);
    bottom: -150px;
    right: -100px;
}

.public-header {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
}

.public-brand-x {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #08a9ff, #0066ff);
    box-shadow: 0 0 30px rgba(0, 150, 255, 0.4);
}

.public-header-actions {
    display: flex;
    gap: 10px;
}

.public-login-btn,
.public-register-btn,
.public-primary-btn,
.public-secondary-btn {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.public-login-btn {
    padding: 12px 20px;
    background: transparent;
    color: #fff;
    border-radius: 10px;
}

.public-login-btn:hover {
    background: rgba(255,255,255,0.06);
}

.public-register-btn {
    padding: 12px 20px;
    border-radius: 10px;
    background: #168cff;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 30px rgba(0, 140, 255, 0.25);
}

.public-main {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    min-height: calc(100vh - 110px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.7fr);
    align-items: center;
    gap: 8vw;
    padding: 60px 0 80px;
}

.public-hero {
    max-width: 760px;
}

.public-badge {
    display: inline-flex;
    padding: 8px 14px;
    border: 1px solid rgba(0, 160, 255, 0.25);
    border-radius: 999px;
    background: rgba(0, 130, 255, 0.08);
    color: #54bdff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.public-hero h1 {
    margin: 24px 0 20px;
    font-size: clamp(48px, 6vw, 86px);
    line-height: 0.98;
    letter-spacing: -3px;
    font-weight: 850;
}

.public-hero h1 span {
    background: linear-gradient(90deg, #fff, #32b5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.public-description {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,0.58);
    font-size: 19px;
    line-height: 1.6;
}

.public-offer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding: 17px 20px;
    max-width: 470px;
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 16px;
    background: rgba(10, 25, 40, 0.65);
}

.public-offer-icon {
    font-size: 27px;
}

.public-offer strong,
.public-offer span {
    display: block;
}

.public-offer strong {
    font-size: 14px;
    letter-spacing: 0.5px;
}

.public-offer span {
    margin-top: 4px;
    color: rgba(255,255,255,0.48);
    font-size: 13px;
}

.public-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.public-primary-btn {
    padding: 16px 23px;
    border-radius: 12px;
    background: #168cff;
    color: #fff;
    font-weight: 750;
    box-shadow: 0 12px 35px rgba(0, 130, 255, 0.25);
}

.public-primary-btn span {
    margin-left: 10px;
}

.public-secondary-btn {
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.65);
}

.public-secondary-btn span {
    color: #fff;
    font-weight: 700;
    margin-left: 5px;
}

.public-features {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 45px;
}

.public-feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

.public-feature-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 150, 255, 0.1);
    color: #36adff;
}

.public-feature strong,
.public-feature span {
    display: block;
}

.public-feature strong {
    font-size: 13px;
}

.public-feature span {
    margin-top: 3px;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
}

.public-price-card {
    position: relative;
    padding: 34px;
    border: 1px solid rgba(0, 170, 255, 0.18);
    border-radius: 25px;
    background:
        linear-gradient(145deg, rgba(15, 29, 45, 0.9), rgba(5, 12, 20, 0.92));
    box-shadow:
        0 30px 80px rgba(0,0,0,0.35),
        inset 0 1px rgba(255,255,255,0.04);
}

.public-price-label {
    color: #43b4ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.public-price {
    margin-top: 18px;
}

.public-price strong {
    font-size: 52px;
    letter-spacing: -2px;
}

.public-price span {
    color: rgba(255,255,255,0.45);
}

.public-price-description {
    margin-top: 4px;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
}

.public-referral {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 15px;
    border-radius: 14px;
    background: rgba(0, 150, 255, 0.07);
}

.public-referral-icon {
    font-size: 22px;
}

.public-referral strong,
.public-referral span {
    display: block;
}

.public-referral strong {
    font-size: 13px;
}

.public-referral span {
    margin-top: 4px;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
}

.public-price-line {
    height: 1px;
    margin: 25px 0;
    background: rgba(255,255,255,0.07);
}

.public-price-list {
    display: grid;
    gap: 13px;
}

.public-price-list div {
    color: rgba(255,255,255,0.62);
    font-size: 13px;
}

.public-price-list span {
    color: #31b3ff;
    margin-right: 8px;
}

.public-footer {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0 30px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.28);
    font-size: 11px;
}


/* ============================================================
   AUTH OVERLAY
   ============================================================ */

#authScreen {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
}

.auth-back {
    position: absolute;
    top: 25px;
    left: 30px;
    z-index: 3;
    border: 0;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
}

.auth-back:hover {
    background: rgba(255,255,255,0.09);
}

@media (max-width: 900px) {

    .public-main {
        grid-template-columns: 1fr;
        gap: 50px;
        padding-top: 40px;
    }

    .public-price-card {
        max-width: 520px;
    }

    .public-hero h1 {
        font-size: clamp(44px, 12vw, 70px);
    }

}

@media (max-width: 600px) {

    .public-home-shell {
        padding: 0 20px;
    }

    .public-header {
        padding: 18px 0;
    }

    .public-header-actions {
        gap: 4px;
    }

    .public-login-btn,
    .public-register-btn {
        padding: 9px 12px;
        font-size: 12px;
    }

    .public-main {
        padding-top: 35px;
    }

    .public-description {
        font-size: 16px;
    }

    .public-features {
        display: grid;
        gap: 15px;
    }

    .public-price-card {
        padding: 25px;
    }

    .public-footer {
        display: block;
    }

    .public-footer span {
        display: block;
        margin-top: 8px;
    }

}

/* ==========================================
   DYNAMIC PROFILE AVATAR
   ========================================== */

.profile-avatar-large {
    overflow: hidden;
}

.profile-avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}


/* Dynamic user avatars */

#headerUserAvatar,
#menuUserAvatar {
    overflow: hidden;
}

#headerUserAvatar img,
#menuUserAvatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}



/* ============================================================
   XETVPN — TELEGRAM PROFILE STATUS
   ============================================================ */

.profile-telegram-badge.telegram-not-connected {
    background: rgba(255, 76, 76, 0.08);
    border: 1px solid rgba(255, 76, 76, 0.20);
    color: #ff7777;

    box-shadow:
        0 0 24px rgba(255, 76, 76, 0.06);
}

.profile-telegram-badge.telegram-not-connected span {
    color: #ff5f5f;
}


/* ============================================================
   TELEGRAM LINK BUTTON
   ============================================================ */

.telegram-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;
    margin: 0;

    border: 1px solid rgba(56, 169, 255, 0.24);
    border-radius: 7px;

    background: rgba(56, 169, 255, 0.08);

    color: #69bdff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.telegram-link-button:hover {
    background: rgba(56, 169, 255, 0.15);
    border-color: rgba(56, 169, 255, 0.42);

    box-shadow:
        0 0 16px rgba(56, 169, 255, 0.10);

    transform: translateY(-1px);
}

.telegram-link-button:active {
    transform: translateY(0);
    box-shadow: none;
}


/* Telegram ID button inside profile */

.profile-telegram-id .telegram-link-button {
    margin-left: 4px;
}


/* Mobile */

@media (max-width: 640px) {

    .telegram-link-button {
        padding: 6px 11px;
        font-size: 11px;
    }

}



/* ============================================================
   XETVPN — INACTIVE SUBSCRIPTION STATUS
   ============================================================ */

.connection-status.inactive {
    color: #ff7777;
}

.connection-status.inactive .status-dot {
    background: #ff5f5f;
    box-shadow:
        0 0 10px rgba(255, 76, 76, 0.65);
}


.home-subscription-status.inactive {
    color: #ff7777;
}

.home-subscription-status.inactive .status-dot {
    background: #ff5f5f;
    box-shadow:
        0 0 10px rgba(255, 76, 76, 0.65);
}



/* =========================================================
   XETVPN CONNECTION PAGE — NEW FUNCTIONAL BLOCKS
   ========================================================= */

.connection-methods-static .method-card {
    cursor: default !important;
}

.connection-methods-static .method-card:hover {
    cursor: default !important;
}


/* INCY DOWNLOAD */

.incy-download-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
    padding: 22px 24px;
    border: 1px solid rgba(98, 232, 176, 0.16);
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.018)
        );
    box-shadow:
        0 18px 50px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
}

.incy-download-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(98,232,176,0.10),
            transparent 42%
        );
    pointer-events: none;
}

.incy-download-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(98,232,176,0.10);
    border: 1px solid rgba(98,232,176,0.18);
    font-size: 25px;
    color: #62e8b0;
}

.incy-download-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.incy-download-label {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    opacity: 0.48;
}

.incy-download-content h3 {
    margin: 0 0 5px;
}

.incy-download-content p {
    margin: 0;
    opacity: 0.62;
    line-height: 1.55;
}

.incy-download-btn {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: #07100c;
    background: #62e8b0;
    box-shadow: 0 10px 28px rgba(98,232,176,0.18);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.incy-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(98,232,176,0.26);
}

.incy-download-btn span {
    font-size: 16px;
}


/* QR WINDOW */

.qr-window-xetvpn {
    position: relative;
    width: min(440px, calc(100vw - 32px));
    padding: 26px;
    border: 1px solid rgba(98,232,176,0.20);
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            rgba(20,25,28,0.98),
            rgba(10,14,17,0.98)
        );
    box-shadow:
        0 30px 100px rgba(0,0,0,0.55),
        0 0 60px rgba(98,232,176,0.06);
}

.qr-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.qr-modal-kicker {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    color: #62e8b0;
    opacity: .8;
}

.qr-modal-header h3 {
    margin: 0;
}

.qr-modal-close-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: inherit;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}

.qr-modal-close-icon:hover {
    background: rgba(255,255,255,.08);
    transform: rotate(4deg);
}

.qr-window-xetvpn > p {
    margin: 10px 0 20px;
    opacity: .62;
    line-height: 1.5;
}

.qr-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 268px;
    height: 268px;
    margin: 0 auto 20px;
    padding: 20px;
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.12),
        0 18px 50px rgba(0,0,0,.28);
}

.qr-frame-glow {
    position: absolute;
    inset: -8px;
    border-radius: 30px;
    border: 1px solid rgba(98,232,176,.22);
    box-shadow:
        0 0 35px rgba(98,232,176,.08);
    pointer-events: none;
}

.qr-frame .qr-placeholder {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 220px;
    height: 220px;
}

.qr-frame .qr-placeholder img,
.qr-frame .qr-placeholder canvas {
    display: block;
    max-width: 220px;
    max-height: 220px;
}

.qr-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    opacity: .65;
}

.qr-note span {
    color: #62e8b0;
    font-weight: 900;
}


/* MOBILE */

@media (max-width: 700px) {

    .incy-download-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .incy-download-icon {
        margin: 0 auto;
    }

    .incy-download-btn {
        width: 100%;
    }

    .qr-window-xetvpn {
        padding: 20px;
    }

    .qr-frame {
        width: 248px;
        height: 248px;
    }

}


/* ============================================================
   XETVPN PAYMENT — PREMIUM OVERRIDES
   ============================================================ */

.payment-page {
    width: 100%;
}


/* CURRENT SUBSCRIPTION */

.payment-current-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 28px;
    padding: 24px 28px;

    border: 1px solid rgba(65, 174, 255, .20);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(0, 157, 255, .12),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(9, 27, 46, .96),
            rgba(4, 13, 24, .96)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 14px 40px rgba(0,0,0,.16);

    overflow: hidden;
}

.payment-current-card::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -110px;
    top: -135px;

    border-radius: 50%;

    background: rgba(0, 169, 255, .10);

    filter: blur(48px);

    pointer-events: none;
}

.payment-current-left {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 16px;
}

.payment-current-icon {
    display: grid;

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    place-items: center;

    border: 1px solid rgba(61, 176, 255, .20);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(38, 159, 235, .17),
            rgba(16, 57, 89, .28)
        );

    box-shadow:
        0 0 25px rgba(0, 150, 255, .10);

    font-size: 24px;
}

.payment-current-details {
    display: flex;
    flex-direction: column;
}

.payment-current-label {
    margin-bottom: 4px;

    color: #61bfff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.payment-current-name {
    margin-bottom: 4px;

    color: #f4f8ff;

    font-size: 20px;
    font-weight: 800;
}

.payment-current-expiry {
    color: #8295aa;

    font-size: 13px;
}

.payment-current-days {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: baseline;
    gap: 9px;

    flex-shrink: 0;
}

.payment-current-days strong {
    color: #ffffff;

    font-size: 43px;
    line-height: 1;
    font-weight: 850;

    text-shadow:
        0 0 28px rgba(0, 164, 255, .24);
}

.payment-current-days span {
    color: #71869d;

    font-size: 12px;
    line-height: 1.35;
}


/* TARIFFS */

.payment-page .tariffs-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.payment-page .tariff-card {
    position: relative;

    min-height: 190px;

    padding: 24px 21px 20px;

    text-align: left;

    border: 1px solid rgba(104, 133, 165, .15);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 19, 33, .90),
            rgba(5, 13, 24, .92)
        );

    color: #fff;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.payment-page .tariff-card:hover {
    transform: translateY(-3px);

    border-color: rgba(63, 177, 255, .36);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, .20);
}

.payment-page .tariff-card.active {
    border-color: rgba(43, 169, 255, .72);

    background:
        linear-gradient(
            145deg,
            rgba(13, 53, 82, .78),
            rgba(5, 20, 35, .96)
        );

    box-shadow:
        0 0 0 1px rgba(43, 169, 255, .10),
        0 16px 42px rgba(0, 126, 255, .13);
}


/* BADGES */

.payment-page .tariff-badge-space {
    height: 25px;
}

.payment-page .tariff-badge {
    position: absolute;

    top: 13px;
    right: 14px;

    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 5px 9px;

    border: 1px solid rgba(98, 232, 176, .18);
    border-radius: 8px;

    background: rgba(40, 181, 137, .10);

    color: #70e8b5;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .05em;
    text-transform: uppercase;

    white-space: nowrap;
}

.payment-page .tariff-badge-premium {
    border-color: rgba(72, 183, 255, .22);

    background: rgba(38, 157, 235, .11);

    color: #63c5ff;
}


/* TARIFF NAME */

.payment-page .tariff-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    min-height: 25px;
}

.payment-page .tariff-card-top > span {
    color: #dce8f6;

    font-size: 14px;
    font-weight: 750;
}


/* TOTAL PRICE — MAIN */

.payment-page .tariff-card-price-main {
    position: relative;
    z-index: 2;

    margin-top: 18px;

    color: #ffffff;

    font-size: 31px;
    line-height: 1;

    font-weight: 850;
    letter-spacing: -.03em;

    text-shadow:
        0 0 24px rgba(0, 156, 255, .13);
}


/* MONTHLY PRICE — SECONDARY */

.payment-page .tariff-card-per {
    position: relative;
    z-index: 2;

    margin-top: 8px;

    color: #71869c;

    font-size: 11px;
    font-weight: 500;
}

.payment-page .tariff-card-per small {
    color: #61758b;

    font-size: 10px;
}


/* BOTTOM TEXT */

.payment-page .tariff-card-bottom {
    position: absolute;

    left: 21px;
    bottom: 20px;

    color: #71879e;

    font-size: 11px;
}


/* CHECK */

.payment-page .tariff-check {
    position: absolute;

    right: 17px;
    bottom: 16px;

    display: grid;

    width: 24px;
    height: 24px;

    place-items: center;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;

    color: transparent;

    font-size: 12px;

    transition: .2s ease;
}

.payment-page .tariff-card.active .tariff-check {
    border-color: #2caeff;

    background: #2caeff;

    color: #fff;

    box-shadow:
        0 0 16px rgba(44, 174, 255, .38);
}


/* PAYMENT METHODS */

.payment-page .payment-methods-section {
    margin-top: 38px;
}

.payment-page .payment-methods {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.payment-page .payment-method {
    display: flex;
    align-items: center;

    gap: 15px;

    width: 100%;
    min-height: 80px;

    padding: 17px 20px;

    text-align: left;

    border: 1px solid rgba(104, 133, 165, .14);
    border-radius: 18px;

    background: rgba(7, 16, 29, .78);

    color: #fff;

    cursor: pointer;

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

.payment-page .payment-method:hover {
    transform: translateY(-1px);

    border-color: rgba(64, 177, 255, .34);
}

.payment-page .payment-method.active {
    border-color: rgba(43, 169, 255, .65);

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 74, .72),
            rgba(7, 21, 37, .86)
        );
}

.payment-page .payment-method-icon {
    display: grid;

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    place-items: center;

    border: 1px solid rgba(55, 169, 255, .10);
    border-radius: 13px;

    background: rgba(44, 174, 255, .09);

    font-size: 20px;
}

.payment-page .payment-method strong {
    display: block;

    margin-bottom: 4px;

    color: #f2f7ff;

    font-size: 14px;
}

.payment-page .payment-method span {
    display: block;

    color: #718299;

    font-size: 12px;
    line-height: 1.4;
}

.payment-page .payment-method-check {
    display: grid;

    width: 22px;
    height: 22px;

    margin-left: auto;

    flex-shrink: 0;

    place-items: center;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;

    color: transparent;

    font-size: 11px;
}

.payment-page .payment-method.active .payment-method-check {
    border-color: #2caeff;

    background: #2caeff;

    color: #fff;

    box-shadow:
        0 0 12px rgba(44, 174, 255, .25);
}


/* PAYMENT SUMMARY */

.payment-page .payment-summary-card {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 48px;

    padding: 25px 27px;

    border: 1px solid rgba(71, 174, 255, .23);
    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 28, 46, .94),
            rgba(5, 14, 25, .97)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 14px 38px rgba(0,0,0,.18);
}

.payment-page .payment-summary-card::before {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(60, 182, 255, .30),
            transparent
        );
}

.payment-page .payment-summary-info {
    position: relative;
    z-index: 1;
}

.payment-page .payment-summary-label {
    display: block;

    margin-bottom: 5px;

    color: #7c91a8;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .05em;
}

.payment-page .payment-summary-info strong {
    display: block;

    color: #ffffff;

    font-size: 30px;
    line-height: 1;

    font-weight: 850;
}

.payment-page .payment-summary-info p {
    margin: 7px 0 0;

    color: #71869d;

    font-size: 12px;
}


/* PAY BUTTON */

.payment-page .payment-pay-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 225px;
    min-height: 57px;

    padding: 0 25px;

    border-radius: 15px;

    font-size: 15px;
    font-weight: 800;

    box-shadow:
        0 9px 28px rgba(0, 130, 255, .18);

    overflow: hidden;

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

.payment-page .payment-pay-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -80%;

    width: 50%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        xetvpnPayShine 4s ease-in-out infinite;
}

.payment-page .payment-pay-btn span,
.payment-page .payment-pay-btn strong {
    position: relative;
    z-index: 2;
}

.payment-page .payment-pay-btn strong {
    font-size: 15px;
}

.payment-page .payment-pay-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 34px rgba(0, 137, 255, .26);

    filter: brightness(1.06);
}

.payment-page .payment-pay-btn:active {
    transform: translateY(0);
}

.payment-page .payment-pay-btn.is-loading {
    transform: scale(.985);

    filter: brightness(.9);
}

@keyframes xetvpnPayShine {

    0%,
    60%,
    100% {
        left: -80%;
    }

    20% {
        left: 130%;
    }

}


/* SECURITY */

.payment-page .payment-info-card {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    margin-top: 28px;
    margin-bottom: 8px;

    padding: 18px 21px;

    border: 1px solid rgba(90, 119, 149, .14);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 17, 30, .72),
            rgba(4, 11, 20, .68)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018);
}

.payment-page .payment-info-icon {
    display: grid;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    place-items: center;

    border: 1px solid rgba(92, 185, 255, .12);
    border-radius: 11px;

    background: rgba(44, 174, 255, .07);

    font-size: 16px;
}

.payment-page .payment-info-card strong {
    display: block;

    margin-bottom: 5px;

    color: #d9e7f6;

    font-size: 13px;
    font-weight: 750;
}

.payment-page .payment-info-card p {
    max-width: 760px;

    margin: 0;

    color: #64788f;

    font-size: 11px;
    line-height: 1.55;
}


/* RESPONSIVE */

@media (max-width: 950px) {

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

}

@media (max-width: 700px) {

    .payment-current-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .payment-current-days {
        padding-left: 70px;
    }

    .payment-page .payment-methods {
        grid-template-columns: 1fr;
    }

    .payment-page .payment-summary-card {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .payment-page .payment-pay-btn {
        width: 100%;
    }

}

@media (max-width: 520px) {

    .payment-page .tariffs-grid {
        grid-template-columns: 1fr;
    }

    .payment-page .tariff-card {
        min-height: 180px;
    }

    .payment-page .payment-current-card {
        padding: 21px;
    }

    .payment-current-days {
        padding-left: 0;
    }

    .payment-page .payment-summary-card {
        margin-top: 38px;
        padding: 22px;
    }

    .payment-page .payment-summary-info strong {
        font-size: 27px;
    }

}


/* ============================================================
   PAYMENT — SUBSCRIPTION STATUS
   ============================================================ */

.payment-subscription-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.payment-subscription-status.active {
    color: #55f5a3;
    background: rgba(44, 214, 132, 0.12);
    border: 1px solid rgba(44, 214, 132, 0.28);
    box-shadow: 0 0 18px rgba(44, 214, 132, 0.08);
}

.payment-subscription-status.inactive {
    color: #ff6675;
    background: rgba(255, 77, 94, 0.12);
    border: 1px solid rgba(255, 77, 94, 0.28);
    box-shadow: 0 0 18px rgba(255, 77, 94, 0.08);
}

.payment-current-expiry.inactive {
    color: #ff6675;
}

.payment-current-days strong.inactive {
    color: #ff6675;
}

.connection-status.inactive {
    color: #ff6675;
}

.connection-status.inactive .status-dot {
    background: #ff4d5e;
    box-shadow: 0 0 10px rgba(255, 77, 94, 0.45);
}

@media (max-width: 520px) {

    .payment-subscription-status {
        margin-left: 0;
        margin-top: 6px;
    }

    .payment-current-name-row {
        flex-wrap: wrap;
    }

}


/* XETVPN: inactive connection label */
.connect-page .connection-label.inactive {
    color: #ff6b7a;
}

.connect-page .connection-label.inactive i {
    background: #ff6b7a;
    box-shadow: 0 0 10px rgba(255, 107, 122, 0.55);
}


/* =========================================================
   XETVPN: CONNECT MOBILE FINAL
   Точечная адаптация страницы подключения
========================================================= */

@media (max-width: 700px) {

    .connect-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .connect-page .page-header {
        margin-bottom: 16px;
    }

    .connect-page .page-header > div:first-child {
        min-width: 0;
        width: 100%;
    }

    .connect-page .page-header h1 {
        font-size: 21px;
        line-height: 1.25;
        word-break: normal;
    }

    .connect-page .page-header p {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.5;
    }

    .connect-page .connection-status {
        width: auto;
        max-width: 100%;
        white-space: nowrap;
    }


    /* DEVICE TABS */

    .connect-page .device-tabs {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    .connect-page .device-tab {
        width: 100%;
        min-width: 0;
        min-height: 72px;
        padding: 9px 6px;
        overflow: hidden;
    }

    .connect-page .device-tab-text {
        min-width: 0;
        width: 100%;
    }

    .connect-page .device-tab-text strong,
    .connect-page .device-tab-text small {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .connect-page .device-tab-text strong {
        font-size: 11px;
    }

    .connect-page .device-tab-text small {
        font-size: 8px;
    }


    /* MAIN CONNECTION CARD */

    .connect-page .connection-hero {
        width: 100%;
        min-width: 0;
        padding: 18px;
        border-radius: 16px;
        overflow: hidden;
    }

    .connect-page .connection-main {
        width: 100%;
        min-width: 0;
    }

    .connect-page .connection-label {
        max-width: 100%;
        margin-bottom: 11px;
        font-size: 8px;
        letter-spacing: .8px;
    }

    .connect-page .connection-main h2 {
        max-width: 100%;
        margin-bottom: 7px;
        font-size: 20px;
        line-height: 1.3;
    }

    .connect-page .connection-main > p {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: 11px;
        line-height: 1.55;
    }

    .connect-page .connection-actions {
        width: 100%;
        gap: 8px;
    }

    .connect-page .connection-actions button {
        width: 100%;
        min-width: 0;
        min-height: 45px;
    }


    /* CONFIGURATION */

    .connect-page .config-card {
        width: 100%;
        min-width: 0;
        padding: 15px;
        border-radius: 15px;
        overflow: hidden;
    }

    .connect-page .config-top {
        width: 100%;
        min-width: 0;
    }

    .connect-page .config-top > div:first-child {
        min-width: 0;
    }

    .connect-page .config-top h3 {
        font-size: 16px;
    }

    .connect-page .config-top p {
        font-size: 10px;
        line-height: 1.45;
    }

    .connect-page .config-row {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .connect-page .config-box {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .connect-page .config-text {
        min-width: 0;
        overflow: hidden;
    }

    .connect-page .config-text code {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
    }

    .connect-page .copy-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }


    /* CONNECTION METHODS */

    .connect-page .methods-title {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .connect-page .methods-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .connect-page .method-card {
        width: 100%;
        min-width: 0;
        padding: 15px;
        min-height: 0;
    }

    .connect-page .method-card p {
        font-size: 11px;
        line-height: 1.5;
    }


    /* INSTRUCTIONS */

    .connect-page .instructions-card {
        width: 100%;
        min-width: 0;
        padding: 16px;
        border-radius: 15px;
        overflow: hidden;
    }

    .connect-page .instructions-header h3 {
        font-size: 17px;
        line-height: 1.3;
    }

    .connect-page .instructions-header p {
        font-size: 10px;
    }

    .connect-page .steps {
        gap: 8px;
    }

    .connect-page .step {
        min-width: 0;
    }

    .connect-page .step p {
        font-size: 11px;
        line-height: 1.5;
    }

    .connect-page .incy-download-card {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 12px;
    }

    .connect-page .incy-download-content {
        min-width: 0;
        flex: 1 1 150px;
    }

    .connect-page .incy-download-content h3 {
        font-size: 15px;
        line-height: 1.3;
    }

    .connect-page .incy-download-content p {
        font-size: 10px;
        line-height: 1.45;
    }

    .connect-page .incy-download-btn {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 430px) {

    .connect-page .page-header h1 {
        font-size: 20px;
    }

    .connect-page .device-tabs {
        gap: 6px;
    }

    .connect-page .device-tab {
        min-height: 66px;
        padding: 8px 5px;
    }

    .connect-page .connection-hero {
        padding: 16px;
        border-radius: 15px;
    }

    .connect-page .connection-main h2 {
        font-size: 19px;
    }

    .connect-page .config-card {
        padding: 14px;
    }

    .connect-page .instructions-card {
        padding: 14px;
    }

}


/* =========================================================
   XETVPN — MOBILE INSTRUCTIONS FIX
   Только мобильная версия блока подключения
========================================================= */

@media (max-width: 700px) {

    .connect-page .instructions-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 16px;
        overflow: hidden;
    }

    .connect-page .instructions-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-bottom: 14px;
        box-sizing: border-box;
    }

    .connect-page .instructions-header h3 {
        width: 100%;
        max-width: 100%;
        margin: 0 0 6px;
        font-size: 17px;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .connect-page .instructions-header p {
        width: 100%;
        max-width: 100%;
        margin: 0;
        font-size: 10px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* ВАЖНО: на телефоне шаги идут строго друг под другом */
    .connect-page .steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
        gap: 9px;
        box-sizing: border-box;
    }

    .connect-page .step {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 11px;
        row-gap: 3px;

        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;

        box-sizing: border-box;
        padding: 12px;
        border-radius: 12px;
        overflow: hidden;
    }

    .connect-page .step-number {
        grid-column: 1;
        grid-row: 1 / span 2;

        width: 34px;
        height: 34px;
        min-width: 34px;

        margin: 0;
        border-radius: 9px;
        box-sizing: border-box;
        font-size: 10px;
    }

    .connect-page .step strong {
        grid-column: 2;
        grid-row: 1;

        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 0;

        font-size: 12px;
        line-height: 1.35;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .connect-page .step p {
        grid-column: 2;
        grid-row: 2;

        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 0;

        font-size: 10px;
        line-height: 1.5;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Карточка скачивания INCY */
    .connect-page .incy-download-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
        margin-top: 12px;

        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;

        overflow: hidden;
    }

    .connect-page .incy-download-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        box-sizing: border-box;
        margin: 0;
    }

    .connect-page .incy-download-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        text-align: left;
    }

    .connect-page .incy-download-content h3 {
        width: 100%;
        max-width: 100%;
        margin: 2px 0 5px;

        font-size: 14px;
        line-height: 1.35;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .connect-page .incy-download-content p {
        width: 100%;
        max-width: 100%;
        margin: 0;

        font-size: 10px;
        line-height: 1.5;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .connect-page .incy-download-btn {
        grid-column: 1 / -1;

        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 44px;

        box-sizing: border-box;
        justify-content: center;
    }
}


@media (max-width: 430px) {

    .connect-page .instructions-card {
        padding: 13px;
        border-radius: 14px;
    }

    .connect-page .instructions-header h3 {
        font-size: 16px;
    }

    .connect-page .step {
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 10px;
        padding: 11px;
        border-radius: 11px;
    }

    .connect-page .step-number {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .connect-page .step strong {
        font-size: 11px;
    }

    .connect-page .step p {
        font-size: 9px;
        line-height: 1.55;
    }

    .connect-page .incy-download-card {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }

    .connect-page .incy-download-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .connect-page .incy-download-content h3 {
        font-size: 13px;
    }

    .connect-page .incy-download-content p {
        font-size: 9px;
    }
}


/* ============================================================
   XETVPN ADMIN ACTION MODALS
   Красивые окна действий администратора
   ============================================================ */

.admin-action-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.admin-action-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.admin-action-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, .72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.admin-action-content {
    position: relative;
    width: min(430px, 100%);
    box-sizing: border-box;
    padding: 30px;
    border: 1px solid rgba(100, 170, 255, .16);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(18, 27, 48, .98),
            rgba(9, 15, 29, .98)
        );
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .48),
        0 0 45px rgba(52, 139, 255, .08);
    transform: translateY(12px) scale(.97);
    transition: transform .2s ease;
}

.admin-action-modal.show .admin-action-content {
    transform: translateY(0) scale(1);
}

.admin-action-close {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: rgba(255, 255, 255, .62);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.admin-action-close:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    transform: rotate(90deg);
}

.admin-action-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 16px;
    background: rgba(65, 150, 255, .11);
    border: 1px solid rgba(83, 161, 255, .16);
    font-size: 22px;
    box-shadow: 0 0 25px rgba(55, 145, 255, .08);
}

.admin-action-icon.danger {
    background: rgba(255, 82, 105, .09);
    border-color: rgba(255, 94, 115, .17);
    box-shadow: 0 0 25px rgba(255, 70, 95, .07);
}

.admin-action-content h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.admin-action-description {
    margin: 9px 0 22px;
    color: rgba(220, 229, 245, .58);
    font-size: 12px;
    line-height: 1.55;
}

.admin-action-body {
    margin-top: 20px;
}

.admin-action-field label {
    display: block;
    margin-bottom: 8px;
    color: rgba(232, 239, 250, .72);
    font-size: 11px;
    font-weight: 600;
}

.admin-action-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-action-input-wrap input {
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    padding: 0 72px 0 16px;
    border: 1px solid rgba(110, 170, 245, .14);
    border-radius: 14px;
    outline: none;
    background: rgba(255, 255, 255, .045);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.admin-action-input-wrap input:focus {
    border-color: rgba(72, 158, 255, .55);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 3px rgba(55, 145, 255, .09);
}

.admin-action-input-wrap input.error {
    border-color: rgba(255, 88, 108, .75);
    box-shadow: 0 0 0 3px rgba(255, 75, 100, .09);
}

.admin-action-input-wrap span {
    position: absolute;
    right: 15px;
    color: rgba(220, 230, 245, .4);
    font-size: 11px;
    pointer-events: none;
}

.admin-action-field small {
    display: block;
    margin-top: 7px;
    color: rgba(210, 220, 235, .38);
    font-size: 10px;
}

.admin-action-switch {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
    cursor: pointer;
    user-select: none;
}

.admin-action-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-action-switch-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: background .18s ease;
}

.admin-action-switch-track span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition:
        transform .18s ease,
        background .18s ease;
}

.admin-action-switch input:checked + .admin-action-switch-track {
    background: rgba(64, 153, 255, .28);
    border-color: rgba(76, 158, 255, .38);
}

.admin-action-switch input:checked + .admin-action-switch-track span {
    transform: translateX(18px);
    background: #69b6ff;
    box-shadow: 0 0 10px rgba(78, 165, 255, .45);
}

.admin-action-switch-text {
    color: rgba(232, 239, 250, .7);
    font-size: 12px;
}

.admin-action-warning {
    display: flex;
    gap: 13px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 93, 112, .13);
    background: rgba(255, 74, 97, .055);
}

.admin-action-warning-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 79, 101, .09);
    font-size: 17px;
}

.admin-action-warning strong {
    display: block;
    margin: 1px 0 5px;
    color: #fff;
    font-size: 12px;
}

.admin-action-warning p {
    margin: 0;
    color: rgba(230, 220, 225, .55);
    font-size: 10px;
    line-height: 1.5;
}

.admin-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 25px;
}

.admin-action-buttons button {
    height: 46px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.admin-action-cancel {
    background: rgba(255, 255, 255, .045);
    color: rgba(235, 241, 250, .7);
}

.admin-action-cancel:hover {
    background: rgba(255, 255, 255, .075);
    transform: translateY(-1px);
}

.admin-action-confirm {
    border-color: rgba(70, 155, 255, .22) !important;
    background: linear-gradient(
        135deg,
        rgba(54, 143, 255, .9),
        rgba(44, 113, 225, .9)
    );
    color: #fff;
    box-shadow: 0 8px 25px rgba(45, 128, 240, .17);
}

.admin-action-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 28px rgba(45, 128, 240, .25);
}

.admin-action-confirm.danger {
    border-color: rgba(255, 83, 106, .2) !important;
    background: linear-gradient(
        135deg,
        rgba(225, 67, 88, .92),
        rgba(185, 48, 69, .92)
    );
    box-shadow: 0 8px 25px rgba(220, 55, 78, .13);
}

.admin-action-confirm.danger:hover {
    box-shadow: 0 11px 28px rgba(220, 55, 78, .22);
}

@media (max-width: 520px) {

    .admin-action-modal {
        padding: 14px;
    }

    .admin-action-content {
        padding: 24px 19px 19px;
        border-radius: 20px;
    }

    .admin-action-content h3 {
        font-size: 18px;
    }

    .admin-action-buttons button {
        height: 44px;
    }
}


/* ============================================================
   TELEGRAM АВАТАРЫ В АДМИНКЕ
   ============================================================ */

/* Последние пользователи + Все пользователи */
.admin-user-avatar {
    overflow: hidden;
}

.admin-user-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

/* Аватар в окне «Подробнее» */
.admin-profile-avatar {
    overflow: hidden;
}

.admin-profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

/* Аватар приглашённого пользователя */
.admin-invited-user-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    border-radius: 50%;

    background: rgba(56, 169, 255, 0.1);

    color: #8bcaff;
    font-size: 12px;
    font-weight: 700;
}

.admin-invited-user-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}


/* ============================================================
   XETVPN — TRIAL SUCCESS MODAL
   ============================================================ */

.trial-success-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.trial-success-modal.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.trial-success-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.trial-success-card {
    position: relative;
    width: min(100%, 390px);
    padding: 34px 26px 26px;
    border-radius: 28px;
    background: var(--card-bg, #ffffff);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.28);
    text-align: center;
    transform: translateY(18px) scale(0.96);
    transition: transform 0.3s ease;
}

.trial-success-modal.show .trial-success-card {
    transform: translateY(0) scale(1);
}

.trial-success-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.10);
    color: inherit;
    font-size: 24px;
    line-height: 34px;
    cursor: pointer;
}

.trial-success-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        #ff8a00,
        #ff5a00
    );
    box-shadow:
        0 12px 30px rgba(255, 106, 0, 0.28);
    font-size: 38px;
}

.trial-success-kicker {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.48;
}

.trial-success-card h2 {
    margin: 0 0 9px;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
}

.trial-success-card p {
    margin: 0 auto 20px;
    max-width: 290px;
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.68;
}

.trial-success-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 106, 0, 0.08);
    font-size: 14px;
    font-weight: 600;
}

.trial-success-status span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ff6a00;
    color: #ffffff;
    font-size: 13px;
}

.trial-success-button {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: #ff6a00;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(255, 106, 0, 0.22);
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

.trial-success-button:active {
    transform: scale(0.98);
}

@media (max-width: 480px) {
    .trial-success-modal {
        padding: 18px;
    }

    .trial-success-card {
        padding: 30px 20px 20px;
        border-radius: 24px;
    }

    .trial-success-card h2 {
        font-size: 25px;
    }
}


/* ============================================================
   XETVPN — TRIAL TOP NOTIFICATION
   ============================================================ */

.trial-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 99999;

    display: flex;
    justify-content: center;

    padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;
}

.trial-success-modal.show {
    visibility: visible;
    opacity: 1;
}

.trial-success-backdrop {
    display: none;
}

.trial-success-card {
    position: relative;

    width: min(100%, 420px);

    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 13px;

    border-radius: 18px;

    background: rgba(30, 30, 30, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.13);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    color: #ffffff;

    transform: translateY(-18px);

    transition:
        transform 0.32s cubic-bezier(.2,.8,.2,1);
}

.trial-success-modal.show .trial-success-card {
    transform: translateY(0);
}

.trial-success-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: rgba(255, 106, 0, 0.18);

    box-shadow: none;

    font-size: 22px;
}

.trial-success-kicker {
    display: none;
}

.trial-success-card h2 {
    margin: 0 0 2px;

    font-size: 15px;
    line-height: 1.25;

    font-weight: 750;
}

.trial-success-card p {
    margin: 0;

    max-width: none;

    font-size: 12px;
    line-height: 1.35;

    opacity: 0.68;
}

.trial-success-status {
    display: none;
}

.trial-success-button {
    display: none;
}

.trial-success-close {
    display: none;
}

@media (max-width: 480px) {

    .trial-success-modal {
        padding-left: 12px;
        padding-right: 12px;
    }

    .trial-success-card {
        padding: 13px 15px;
        border-radius: 17px;
    }

    .trial-success-card h2 {
        font-size: 14px;
    }

    .trial-success-card p {
        font-size: 11px;
    }
}


/* FINAL FIX — MINI APP TRIAL TOP TOAST */
.trial-success-modal {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-20px) !important;

    width: calc(100% - 24px) !important;
    max-width: 420px !important;

    padding: 14px 18px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    z-index: 2147483647 !important;

    background: rgba(25, 25, 25, 0.78) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.18) !important;

    transition:
        opacity 0.25s ease,
        transform 0.3s cubic-bezier(.2,.8,.2,1) !important;
}

.trial-success-modal.show {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

.trial-success-backdrop {
    display: none !important;
}

.trial-success-card {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.trial-success-icon {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    font-size: 21px !important;

    background: rgba(255, 149, 0, 0.16) !important;
    border-radius: 13px !important;
}

.trial-success-kicker {
    display: none !important;
}

.trial-success-card h2 {
    margin: 0 0 3px !important;
    font-size: 15px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.trial-success-card p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: rgba(255, 255, 255, 0.68) !important;
}

.trial-success-status,
.trial-success-button,
.trial-success-close {
    display: none !important;
}

@media (max-width: 480px) {
    .trial-success-modal {
        top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
        width: calc(100% - 20px) !important;
    }
}


/* =========================
   LEGAL LINKS
   ========================= */

.legal-links {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 14px 0 20px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #8f96a3);
    text-align: center;
}

.legal-links button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
}

.legal-links button:hover {
    color: var(--accent, #ffffff);
}

.legal-links span {
    opacity: 0.5;
    user-select: none;
}

.legal-page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.legal-card {
    background: var(--card-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 18px;
    padding: 28px;
    line-height: 1.7;
    color: var(--text-primary, #ffffff);
    box-sizing: border-box;
}

.legal-card h2 {
    margin: 28px 0 10px;
    font-size: 18px;
}

.legal-card h2:first-of-type {
    margin-top: 20px;
}

.legal-card p {
    margin: 10px 0;
}

.legal-card ul {
    margin: 8px 0 16px;
    padding-left: 22px;
}

.legal-card li {
    margin: 5px 0;
}

.legal-updated {
    margin-top: 28px !important;
    padding-top: 18px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    opacity: 0.65;
    font-size: 12px;
}

@media (max-width: 600px) {
    .legal-links {
        gap: 7px;
        font-size: 11px;
    }

    .legal-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .legal-card h2 {
        font-size: 16px;
    }
}


/* =========================
   PAYMENT LEGAL NOTICE
   ========================= */

.payment-legal-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #9ca3af);
}

.payment-legal-notice > span {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.5;
}

.payment-legal-notice p {
    margin: 0;
}

.payment-legal-notice button {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: var(--accent, #7c5cff);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.payment-legal-notice button:hover {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .payment-legal-notice {
        margin: 10px 0 16px;
        padding: 11px 12px;
        font-size: 11px;
    }
}


/* ============================================================
   PAYMENT RESULT PAGES
   ============================================================ */

.payment-result-page {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 40px;
    box-sizing: border-box;
}

.payment-result-card {
    width: min(100%, 460px);
    padding: 34px 24px 28px;
    border-radius: 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.payment-result-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 800;
}

.payment-result-icon.success {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.28);
    box-shadow: 0 0 35px rgba(52, 211, 153, 0.12);
}

.payment-result-icon.fail {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.28);
    box-shadow: 0 0 35px rgba(248, 113, 113, 0.10);
}

.payment-result-label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}

.payment-result-card h1 {
    margin: 0;
    font-size: clamp(25px, 6vw, 34px);
    line-height: 1.15;
}

.payment-result-text {
    max-width: 360px;
    margin: 16px auto 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, #9ca3af);
}

.payment-result-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

.payment-result-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.payment-result-btn {
    width: 100%;
    margin-top: 2px;
}

.payment-result-btn-secondary {
    width: 100%;
    margin-top: 10px;
}

.payment-result-success .payment-result-status-dot {
    color: #34d399;
}

.payment-result-fail .payment-result-status-dot {
    color: #f87171;
}

@media (max-width: 600px) {
    .payment-result-page {
        min-height: calc(100vh - 60px);
        padding: 18px 12px 30px;
    }

    .payment-result-card {
        padding: 30px 18px 22px;
        border-radius: 24px;
    }

    .payment-result-icon {
        width: 68px;
        height: 68px;
        font-size: 34px;
        margin-bottom: 19px;
    }
}


/* ============================================================
   EXTRA DEVICES — PAYMENT OPTION
   ============================================================ */

.payment-extra-devices {
    margin: 16px 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.payment-extra-devices:has(
    #extraDevicesCheckbox:checked
) {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.055);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18);
}

.payment-extra-devices-row {
    min-height: 68px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Скрываем стандартный checkbox */
.payment-extra-devices-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Кастомный переключатель */
.payment-extra-devices-check {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: transparent;
    background: rgba(255, 255, 255, 0.035);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}

.payment-extra-devices-row:hover
.payment-extra-devices-check {
    border-color: rgba(255, 255, 255, 0.42);
}

.payment-extra-devices-row input[type="checkbox"]:checked
~ .payment-extra-devices-check {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
}

.payment-extra-devices-row:active
.payment-extra-devices-check {
    transform: scale(0.92);
}

/* Текст */
.payment-extra-devices-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.payment-extra-devices-text strong {
    font-size: 14px;
    line-height: 18px;
    font-weight: 650;
    color: var(--text-primary, #fff);
}

.payment-extra-devices-text small {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.52));
}

/* Цена */
.payment-extra-devices-text small {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 600;
}

/* Кнопка информации */
.payment-extra-devices-info {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.payment-extra-devices-info:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Информация под карточкой */
.payment-extra-devices-hint {
    margin: 0 14px 13px;
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    line-height: 17px;
}

/* Светлая тема */
body.light .payment-extra-devices,
[data-theme="light"] .payment-extra-devices {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.025);
}

body.light .payment-extra-devices:has(
    #extraDevicesCheckbox:checked
),
[data-theme="light"] .payment-extra-devices:has(
    #extraDevicesCheckbox:checked
) {
    border-color: rgba(0, 0, 0, 0.16);
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

body.light .payment-extra-devices-check,
[data-theme="light"] .payment-extra-devices-check {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.025);
}

body.light .payment-extra-devices-row input[type="checkbox"]:checked
~ .payment-extra-devices-check,
[data-theme="light"] .payment-extra-devices-row input[type="checkbox"]:checked
~ .payment-extra-devices-check {
    color: #111;
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.35);
}

body.light .payment-extra-devices-info,
[data-theme="light"] .payment-extra-devices-info {
    border-color: rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.025);
    color: rgba(0, 0, 0, 0.52);
}

body.light .payment-extra-devices-hint,
[data-theme="light"] .payment-extra-devices-hint {
    background: rgba(0, 0, 0, 0.035);
    border-color: rgba(0, 0, 0, 0.07);
    color: rgba(0, 0, 0, 0.58);
}

/* Мобильные экраны */
@media (max-width: 480px) {

    .payment-extra-devices {
        margin: 14px 0 16px;
        border-radius: 16px;
    }

    .payment-extra-devices-row {
        min-height: 64px;
        padding: 11px 12px;
        gap: 10px;
    }

    .payment-extra-devices-check {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    .payment-extra-devices-text strong {
        font-size: 13px;
    }

    .payment-extra-devices-text small {
        font-size: 11px;
    }

    .payment-extra-devices-info {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }
}


/* ============================================================
   EXTRA DEVICES — PAYMENT OPTION
   ============================================================ */

.payment-extra-devices {
    margin: 16px 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.payment-extra-devices:has(
    #extraDevicesCheckbox:checked
) {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.055);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18);
}

.payment-extra-devices-row {
    min-height: 68px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Скрываем стандартный checkbox */
.payment-extra-devices-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Кастомный переключатель */
.payment-extra-devices-check {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: transparent;
    background: rgba(255, 255, 255, 0.035);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}

.payment-extra-devices-row:hover
.payment-extra-devices-check {
    border-color: rgba(255, 255, 255, 0.42);
}

.payment-extra-devices-row input[type="checkbox"]:checked
~ .payment-extra-devices-check {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
}

.payment-extra-devices-row:active
.payment-extra-devices-check {
    transform: scale(0.92);
}

/* Текст */
.payment-extra-devices-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.payment-extra-devices-text strong {
    font-size: 14px;
    line-height: 18px;
    font-weight: 650;
    color: var(--text-primary, #fff);
}

.payment-extra-devices-text small {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.52));
}

/* Цена */
.payment-extra-devices-text small::before {
    content: "Доплата ";
}

/* Кнопка информации */
.payment-extra-devices-info {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.payment-extra-devices-info:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Информация под карточкой */
.payment-extra-devices-hint {
    margin: 0 14px 13px;
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    line-height: 17px;
}

/* Светлая тема */
body.light .payment-extra-devices,
[data-theme="light"] .payment-extra-devices {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.025);
}

body.light .payment-extra-devices:has(
    #extraDevicesCheckbox:checked
),
[data-theme="light"] .payment-extra-devices:has(
    #extraDevicesCheckbox:checked
) {
    border-color: rgba(0, 0, 0, 0.16);
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

body.light .payment-extra-devices-check,
[data-theme="light"] .payment-extra-devices-check {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.025);
}

body.light .payment-extra-devices-row input[type="checkbox"]:checked
~ .payment-extra-devices-check,
[data-theme="light"] .payment-extra-devices-row input[type="checkbox"]:checked
~ .payment-extra-devices-check {
    color: #111;
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.35);
}

body.light .payment-extra-devices-info,
[data-theme="light"] .payment-extra-devices-info {
    border-color: rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.025);
    color: rgba(0, 0, 0, 0.52);
}

body.light .payment-extra-devices-hint,
[data-theme="light"] .payment-extra-devices-hint {
    background: rgba(0, 0, 0, 0.035);
    border-color: rgba(0, 0, 0, 0.07);
    color: rgba(0, 0, 0, 0.58);
}

/* Мобильные экраны */
@media (max-width: 480px) {

    .payment-extra-devices {
        margin: 14px 0 16px;
        border-radius: 16px;
    }

    .payment-extra-devices-row {
        min-height: 64px;
        padding: 11px 12px;
        gap: 10px;
    }

    .payment-extra-devices-check {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    .payment-extra-devices-text strong {
        font-size: 13px;
    }

    .payment-extra-devices-text small {
        font-size: 11px;
    }

    .payment-extra-devices-info {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }
}


/* ============================================================
   TOAST — скрыт по умолчанию
   Показывается только через .show
   ============================================================ */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 15px;
    border-radius: 14px;

    background: rgba(20, 20, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);

    color: #fff;
    font-size: 13px;
    font-weight: 600;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 800;
}

/* ============================================================
   PAYMENT — COMPACT MOBILE TARIFFS
   Только мобильные устройства
   ============================================================ */

@media (max-width: 600px) {

    .payment-page .tariffs-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
    }

    .payment-page .tariff-card {
        position: relative;
        min-height: 0 !important;
        height: auto !important;
        padding: 16px 16px 14px !important;
        border-radius: 16px;
    }

    .payment-page .tariff-card:hover {
        transform: none;
    }

    .payment-page .tariff-card-top {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 7px !important;
        min-height: 28px;
    }

    .payment-page .tariff-card-top > span {
        font-size: 17px !important;
        line-height: 22px !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }

    .payment-page .tariff-card-price-main {
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: 800 !important;
        white-space: nowrap;
    }

    .payment-page .tariff-card-per {
        margin-top: 0 !important;
        font-size: 14px !important;
        line-height: 19px !important;
    }

    .payment-page .tariff-card-per small {
        font-size: 13px !important;
    }

    .payment-page .tariff-card-bottom {
        margin-top: 9px !important;
        min-height: 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .payment-page .tariff-check {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
    }

    .payment-page .tariff-badge {
        padding: 6px 10px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 13px !important;
        letter-spacing: 0.3px !important;
    }

    .payment-page .tariff-badge-space {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .payment-page .tariff-card.active {
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.18);
    }

}

/* Очень узкие экраны — ещё компактнее */

@media (max-width: 390px) {

    .payment-page .tariff-card {
        padding: 14px 14px 12px !important;
        border-radius: 15px;
    }

    .payment-page .tariff-card-top > span {
        font-size: 16px !important;
    }

    .payment-page .tariff-card-price-main {
        font-size: 17px !important;
    }

    .payment-page .tariff-card-per {
        font-size: 13px !important;
    }

    .payment-page .tariff-badge {
        padding: 5px 8px !important;
        font-size: 9px !important;
    }

}

/* ============================================================
   XETVPN — MOBILE PAYMENT TARIFF CARDS FINAL
   Полностью переопределяем старую мобильную компоновку
   ============================================================ */

@media (max-width: 600px) {

    .payment-page .tariffs-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .payment-page .tariff-card {
        position: relative !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto auto !important;

        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        box-sizing: border-box !important;

        padding: 16px 16px 14px !important;

        border-radius: 17px !important;

        overflow: hidden !important;
    }

    /* Название тарифа */

    .payment-page .tariff-card-top {
        position: static !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;

        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .payment-page .tariff-card-top > span {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #dce8f6 !important;

        font-size: 17px !important;
        line-height: 22px !important;
        font-weight: 750 !important;

        white-space: nowrap !important;
    }

    /* Общая цена */

    .payment-page .tariff-card-price-main {
        position: static !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #fff !important;

        font-size: 20px !important;
        line-height: 22px !important;
        font-weight: 850 !important;

        text-align: right !important;
        white-space: nowrap !important;

        text-shadow: none !important;
    }

    /* Цена за месяц */

    .payment-page .tariff-card-per {
        position: static !important;

        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        margin: 7px 0 0 !important;
        padding: 0 !important;

        color: #c4d0dd !important;

        font-size: 14px !important;
        line-height: 19px !important;
        font-weight: 500 !important;
    }

    .payment-page .tariff-card-per small {
        color: #71869c !important;

        font-size: 12px !important;
    }

    /* Нижняя строка */

    .payment-page .tariff-card-bottom {
        position: static !important;

        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        min-height: 18px !important;

        margin: 7px 0 0 !important;
        padding: 0 !important;

        color: #71879e !important;

        font-size: 12px !important;
        line-height: 18px !important;
    }

    /* Чекбокс выбора */

    .payment-page .tariff-check {
        position: absolute !important;

        right: 12px !important;
        bottom: 12px !important;

        width: 20px !important;
        height: 20px !important;

        margin: 0 !important;
    }

    /* Бейдж */

    .payment-page .tariff-badge {
        position: absolute !important;

        top: auto !important;
        right: 12px !important;
        bottom: 10px !important;

        min-height: 0 !important;

        max-width: calc(100% - 90px) !important;

        padding: 5px 8px !important;

        border-radius: 9px !important;

        font-size: 9px !important;
        line-height: 12px !important;

        letter-spacing: .035em !important;

        white-space: nowrap !important;
    }

    /* Если есть бейдж — освобождаем место снизу */

    .payment-page .tariff-card:has(.tariff-badge) .tariff-card-bottom {
        padding-right: 125px !important;
    }

    /* Пустое место под бейдж */

    .payment-page .tariff-badge-space {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Активная карточка */

    .payment-page .tariff-card.active {
        box-shadow:
            0 0 0 1px rgba(43,169,255,.08),
            0 10px 28px rgba(0,126,255,.12) !important;
    }

}


/* ============================================================
   VERY SMALL IPHONES
   ============================================================ */

@media (max-width: 390px) {

    .payment-page .tariff-card {
        padding: 14px 14px 13px !important;
        border-radius: 16px !important;
    }

    .payment-page .tariff-card-top > span {
        font-size: 16px !important;
        line-height: 21px !important;
    }

    .payment-page .tariff-card-price-main {
        font-size: 18px !important;
        line-height: 21px !important;
    }

    .payment-page .tariff-card-per {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .payment-page .tariff-card-bottom {
        font-size: 11px !important;
    }

    .payment-page .tariff-badge {
        font-size: 8px !important;
        padding: 4px 7px !important;
    }

}


/* ============================================================
   MOBILE TARIFFS — FINAL SPACING
   ============================================================ */

@media (max-width: 600px) {

    /* Для 1 месяца цена за месяц не нужна */
    .payment-page .tariff-card:first-child .tariff-card-per {
        display: none !important;
    }

    /* Для остальных тарифов разделяем месячную цену и экономию */
    .payment-page .tariff-card:not(:first-child) .tariff-card-per {
        margin-top: 8px !important;
        margin-bottom: 5px !important;
    }

    .payment-page .tariff-card:not(:first-child) .tariff-card-bottom {
        margin-top: 12px !important;
    }

    /* Для первого тарифа нижний текст поднимаем на место скрытой строки */
    .payment-page .tariff-card:first-child .tariff-card-bottom {
        grid-row: 2 !important;
        margin-top: 10px !important;
    }

}

/* ============================================================
   MOBILE PAYMENT — TARIFF CARDS FINAL FIX
   ============================================================ */

@media (max-width: 600px) {

    .payment-page .tariff-card {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto !important;

        min-height: 0 !important;
        height: auto !important;

        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* Название + общая цена */
    .payment-page .tariff-card .tariff-card-top {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-height: 24px !important;
        margin: 0 !important;
    }

    .payment-page .tariff-card .tariff-card-top > span {
        font-size: 16px !important;
        line-height: 21px !important;
        font-weight: 700 !important;
    }

    .payment-page .tariff-card .tariff-card-top > strong {
        font-size: 19px !important;
        line-height: 22px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    /* Цена за месяц — правильный класс */
    .payment-page .tariff-card .tariff-card-price {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        position: static !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;

        font-size: 14px !important;
        line-height: 19px !important;
        color: #c4d0dd !important;
    }

    .payment-page .tariff-card .tariff-card-price small {
        font-size: 12px !important;
        color: #71869c !important;
    }

    /* Экономия / базовая цена */
    .payment-page .tariff-card .tariff-card-bottom {
        grid-column: 1 !important;
        grid-row: 3 !important;

        position: static !important;

        margin: 11px 0 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 17px !important;
        color: #71879e !important;
    }

    /* Чек */
    .payment-page .tariff-card .tariff-check {
        position: absolute !important;

        right: 14px !important;
        bottom: 13px !important;

        width: 20px !important;
        height: 20px !important;
    }

    /* Бейдж */
    .payment-page .tariff-card .tariff-badge {
        position: absolute !important;

        right: 42px !important;
        bottom: 11px !important;

        top: auto !important;

        padding: 4px 8px !important;

        border-radius: 8px !important;

        font-size: 8px !important;
        line-height: 12px !important;
        letter-spacing: .03em !important;
    }

    /* У первого тарифа цена за месяц полностью убирается */
    .payment-page .tariff-card[data-tariff="1"] .tariff-card-price {
        display: none !important;
    }

    /* А базовая цена поднимается выше */
    .payment-page .tariff-card[data-tariff="1"] .tariff-card-bottom {
        grid-row: 2 !important;
        margin-top: 9px !important;
    }

    /* У тарифов 3/6/12 больше воздуха между месяцем и экономией */
    .payment-page .tariff-card[data-tariff="3"] .tariff-card-bottom,
    .payment-page .tariff-card[data-tariff="6"] .tariff-card-bottom,
    .payment-page .tariff-card[data-tariff="12"] .tariff-card-bottom {
        margin-top: 13px !important;
        padding-right: 125px !important;
    }

}


/* Очень маленькие экраны */

@media (max-width: 390px) {

    .payment-page .tariff-card {
        padding: 14px !important;
    }

    .payment-page .tariff-card .tariff-card-top > span {
        font-size: 15px !important;
    }

    .payment-page .tariff-card .tariff-card-top > strong {
        font-size: 18px !important;
    }

    .payment-page .tariff-card .tariff-card-price {
        font-size: 13px !important;
    }

    .payment-page .tariff-card .tariff-card-bottom {
        font-size: 11px !important;
    }

}


/* ============================================================
   SBP ICON — PAYMENT INFO
   ============================================================ */

.payment-sbp-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.payment-sbp-icon {
    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
}

.payment-sbp-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

@media (max-width: 600px) {

    .payment-sbp-icon {
        width: 17px;
        height: 17px;
    }

    .payment-sbp-icon svg {
        width: 17px;
        height: 17px;
    }

}

/* ============================================================
   PAYMENT METHODS — INFORMATION ONLY
   ============================================================ */

.payment-page .payment-methods-info {
    margin-top: 28px;
    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    border: 1px solid rgba(104, 133, 165, .12);
    border-radius: 16px;

    background: rgba(8, 19, 33, .55);
}

.payment-page .payment-methods-info-title {
    color: #71869c;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.payment-page .payment-methods-info-options {
    display: flex;
    align-items: center;
    gap: 14px;

    color: #cbd8e6;
    font-size: 12px;
    font-weight: 600;
}

.payment-page .payment-methods-info-options span {
    white-space: nowrap;
}


/* MOBILE */

@media (max-width: 600px) {

    .payment-page .payment-methods-info {
        margin-top: 18px;
        padding: 12px 14px;

        border-radius: 14px;

        gap: 10px;
    }

    .payment-page .payment-methods-info-title {
        font-size: 11px;
    }

    .payment-page .payment-methods-info-options {
        gap: 9px;
        font-size: 11px;
    }

}


/* ============================================================
   SBP ICON — PAYMENT INFO
   ============================================================ */

.payment-sbp-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.payment-sbp-icon {
    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
}

.payment-sbp-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

@media (max-width: 600px) {

    .payment-sbp-icon {
        width: 17px;
        height: 17px;
    }

    .payment-sbp-icon svg {
        width: 17px;
        height: 17px;
    }

}

/* ============================================================
   PAYMENT METHOD — LARGE INFO BLOCK
   ============================================================ */

.payment-page .payment-methods-info {
    width: 100%;
    box-sizing: border-box;
    margin-top: 26px;
    padding: 20px 22px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    border: 1px solid rgba(104, 133, 165, .18);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 35, 55, .72),
            rgba(8, 19, 33, .72)
        );

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .14);
}

.payment-page .payment-methods-info-title {
    display: block;

    color: #ffffff;
    font-size: 17px;
    line-height: 22px;
    font-weight: 700;
}

.payment-page .payment-methods-info-options {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 13px;

    color: #d7e2ed;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}

.payment-page .payment-methods-info-options span {
    white-space: nowrap;
}

.payment-page .payment-methods-info-separator {
    color: #61758a;
    font-size: 18px;
    font-weight: 400;
}

.payment-page .payment-sbp-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.payment-page .payment-sbp-icon {
    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    background: #ffffff;
    overflow: hidden;
}

.payment-page .payment-sbp-icon svg {
    width: 18px;
    height: 18px;
}

/* mobile */
@media (max-width: 600px) {

    .payment-page .payment-methods-info {
        margin-top: 22px;
        padding: 18px 18px;
        border-radius: 18px;
        gap: 10px;
    }

    .payment-page .payment-methods-info-title {
        font-size: 16px;
        line-height: 21px;
    }

    .payment-page .payment-methods-info-options {
        font-size: 14px;
        gap: 11px;
    }

    .payment-page .payment-sbp-icon {
        width: 21px;
        height: 21px;
        border-radius: 5px;
    }

    .payment-page .payment-sbp-icon svg {
        width: 17px;
        height: 17px;
    }
}

/* ============================================================
   PAYMENT BRAND LOGOS — MIR / VISA / SBP
   ============================================================ */

.payment-page .payment-methods-info {
    width: 100%;
    box-sizing: border-box;
    margin-top: 26px;
    padding: 20px 22px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    border: 1px solid rgba(104, 133, 165, .18);
    border-radius: 20px;

    background: linear-gradient(
        135deg,
        rgba(17, 35, 55, .72),
        rgba(8, 19, 33, .72)
    );

    box-shadow: 0 10px 30px rgba(0,0,0,.14);
}

.payment-page .payment-methods-info-title {
    color: #fff;
    font-size: 17px;
    line-height: 22px;
    font-weight: 700;
}

.payment-page .payment-methods-info-options {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;

    color: #d7e2ed;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}

.payment-page .payment-card-logos {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-page .payment-logo {
    height: 30px;
    min-width: 52px;
    padding: 5px 9px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    background: rgba(255,255,255,.96);

    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.payment-page .payment-logo img {
    display: block;
    max-width: 100%;
    max-height: 20px;
    width: auto;
    height: auto;
}

.payment-page .payment-logo-mir {
    min-width: 55px;
}

.payment-page .payment-logo-visa {
    min-width: 55px;
}

.payment-page .payment-methods-info-separator {
    color: #62778c;
    font-size: 20px;
    font-weight: 400;
}

.payment-page .payment-sbp-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.payment-page .payment-sbp-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    overflow: hidden;

    background: #fff;
}

.payment-page .payment-sbp-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

@media (max-width: 600px) {

    .payment-page .payment-methods-info {
        margin-top: 22px;
        padding: 18px;
        border-radius: 18px;
        gap: 13px;
    }

    .payment-page .payment-methods-info-title {
        font-size: 16px;
        line-height: 21px;
    }

    .payment-page .payment-methods-info-options {
        gap: 10px;
        font-size: 14px;
    }

    .payment-page .payment-card-logos {
        gap: 6px;
    }

    .payment-page .payment-logo {
        height: 28px;
        min-width: 48px;
        padding: 5px 7px;
        border-radius: 7px;
    }

    .payment-page .payment-logo img {
        max-height: 18px;
    }

    .payment-page .payment-sbp-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }

    .payment-page .payment-sbp-icon img {
        width: 22px;
        height: 22px;
    }

}


/* ============================================================
   COMPACT CURRENT SUBSCRIPTION
   ============================================================ */

.payment-page .payment-current-compact {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    padding: 4px 0;
}

.payment-page .payment-current-days-number {
    font-size: 30px;
    line-height: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #ffffff;
}

.payment-page .payment-current-days-number.inactive {
    color: #71869c;
}

.payment-page .payment-current-days-label {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: #91a3b5;
}

.payment-page .payment-current-days-separator {
    margin: 0 2px;
    color: #52687c;
    font-size: 16px;
}

.payment-page .payment-current-expiry-compact {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: #cbd8e6;
}

@media (max-width: 600px) {

    .payment-page .payment-current-compact {
        gap: 6px;
    }

    .payment-page .payment-current-days-number {
        font-size: 27px;
        line-height: 29px;
    }

    .payment-page .payment-current-days-label,
    .payment-page .payment-current-expiry-compact {
        font-size: 12px;
    }

}


/* ============================================================
   PAYMENT PAGE HEADER — BUY / RENEW + PAYMENT LOGOS
   ============================================================ */

.payment-page .payment-page-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.payment-page .payment-page-title h1 {
    margin: 0;
    font-size: 25px;
    line-height: 30px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.payment-page .payment-page-payment-logos {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
}

.payment-page .payment-page-logo {
    height: 25px;
    min-width: 43px;
    padding: 4px 7px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.96);
    border-radius: 6px;

    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.payment-page .payment-page-logo img {
    display: block;
    max-width: 100%;
    max-height: 16px;
    width: auto;
    height: auto;
}

.payment-page .payment-page-logo-separator {
    margin: 0 2px;
    color: #61758a;
    font-size: 17px;
}

.payment-page .payment-page-sbp-logo {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.payment-page .payment-page-sbp-logo img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.payment-page .payment-page-sbp-text {
    margin-left: -2px;
    color: #cbd8e6;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 600px) {

    .payment-page .payment-page-title {
        gap: 7px;
    }

    .payment-page .payment-page-title h1 {
        font-size: 22px;
        line-height: 27px;
    }

    .payment-page .payment-page-payment-logos {
        gap: 6px;
    }

    .payment-page .payment-page-logo {
        height: 23px;
        min-width: 40px;
        padding: 4px 6px;
        border-radius: 5px;
    }

    .payment-page .payment-page-logo img {
        max-height: 14px;
    }

    .payment-page .payment-page-sbp-logo {
        width: 23px;
        height: 23px;
        border-radius: 5px;
    }

    .payment-page .payment-page-sbp-logo img {
        width: 18px;
        height: 18px;
    }

}


/* ============================================================
   PAYMENT HEADER — TITLE + LOGOS IN ONE ROW
   ============================================================ */

.payment-page .page-header {
    align-items: center;
}

.payment-page .payment-page-title {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.payment-page .payment-page-title h1 {
    white-space: nowrap;
}

.payment-page .payment-page-payment-logos {
    height: 28px;
    gap: 6px;
    flex-shrink: 0;
}

.payment-page .payment-page-logo-separator {
    display: none;
}

.payment-page .payment-page-sbp-text {
    margin-left: -2px;
}

@media (max-width: 600px) {

    .payment-page .page-header {
        align-items: center;
    }

    .payment-page .payment-page-title {
        gap: 8px;
    }

    .payment-page .payment-page-payment-logos {
        gap: 4px;
    }

    .payment-page .payment-page-logo {
        min-width: 36px;
        height: 22px;
        padding: 3px 5px;
    }

    .payment-page .payment-page-logo img {
        max-height: 13px;
    }

    .payment-page .payment-page-sbp-logo {
        width: 22px;
        height: 22px;
    }

    .payment-page .payment-page-sbp-logo img {
        width: 17px;
        height: 17px;
    }

    .payment-page .payment-page-sbp-text {
        font-size: 11px;
    }

}


/* ============================================================
   PAYMENT HEADER — STATUS CENTERED BELOW TITLE
   ============================================================ */

.payment-page .page-header {
    position: relative;
}

.payment-page .page-header > .connection-status {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);

    white-space: nowrap;
}

@media (max-width: 600px) {

    .payment-page .page-header > .connection-status {
        top: calc(100% + 7px);
    }

}


/* Опускаем блок срока подписки ниже */
.payment-page .payment-current-card {
    margin-top: 32px;
}

@media (max-width: 600px) {
    .payment-page .payment-current-card {
        margin-top: 38px;
    }
}


.payment-page .payment-current-card {
    margin-top: 60px !important;
}

@media (max-width: 600px) {
    .payment-page .payment-current-card {
        margin-top: 66px !important;
    }
}


/* ============================================================
   PREMIUM SYSTEM STATUS
   ============================================================ */

.home-page .home-system-card {
    position: relative;

    margin-top: 24px;
    padding: 17px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border: 1px solid rgba(120, 150, 180, .14);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(20, 35, 52, .72),
            rgba(9, 18, 30, .72)
        );

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .16);

    overflow: hidden;
}

.home-page .home-system-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: rgba(105, 225, 175, .85);
}

.home-page .home-system-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.home-page .home-system-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(105, 225, 175, .10);
    border: 1px solid rgba(105, 225, 175, .18);

    color: #79e6b5;
    font-size: 15px;
    font-weight: 800;

    box-shadow:
        0 0 18px rgba(105, 225, 175, .08);
}

.home-page .home-system-left strong {
    display: block;

    color: #edf4fa;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.home-page .home-system-left span {
    display: block;

    margin-top: 2px;

    color: #71869b;
    font-size: 11px;
    line-height: 16px;
}

.home-page .home-system-status {
    flex-shrink: 0;

    padding: 6px 10px;

    border-radius: 999px;

    background: rgba(105, 225, 175, .08);
    border: 1px solid rgba(105, 225, 175, .15);

    color: #79e6b5;
    font-size: 10px;
    line-height: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .4px;
}

@media (max-width: 600px) {

    .home-page .home-system-card {
        margin-top: 20px;
        padding: 15px;
        border-radius: 16px;
        gap: 10px;
    }

    .home-page .home-system-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 9px;
    }

    .home-page .home-system-left {
        gap: 10px;
    }

    .home-page .home-system-left strong {
        font-size: 12px;
    }

    .home-page .home-system-left span {
        font-size: 10px;
    }

    .home-page .home-system-status {
        padding: 5px 8px;
        font-size: 9px;
    }

}


/* ============================================================
   XETVPN — PREMIUM SECURITY STATUS
   ============================================================ */

.home-page .home-system-card {
    width: 100%;
    box-sizing: border-box;

    margin-top: 24px;
    padding: 18px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;

    background: rgba(255,255,255,.025);

    box-shadow: none;
}

.home-page .home-system-brand {
    color: #f1f5f9;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    letter-spacing: .2px;
}

.home-page .home-system-secure {
    color: #63e6a6;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 13px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: 1px;

    text-shadow:
        0 0 14px rgba(99,230,166,.18);
}

@media (max-width: 600px) {

    .home-page .home-system-card {
        margin-top: 20px;
        padding: 16px 18px;
        border-radius: 14px;
    }

    .home-page .home-system-brand {
        font-size: 15px;
    }

    .home-page .home-system-secure {
        font-size: 12px;
        letter-spacing: .8px;
    }

}



/* =========================================================
   HOME — SYSTEM STATUS
   ========================================================= */

.home-page .home-system-card {
    width: 100%;
    min-height: 58px;
    box-sizing: border-box;

    margin-top: 22px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.home-page .home-system-brand {
    display: flex;
    align-items: center;
    gap: 5px;

    white-space: nowrap;
}

.home-page .home-system-brand-text {
    color: #f5f7fa;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 15px;
    line-height: 20px;
    font-weight: 800;

    letter-spacing: .25px;
}

.home-page .home-system-brand-rocket {
    font-size: 14px;
    line-height: 1;
}

.home-page .home-system-status {
    display: flex;
    align-items: center;
    gap: 8px;

    white-space: nowrap;
}

.home-page .home-system-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #63e6a6;

    box-shadow:
        0 0 0 3px rgba(99,230,166,.08),
        0 0 12px rgba(99,230,166,.45);
}

.home-page .home-system-secure {
    color: #63e6a6;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 11px;
    line-height: 16px;
    font-weight: 800;

    letter-spacing: 1.1px;
}

@media (max-width: 600px) {

    .home-page .home-system-card {
        min-height: 54px;
        margin-top: 18px;
        padding: 0 16px;
        border-radius: 15px;
    }

    .home-page .home-system-brand-text {
        font-size: 14px;
    }

    .home-page .home-system-brand-rocket {
        font-size: 13px;
    }

    .home-page .home-system-status {
        gap: 7px;
    }

    .home-page .home-system-dot {
        width: 5px;
        height: 5px;
        flex-basis: 5px;
    }

    .home-page .home-system-secure {
        font-size: 10px;
        letter-spacing: .9px;
    }
}

/* =========================================================
   FINAL MOBILE — XETVPN SYSTEM STATUS
   ========================================================= */

.home-page .home-system-card {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;

    margin: 18px 0 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    border: 1px solid rgba(255,255,255,.055) !important;
    border-left: 1px solid rgba(255,255,255,.055) !important;
    border-radius: 15px !important;

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

    box-shadow: none !important;
    overflow: hidden !important;
}

.home-page .home-system-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    gap: 4px !important;
}

.home-page .home-system-brand-text {
    color: #f3f5f7 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
}

.home-page .home-system-brand-rocket {
    font-size: 13px !important;
    line-height: 1 !important;
}

.home-page .home-system-status {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    gap: 7px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.home-page .home-system-dot {
    display: block !important;

    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    max-width: 6px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;

    background: #63e6a6 !important;

    box-shadow: 0 0 8px rgba(99,230,166,.45) !important;
}

.home-page .home-system-secure {
    color: #63e6a6 !important;

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

    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 700 !important;

    letter-spacing: .1px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

@media (max-width: 600px) {
    .home-page .home-system-card {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        margin-top: 16px !important;
        padding: 0 16px !important;

        border-radius: 14px !important;
    }
}



/* =========================================================
   MOBILE HEADER — FINAL
   ========================================================= */

@media (max-width: 600px) {

    .topbar {
        display: flex !important;
        align-items: center !important;
    }

    .mobile-menu {
        flex: 0 0 auto !important;
        width: 40px !important;
        height: 40px !important;

        margin: 0 12px 0 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 23px !important;
        line-height: 1 !important;
    }

    .mobile-brand {
        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;

        white-space: nowrap !important;

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

        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: .1px !important;
    }

    .mobile-brand .brand-x {
        margin: 0 !important;
        padding: 0 !important;
    }

    .top-actions {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .top-actions .icon-btn {
        display: none !important;
    }

    .profile {
        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        gap: 0 !important;
    }

    .profile-name,
    .profile > span:last-child {
        display: none !important;
    }

    .profile .avatar {
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
    }
}

/* =========================================================
   HEADER — FIX DOUBLE MENU ICON
   ========================================================= */

@media (max-width: 600px) {

    .mobile-menu {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .mobile-menu::before {
        content: "☰" !important;
        display: block !important;

        font-size: 21px !important;
        line-height: 1 !important;
    }

    .mobile-brand {
        gap: 0 !important;
        margin-left: 0 !important;
    }

    .mobile-menu {
        margin-right: 12px !important;
    }

}

/* =========================================
   CONFIG ACTIONS — COPY + QR
   ========================================= */

.config-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.config-actions .copy-btn,
.config-actions .qr-config-btn {
    height: 40px;
    padding: 0 15px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.config-actions .copy-btn {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: #fff;
}

.config-actions .copy-btn:hover {
    background: rgba(255,255,255,.09);
    transform: translateY(-1px);
}

.qr-config-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(98,232,176,.28);
    background: rgba(98,232,176,.09);
    color: #62e8b0;
}

.qr-config-btn span {
    font-size: 15px;
    line-height: 1;
}

.qr-config-btn:hover {
    background: rgba(98,232,176,.15);
    border-color: rgba(98,232,176,.42);
    box-shadow: 0 6px 20px rgba(98,232,176,.10);
    transform: translateY(-1px);
}

.config-actions .copy-btn:active,
.config-actions .qr-config-btn:active {
    transform: scale(.97);
}

/* mobile */
@media (max-width: 600px) {

    .config-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
    }

    .config-actions .copy-btn,
    .config-actions .qr-config-btn {
        width: 100%;
        height: 42px;
        border-radius: 12px;
        padding: 0 10px;
    }

}


/* =========================================
   CONFIG CARD — MOBILE
   ========================================= */

@media (max-width: 600px) {

    .connect-page .config-card {
        width: 100%;
        margin: 14px 0 18px;
        padding: 16px;
        border-radius: 18px;
        box-sizing: border-box;
    }

    .connect-page .config-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
    }

    .connect-page .config-top h3 {
        margin: 0;
        font-size: 16px;
        line-height: 1.2;
    }

    .connect-page .config-top p {
        margin: 5px 0 0;
        font-size: 11px;
        line-height: 1.4;
        opacity: .65;
    }

    .connect-page .config-badge {
        flex-shrink: 0;
        font-size: 9px;
        padding: 5px 8px;
        border-radius: 8px;
    }

    .connect-page .config-row {
        display: flex;
        flex-direction: column;
        gap: 9px;
        width: 100%;
    }

    .connect-page .config-box {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border-radius: 13px;
        padding: 11px;
    }

    .connect-page .config-box:first-child {
        display: block;
    }

    .connect-page .config-text {
        min-width: 0;
        width: 100%;
    }

    .connect-page .config-text > span {
        display: block;
        margin-bottom: 6px;
        font-size: 9px;
        letter-spacing: .8px;
        opacity: .55;
    }

    .connect-page .config-text code {
        display: block;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        line-height: 1.4;
    }

    .connect-page .config-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
    }

    .connect-page .config-actions button {
        width: 100%;
        height: 40px;
        min-width: 0;
        padding: 0 8px;
        border-radius: 11px;
        font-size: 11px;
        box-sizing: border-box;
    }

    .connect-page .config-actions .qr-config-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .connect-page .config-actions .qr-config-btn span {
        font-size: 14px;
    }

    .connect-page .config-box:last-child {
        min-height: 42px;
        padding: 10px 11px;
    }

    .connect-page #connectionActiveStatus {
        font-size: 11px;
        font-weight: 700;
    }

}


/* ============================================================
   REFERRALS — MOBILE / REAL USERS
   ============================================================ */

.referral-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 18px;
    text-align: center;
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
}

.referral-empty-icon {
    font-size: 28px;
    margin-bottom: 4px;
}

.referral-empty strong {
    font-size: 14px;
}

.referral-empty span {
    max-width: 280px;
    font-size: 11px;
    line-height: 1.45;
    opacity: .55;
}

.referral-user-info {
    min-width: 0;
}

.referral-user-info strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-user-info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {

    .referrals-page {
        width: 100%;
        min-width: 0;
    }

    .referrals-page .page-header {
        gap: 10px;
        margin-bottom: 14px;
    }

    .referrals-page .page-header h1 {
        font-size: 19px;
        line-height: 1.2;
    }

    .referrals-page .page-header p {
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.4;
    }

    .referrals-page .connection-status {
        flex-shrink: 0;
        font-size: 10px;
    }

    .referral-hero {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 18px;
        border-radius: 20px;
        box-sizing: border-box;
    }

    .referral-hero-content {
        width: 100%;
        min-width: 0;
    }

    .referral-label {
        font-size: 10px;
    }

    .referral-hero h2 {
        margin: 5px 0 2px;
        font-size: 30px;
    }

    .referral-hero-content > p {
        font-size: 11px;
    }

    .referral-visual {
        display: none;
    }

    .referral-link-box {
        width: 100%;
        box-sizing: border-box;
        margin-top: 15px;
        padding: 11px;
        border-radius: 13px;
    }

    .referral-link-info {
        width: 100%;
        min-width: 0;
    }

    .referral-link-label {
        display: block;
        margin-bottom: 6px;
        font-size: 9px;
    }

    .referral-link {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        line-height: 1.4;
        box-sizing: border-box;
    }

    .referral-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
    }

    .referral-actions button {
        width: 100%;
        min-width: 0;
        height: 40px;
        padding: 0 8px;
        border-radius: 11px;
        font-size: 11px;
        box-sizing: border-box;
    }

    .referral-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
    }

    .referral-stat {
        min-width: 0;
        padding: 11px 7px;
        border-radius: 13px;
        box-sizing: border-box;
    }

    .referral-stat-icon {
        font-size: 15px;
    }

    .referral-stat strong {
        display: block;
        font-size: 17px;
        line-height: 1.1;
    }

    .referral-stat span:last-child {
        display: block;
        margin-top: 3px;
        font-size: 8px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .referral-list-card {
        width: 100%;
        box-sizing: border-box;
        margin-top: 12px;
        padding: 15px;
        border-radius: 18px;
    }

    .referral-list-header {
        gap: 8px;
        margin-bottom: 12px;
    }

    .referral-list-header h2 {
        font-size: 15px;
        line-height: 1.2;
    }

    .referral-list-header p {
        margin-top: 4px;
        font-size: 10px;
        line-height: 1.35;
    }

    .referral-count {
        flex-shrink: 0;
        min-width: 26px;
        height: 26px;
        padding: 0 7px;
        font-size: 11px;
        box-sizing: border-box;
    }

    .referral-user {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        width: 100%;
        min-width: 0;
        padding: 10px 0;
        box-sizing: border-box;
    }

    .referral-user-avatar {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        font-size: 12px;
    }

    .referral-user-info {
        min-width: 0;
    }

    .referral-user-info strong {
        font-size: 12px;
        line-height: 1.3;
    }

    .referral-user-info span {
        margin-top: 2px;
        font-size: 9px;
        line-height: 1.3;
        opacity: .6;
    }

    .referral-user-reward {
        flex-shrink: 0;
        font-size: 9px;
        white-space: nowrap;
    }

    .referral-how {
        margin-top: 14px;
        padding-bottom: 10px;
    }

    .referral-how .section-heading h2 {
        font-size: 15px;
    }

    .referral-how .section-heading p {
        font-size: 10px;
    }

    .referral-step {
        gap: 10px;
        padding: 11px 0;
    }

    .referral-step .step-number {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        font-size: 11px;
    }

    .referral-step strong {
        font-size: 11px;
    }

    .referral-step p {
        margin-top: 3px;
        font-size: 9px;
        line-height: 1.4;
    }

}


/* ============================================================
   REFERRALS — список пользователей
   ============================================================ */

.referral-user-hidden {
    display: none !important;
}

.referral-user-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

.referral-details-btn {
    appearance: none;
    border: 1px solid rgba(0, 255, 170, 0.22);
    background: rgba(0, 255, 170, 0.06);
    color: #00e0a0;
    border-radius: 8px;
    min-height: 30px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.referral-details-btn:hover {
    background: rgba(0, 255, 170, 0.12);
    border-color: rgba(0, 255, 170, 0.4);
}

.referral-details-btn:active {
    transform: scale(.97);
}

.referral-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    padding: 0 14px;
    border: 1px solid rgba(0, 255, 170, 0.16);
    border-radius: 12px;
    background: rgba(0, 255, 170, 0.035);
    color: #00d99a;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.referral-more:hover {
    background: rgba(0, 255, 170, 0.08);
    border-color: rgba(0, 255, 170, 0.3);
}

.referral-more:active {
    transform: scale(.99);
}


/* ============================================================
   REFERRALS — mobile
   ============================================================ */

@media (max-width: 600px) {

    .referral-user {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .referral-user-hidden {
        display: none !important;
    }

    .referral-user-info {
        min-width: 0;
        overflow: hidden;
    }

    .referral-user-info strong {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .referral-user-info span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .referral-user-actions {
        min-width: 0;
        align-items: flex-end;
        gap: 5px;
    }

    .referral-user-reward {
        white-space: nowrap;
        font-size: 10px;
    }

    .referral-details-btn {
        min-height: 28px;
        padding: 0 8px;
        border-radius: 8px;
        font-size: 9px;
        white-space: nowrap;
    }

    .referral-more {
        min-height: 40px;
        margin-top: 10px;
        border-radius: 11px;
        font-size: 11px;
    }
}


.payment-result-icon.pending {
    background:
        rgba(255,255,255,.08);
    color:
        #fff;
}

.payment-result-pending
.payment-result-status-dot {
    animation:
        paymentPulse 1.5s infinite;
}

@keyframes paymentPulse {

    0% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

}



/* =========================
   XETON LUCK WHEEL
   ========================= */
.luck-page { max-width: 1180px; margin: 0 auto; padding: 8px 0 34px; }
.luck-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.luck-header h1 { margin:0 0 8px; font-size:clamp(25px,3vw,34px); color:#f1f8ff; }
.luck-header p,.luck-card-heading p { color:#8da6bf; font-size:13px; margin:0; line-height:1.55; }
.luck-wallet { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid rgba(48,178,255,.22); border-radius:13px; background:linear-gradient(135deg,rgba(14,65,104,.48),rgba(8,22,42,.82)); flex-shrink:0; }
.luck-wallet-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:rgba(34,183,255,.13); color:#54d9ff; font-size:19px; }
.luck-wallet-info { display:flex; flex-direction:column; gap:2px; }
.luck-wallet small { display:block; color:#8da6bf; font-size:10px; margin:0; }
.luck-wallet strong { font-size:17px; line-height:1.25; color:#f2faff; }
.luck-wallet strong i { color:#4ed7ff; font-size:10px; font-style:normal; }
.luck-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:18px; align-items:stretch; }
.luck-card { min-width:0; padding:22px; border:1px solid rgba(92,155,208,.17); border-radius:18px; background:linear-gradient(145deg,rgba(11,27,48,.94),rgba(5,14,27,.96)); box-shadow:0 16px 40px rgba(0,0,0,.12); }
.luck-card-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.luck-card-heading h2 { margin:0 0 6px; font-size:18px; color:#eef8ff; }
.luck-free-badge { padding:6px 10px; border:1px solid rgba(55,220,174,.3); border-radius:9px; color:#52e7b6; font-size:10px; font-weight:800; letter-spacing:1px; }
.luck-wheel-wrap { position:relative; width:min(340px,80vw); aspect-ratio:1; margin:30px auto 22px; }
.luck-wheel { position:relative; width:100%; height:100%; border-radius:50%; border:7px solid #15304c; background:conic-gradient(from 0deg,#0e7bb0 0deg 36deg,#102a49 36deg 72deg,#146e9a 72deg 108deg,#10233e 108deg 144deg,#0e7bb0 144deg 180deg,#102a49 180deg 216deg,#146e9a 216deg 252deg,#10233e 252deg 288deg,#0e7bb0 288deg 324deg,#102a49 324deg 360deg); box-shadow:0 0 0 3px rgba(46,187,255,.18),0 0 35px rgba(0,150,255,.18),inset 0 0 24px rgba(0,0,0,.3); transition:transform 3.4s cubic-bezier(.12,.72,.12,1); }
.luck-wheel::before { content:""; position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg,transparent 0deg 35deg,rgba(1,8,20,.8) 35deg 36deg); }
.luck-pointer { position:absolute; z-index:3; top:-12px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-top:34px solid #70e4ff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.65)); }
.luck-wheel-label { position:absolute; z-index:1; left:50%; top:50%; width:76px; text-align:center; color:#f3fbff; transform:translate(-50%,-50%); text-shadow:0 1px 4px #00101e; pointer-events:none; }
.luck-wheel-label b { display:block; font-size:14px; line-height:1.25; }
.luck-wheel-label small { display:block; margin-top:2px; font-size:9px; color:#c5e8ff; }
.luck-wheel-label.l0 { left:59.9%; top:19.6%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l1 { left:75.9%; top:31.2%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l2 { left:82.0%; top:50.0%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l3 { left:75.9%; top:68.8%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l4 { left:59.9%; top:80.4%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l5 { left:40.1%; top:80.4%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l6 { left:24.1%; top:68.8%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l7 { left:18.0%; top:50.0%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l8 { left:24.1%; top:31.2%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-label.l9 { left:40.1%; top:19.6%; transform:translate(-50%,-50%) rotate(0deg); }
.luck-wheel-center { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:68px; height:68px; display:grid; place-items:center; border-radius:50%; border:4px solid #58d7ff; background:radial-gradient(circle,#174b70,#071426 72%); color:#5de2ff; font-size:31px; font-weight:900; box-shadow:0 0 20px rgba(44,192,255,.3); }
.luck-spin-button { width:100%; min-height:50px; border:0; border-radius:12px; background:linear-gradient(100deg,#087fc2,#17b8e6); color:#fff; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 8px 24px rgba(0,145,225,.2); transition:opacity .2s,transform .2s; }
.luck-spin-button:hover:not(:disabled) { transform:translateY(-1px); }
.luck-spin-button:disabled { cursor:not-allowed; opacity:.58; }
.luck-timer { min-height:20px; text-align:center; margin-top:12px; color:#93abc2; font-size:12px; }
.luck-message { display:none; margin-top:14px; padding:12px; border-radius:10px; font-size:13px; line-height:1.5; text-align:center; }
.luck-message.is-visible { display:block; }
.luck-message.success { background:rgba(27,173,126,.12); border:1px solid rgba(27,220,165,.25); color:#73f0c3; }
.luck-message.error { background:rgba(236,69,91,.1); border:1px solid rgba(236,69,91,.25); color:#ff9daa; }
.luck-message.info { background:rgba(45,155,226,.1); border:1px solid rgba(45,155,226,.2); color:#a9dcff; }
.luck-prize-list { display:grid; gap:2px; margin-top:18px; }
.luck-prize-list > div { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid rgba(105,156,198,.1); color:#c8d8e7; font-size:12px; }
.luck-prize-list > div:last-child { border-bottom:0; }
.luck-prize-list b { color:#55d8ff; font-size:12px; }
.luck-prize-icon { color:#55d8ff; font-size:16px; text-align:center; }
.luck-exchange-card { margin-top:18px; }
.luck-exchange-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px; }
.luck-exchange-option { min-width:0; padding:16px 13px; border:1px solid rgba(87,154,202,.16); border-radius:13px; background:rgba(7,20,36,.6); }
.luck-exchange-days { font-size:17px; font-weight:800; color:#f1f8ff; }
.luck-exchange-option p { min-height:18px; margin:7px 0 15px; color:#8da6bf; font-size:11px; }
.luck-redeem-button { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:11px 7px; border:1px solid rgba(49,177,238,.27); border-radius:10px; background:rgba(13,106,158,.14); color:#ccefff; cursor:pointer; font-size:11px; }
.luck-redeem-button span:first-child { font-weight:800; color:#4bd5ff; white-space:nowrap; }
.luck-redeem-button:disabled { opacity:.4; cursor:not-allowed; }
.luck-footnote { margin:16px 0 0; color:#7891aa; font-size:11px; line-height:1.6; }
@media(max-width:900px) { .luck-layout { grid-template-columns:1fr; } .luck-wheel-wrap { width:min(330px,75vw); } .luck-prize-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; } }
@media(max-width:560px) { .luck-page { padding-top:0; } .luck-header { align-items:flex-start; flex-direction:column; } .luck-wallet { width:100%; } .luck-card { padding:17px; } .luck-exchange-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .luck-prize-list { grid-template-columns:1fr; } .luck-wheel-wrap { width:min(300px,78vw); } }

/* Платные вращения колеса удачи */
.luck-paid-spin-button {
  margin-top: 10px;
  background: linear-gradient(100deg, #7650c9, #b04ce0);
  box-shadow: 0 8px 24px rgba(146, 76, 224, .2);
}
.luck-paid-info {
  min-height: 18px;
  margin-top: 9px;
  color: #bca4ec;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}


/* XETVPN premium luck wheel */
.luck-wheel {
  isolation:isolate;
  border-color:#234967;
  box-shadow:
    0 0 0 2px rgba(80,205,255,.18),
    0 0 0 7px rgba(8,25,43,.72),
    0 0 28px rgba(0,160,255,.22),
    inset 0 0 22px rgba(0,0,0,.28);
  transition:transform 6.2s cubic-bezier(.10,.72,.08,1);
  will-change:transform;
}
.luck-wheel::before {
  z-index:0;
  background:repeating-conic-gradient(
    from 0deg,
    transparent 0deg 35.35deg,
    rgba(1,8,20,.88) 35.35deg 36deg
  );
  pointer-events:none;
}
.luck-wheel-label {
  z-index:1;
  width:clamp(48px, 19%, 68px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-align:center;
  white-space:nowrap;
  line-height:1.1;
  transform-origin:center center;
  text-shadow:0 1px 3px #00101e, 0 0 8px rgba(0,0,0,.35);
}
.luck-wheel-label b {
  font-size:clamp(10px, 3.5vw, 14px);
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.2px;
}
.luck-wheel-label small {
  margin:0;
  font-size:clamp(6px, 2.1vw, 8px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:.25px;
  color:#d2efff;
}
.luck-pointer {
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(74,218,255,.3));
}
.luck-wheel-center {
  z-index:2;
  box-shadow:0 0 0 4px rgba(7,25,43,.85), 0 0 22px rgba(44,192,255,.4);
}
@media (prefers-reduced-motion: reduce) {
  .luck-wheel { transition-duration:1s; }
}

/* XETVPN premium wheel labels: centered in sectors */
#luckWheel .luck-wheel-label {
  width: 76px;
  height: auto;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  white-space: nowrap;
  transform-origin: center center;
  box-sizing: border-box;
  z-index: 1;
  text-shadow: 0 1px 4px #00101e;
}

#luckWheel .luck-wheel-label b {
  display: block;
  margin: 0;
  font-size: clamp(12px, 3.8vw, 15px);
  line-height: 1.15;
  font-weight: 900;
}

#luckWheel .luck-wheel-label small {
  display: block;
  margin: 0;
  font-size: clamp(8px, 2.4vw, 10px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .1px;
  color: #d2efff;
}

#luckWheel .luck-wheel-label.l0 { left:61.1%; top:15.8%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l1 { left:79.1%; top:28.9%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l2 { left:86.0%; top:50.0%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l3 { left:79.1%; top:71.1%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l4 { left:61.1%; top:84.2%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l5 { left:38.9%; top:84.2%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l6 { left:20.9%; top:71.1%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l7 { left:14.0%; top:50.0%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l8 { left:20.9%; top:28.9%; transform:translate(-50%,-50%) rotate(0deg); }
#luckWheel .luck-wheel-label.l9 { left:38.9%; top:15.8%; transform:translate(-50%,-50%) rotate(0deg); }