html.is-telegram [data-tooltip]::after {
  bottom: auto;
  top: -32px;
  transform: translateX(-50%) translateY(-5px);
}

html.is-telegram [data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(0);
}

.button-github {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #24292e;
  color: #ffffff !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 12px !important;
  font-weight: 600;
  text-decoration: none;
}

.button-google {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--bg-primary) !important;
  color: var(--text-primary);
  padding: 0rem 1rem !important;
  border-radius: 12px !important;
  height: 40px;
}

@media (hover: hover) {
  .button-google:hover {
    filter: brightness(1.3);
  }
}

.button-icon {
  flex-shrink: 0;
}

.lang-dropbtn .drop-icon {
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.lang-dropdown.active .drop-icon {
  transform: rotate(180deg);
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  font-weight: 300;
  pointer-events: none;
  z-index: 1000;
}

[data-tooltip-pos="top"]::after {
  bottom: auto;
  top: -32px;
  transform: translateX(-50%) translateY(-5px);
}

@media (hover: hover) {
  [data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  [data-tooltip-pos="top"]:hover::after {
    transform: translateX(-50%) translateY(0);
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border-radius: var(--radius-xl);
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  font-size: 13.333px;
  white-space: nowrap;
  user-select: none;
}

.button:hover {
  filter: brightness(1.3);
}

.button:focus-visible {
  outline: none;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.button-default,
.button-small,
.button-large {
  background: var(--color-tertiary);
}
.button-pay {
  background: var(--secondary) !important;
}
.button-small {
  height: 32px;
}

.button-default,
.button-secondary,
.button-destructive {
  height: 36px;
}

.button-large {
  height: 40px;
}

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

.button-destructive {
  background: var(--error);
}

.button-destructive,
.button-ghost {
  border: 1px solid transparent;
}

.button-ghost {
  background: transparent;
}

.button-button {
  background: var(--text-primary);
}

.button-payment-toggle {
  background: var(--color-tertiary);
  color: var(--text-primary);
  padding: 0 0.25rem;
  transition: var(--transition);
  font-weight: 300;
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
}

.hwid-delete-button {
  padding: 0;
  height: 31.2px;
  width: 31.2px;
  border-radius: var(--radius-max);
}

.button-payment-toggle.active,
.button-payment-toggle:hover {
  filter: brightness(1.3);
  cursor: pointer;
}

.toggle-group-url .button-payment-toggle {
  border-radius: var(--radius-xl);
  padding: 0 0.65rem;
}

.button-icon {
  padding: 0;
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-group {
  display: flex;
  gap: 0.5rem;
}

.button-group .button {
  flex-grow: 1;
  white-space: nowrap;
}

.card {
  background: var(--bg-tertiary);
  border-radius: var(--radius-xxl);
}

.button-url-toggle.active {
  text-decoration: underline;
}

.button-url-toggle {
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);
  font-weight: 300;
}

.button-label {
  background: var(--color-secondary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.5rem;
  border-radius: var(--radius-xl);
  width: fit-content;
  transition: var(--transition);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.button-label-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.button-label:hover {
  filter: brightness(1.3);
}

.card-header {
  padding: 1rem 1rem 0;
}

.profile-name {
  font-size: 18px;
}

.card-title {
  font-size: 18px;
}

.referral-explanation {
  margin: 0 0.5rem 0.5rem;
}

.referral-explanation p {
  color: var(--text-secondary);
  font-size: 13.333px;
}

.referral-explanation h3 {
  margin-bottom: 0.5rem;
}

.status-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.config-bottom {
  display: flex;
  gap: 0.5rem;
}

.form-label {
  cursor: pointer;
  display: block;
  font-size: 13.333px;
  color: var(--text-primary);
  text-transform: uppercase;
}

.input {
  flex: 1;
  height: 36px;
  width: 100%;
  padding: 0 0.6rem;
  background: var(--color-tertiary);
  border-radius: var(--radius-xl);
  color: var(--text-primary);
  min-width: 0;
  font-weight: 300;
  transition: var(--transition);
  outline: none;
}

.input:focus,
.input:focus-visible,
.input:hover {
  filter: brightness(1.3);
}

.input.input-sm {
  height: 32px;
  padding: 0 0.6rem;
  font-size: 13.333px;
}

.input-container {
  display: flex;
  gap: 0.5rem;
}

.protocol-badge {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
}

.free-key-protocol {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  background: var(--border-color);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.button-copy-free {
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
}

.page-stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.collapsible-card .card-header,
.config-header {
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.collapsible-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid transparent;
}

.collapsible-card.expanded .card-header {
  border-bottom-color: var(--bg-tertiary);
}

.collapsible-card.expanded .toggle-icon {
  transform: rotate(180deg);
  color: var(--primary);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

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

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.section-header .form-label {
  margin-bottom: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  height: 36px;
  border-radius: var(--radius-xl);
  font-size: 0.75rem;
  line-height: 1;
}

.badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.badge-primary {
  background: rgba(59, 123, 94, 0.1);
  color: var(--primary);
}

.badge-secondary {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: flex;
  margin-bottom: 0.3rem;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.section-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-content {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.card-content h3 {
  font-size: 1.1rem;
}

.card-arrow {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.download-card:hover .card-arrow {
  transform: translateX(5px);
  color: var(--primary);
}

.custom-select-trigger::after {
  content: none !important;
  display: none !important;
}

.custom-select-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.custom-select-wrapper.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  transform: translateY(-10px);
  z-index: 100;
  max-height: 250px;
  overflow-y: auto;
  padding: 0.35rem;
}

.custom-select-wrapper.open .custom-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .button-group {
    flex-wrap: wrap;
  }
}

.traffic-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.traffic-progress-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.traffic-progress-title {
  font-size: 13.333px;
  color: var(--primary);
  text-transform: uppercase;
}

.traffic-progress-limit {
  font-size: 13.333px;
  color: var(--text-secondary);
}

.traffic-progress-track {
  width: 100%;
  height: 10px;
  background-color: var(--color-tertiary);
  border-radius: var(--radius-max);
  overflow: hidden;
  position: relative;
}

.traffic-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-max);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.9;
}

.traffic-progress-footer {
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
}