* {
    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;
}