/* Legacy base layer; Chupacabra VPN dark brand overrides are appended below. */
:root {
  color-scheme: light !important;
  --lumen-primary: #ff1687;
  --lumen-primary-strong: #3157c8;
  --lumen-primary-soft: #edf2ff;
  --lumen-ink: #283f64;
  --lumen-muted: #667795;
  --lumen-bg: #f4f7fc;
  --lumen-surface: rgba(255, 255, 255, .86);
  --lumen-surface-solid: #fff;
  --lumen-line: rgba(255,22,135, .16);
  --lumen-line-strong: rgba(255,22,135, .28);
  --lumen-shadow: 0 20px 60px rgba(40, 63, 100, .12);
  --lumen-shadow-soft: 0 10px 30px rgba(40, 63, 100, .09);
  --lumen-danger: #cf3f55;
  --lumen-success: #168a64;
}

html,
body,
body.dark {
  color-scheme: light !important;
  --bg1: #f8faff;
  --bg2: #eef3fb;
  --bg3: #f7f9fd;
  --panel: rgba(255, 255, 255, .86);
  --panel2: rgba(255,22,135, .07);
  --text: var(--lumen-ink);
  --muted: var(--lumen-muted);
  --line: var(--lumen-line);
  --primary: var(--lumen-primary);
  --primary2: #7392ee;
  --primaryText: #fff;
  --shadow: var(--lumen-shadow);
  --btn: rgba(255, 255, 255, .82);
  background: var(--lumen-bg) !important;
  color: var(--lumen-ink) !important;
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(255,22,135, .15), transparent 28%),
    radial-gradient(circle at 94% 30%, rgba(138, 170, 255, .18), transparent 30%),
    linear-gradient(155deg, #fafcff 0%, #f0f4fb 54%, #f8faff 100%) !important;
}

body::before,
body::after {
  opacity: .16 !important;
  filter: blur(78px) !important;
  background: #ff1687 !important;
}

button,
a {
  cursor: pointer;
}

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

button,
a,
label,
[role="button"],
.device-card,
.renew-period,
.preset-card,
.choice-grid button,
.method-list button {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

::selection {
  background: rgba(255,22,135, .18);
  color: var(--lumen-ink);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(255,22,135, .28) !important;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 12px;
  transform: translateY(-160%);
  border-radius: 12px;
  background: var(--lumen-primary);
  color: #fff;
  padding: 10px 14px;
  text-decoration: none;
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Shared brand header */
.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 2px 16px;
  padding: 10px 12px;
  border: 1px solid var(--lumen-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--lumen-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.app-brand img {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 7px 18px rgba(255,22,135, .2);
}

.app-brand strong,
.app-brand small {
  display: block;
}

.app-brand strong {
  color: var(--lumen-ink);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.app-brand small {
  margin-top: 3px;
  color: var(--lumen-muted);
  font-size: 12px;
}

/* Telegram Mini App */
#stars {
  background: transparent !important;
}

.app {
  width: min(760px, 100%);
  padding-top: calc(14px + var(--tg-safe-top) + var(--tg-top-gap));
}

.app h1,
.app h2,
.app h3,
.app b,
.app strong {
  color: var(--lumen-ink);
}

.app h2 {
  margin: 22px 2px 10px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.muted,
.eyebrow,
.tile span,
.card span,
.item p,
.dialog-card p,
.dialog-details span {
  color: var(--lumen-muted) !important;
}

.tabs {
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--lumen-line-strong);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 48px rgba(40, 63, 100, .18), inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.tabs::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), transparent);
}

.tabs button {
  color: #71809b;
}

.tabs button.active {
  background: linear-gradient(145deg, #ff1687, #d70b62);
  color: #fff;
  box-shadow: 0 9px 22px rgba(255,22,135, .3), inset 0 1px 0 rgba(255, 255, 255, .32);
}

.tabs button:active {
  transform: scale(.97);
}

.tile,
.card,
.profile-card,
.item,
.preset-card,
.custom-package-toggle,
.package-card,
.server-list-card,
.empty-state {
  border-color: var(--lumen-line) !important;
  background: var(--lumen-surface) !important;
  color: var(--lumen-ink) !important;
  box-shadow: var(--lumen-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.coupon,
.pay-row {
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.profile-card {
  overflow: hidden;
  padding: 0 14px 15px;
  border-radius: 28px;
}

.profile-cover {
  height: 128px;
  background:
    linear-gradient(120deg, rgba(255,22,135, .92), rgba(113, 148, 238, .68)),
    #ff1687 !important;
}

.profile-cover::before {
  inset: -40px -16px auto auto;
  width: 190px;
  height: 190px;
  border-radius: 48px;
    background: url('/assets/logo.png?v=20260803-mascot-web-v10') center/cover no-repeat !important;
  opacity: .24;
  transform: rotate(-10deg);
  filter: saturate(.8) brightness(1.18);
}

.profile-cover::after {
  background: radial-gradient(circle, rgba(255, 255, 255, .46), transparent 68%) !important;
}

.avatar {
  border: 5px solid rgba(255, 255, 255, .94) !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(40, 63, 100, .2) !important;
}

.profile-grid {
  gap: 8px;
}

.profile-grid div,
.ref-stats div,
.dialog-details div {
  border: 1px solid rgba(255,22,135, .12) !important;
  background: rgba(255,22,135, .055) !important;
}

.profile-grid b,
.ref-stats b,
.balance,
.package-card .row b:last-child,
.renew-total b {
  color: var(--lumen-primary) !important;
}

.primary,
.purchase-pay,
.connect-btn,
.section-hint-card button,
.nav-hint-card button,
.support-hint-card button {
  min-height: 48px;
  background: linear-gradient(145deg, var(--lumen-primary), #5f80e7) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(255,22,135, .28), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

.primary .btn-icon-img,
.purchase-pay .btn-icon-img {
  filter: brightness(0) invert(1);
}

.secondary {
  min-height: 46px;
  border: 1px solid var(--lumen-line-strong) !important;
  background: rgba(255, 255, 255, .84) !important;
  color: var(--lumen-ink) !important;
  box-shadow: 0 7px 18px rgba(40, 63, 100, .08);
}

.secondary .btn-icon-img {
  filter: invert(28%) sepia(25%) saturate(870%) hue-rotate(174deg) brightness(88%);
}

.choice-grid button,
.method-list button,
.payout-banks button,
.payout-crypto-options button {
  min-height: 48px;
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: var(--lumen-ink) !important;
  box-shadow: 0 6px 16px rgba(40, 63, 100, .06);
}

.choice-grid button.active,
.method-list button.active,
.payout-banks button.active,
.payout-crypto-options button.active,
.preset-card.active,
.custom-package-toggle.active {
  border-color: rgba(255,22,135, .48) !important;
  background: linear-gradient(145deg, rgba(255,22,135, .15), rgba(255, 255, 255, .94)) !important;
  color: var(--lumen-primary-strong) !important;
  box-shadow: 0 10px 24px rgba(255,22,135, .14), inset 0 0 0 1px rgba(255,22,135, .08) !important;
}

input,
textarea,
select,
.ref-link,
.country-code,
.payout-crypto-block input,
.model-field input {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .9) !important;
  color: var(--lumen-ink) !important;
  caret-color: var(--lumen-primary) !important;
  box-shadow: inset 0 1px 2px rgba(40, 63, 100, .04);
}

input::placeholder,
textarea::placeholder {
  color: #8d9ab0 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lumen-ink) !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}

.pill {
  border: 1px solid rgba(255,22,135, .14) !important;
  background: rgba(255,22,135, .08) !important;
  color: var(--lumen-ink) !important;
}

.pill.status-active {
  background: rgba(22, 138, 100, .1) !important;
  color: #0b7654 !important;
}

.pill.status-inactive,
.pill.status-frozen {
  background: rgba(207, 63, 85, .09) !important;
  color: #b72f45 !important;
}

.purchase-divider,
.payout-divider,
.ref-info-row {
  border-color: rgba(255,22,135, .11) !important;
}

.server-list-columns li {
  border-color: rgba(255,22,135, .08) !important;
  color: #d9aec5 !important;
}

.title-shine {
  background: none !important;
  color: var(--lumen-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

.toast {
  border: 1px solid rgba(255,22,135, .22) !important;
  background: rgba(40, 63, 100, .92) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(40, 63, 100, .26) !important;
}

.support-fab {
  border-color: rgba(255, 255, 255, .62) !important;
  background: linear-gradient(145deg, #ff1687, #c90d68) !important;
  box-shadow: 0 13px 34px rgba(255,22,135, .34) !important;
}

.support-fab-tooltip {
  background: var(--lumen-ink) !important;
  color: #fff !important;
}

.dialog-backdrop.show,
.support-hint.show,
.nav-hint.show,
.section-hint.show {
  background: rgba(40, 63, 100, .26) !important;
}

.dialog-card,
.support-hint-card,
.nav-hint-card,
.section-hint-card {
  border-color: var(--lumen-line-strong) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--lumen-ink) !important;
  box-shadow: 0 30px 90px rgba(40, 63, 100, .24), inset 0 1px 0 #fff !important;
}

.dialog-orb,
.dialog-card.trial .dialog-orb {
  background: radial-gradient(circle, rgba(255,22,135, .22), transparent 68%) !important;
}

.denied .lock,
.browser-card .lock {
  border-color: rgba(255,22,135, .22) !important;
  background: rgba(255,22,135, .08) !important;
  color: var(--lumen-primary) !important;
}

.browser-card a,
.denied a {
  background: var(--lumen-primary) !important;
  color: #fff !important;
}

/* Subscription, devices and renewal pages */
.loader,
.connect-page .loader,
.devices-page .loader,
.renew-page .loader {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,22,135, .13), transparent 31%),
    linear-gradient(155deg, #fbfcff, #eef3fb 58%, #f8faff) !important;
}

.loader-inner img,
.mark {
  box-shadow: 0 10px 28px rgba(255,22,135, .2) !important;
}

.loader-ring {
  border-color: rgba(255,22,135, .16) !important;
  border-top-color: var(--lumen-primary) !important;
}

.connect-page,
.devices-page,
.renew-page {
  background:
    radial-gradient(circle at 6% 5%, rgba(255,22,135, .15), transparent 28%),
    radial-gradient(circle at 96% 34%, rgba(133, 166, 255, .18), transparent 31%),
    linear-gradient(155deg, #fbfcff, #eff4fb 55%, #f8faff) !important;
}

.connect-glow,
.devices-glow,
.renew-glow {
  opacity: .18 !important;
  filter: blur(74px) !important;
  background: #ff1687 !important;
}

.box,
.connect-page .box,
.devices-page .box,
.renew-page .box {
  border: 1px solid var(--lumen-line) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: var(--lumen-ink) !important;
  box-shadow: var(--lumen-shadow), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.box::before,
.connect-page .box::before,
.devices-page .box::before,
.renew-page .box::before {
  background: linear-gradient(110deg, rgba(255,22,135, .22), rgba(255, 255, 255, .88), rgba(255,22,135, .15)) !important;
}

.brand h1,
.connect-page h1,
.devices-page h1,
.renew-page h1,
.connect-page h2,
.devices-page h2,
.renew-page h2 {
  color: var(--lumen-ink) !important;
}

.info,
.connect-page .info,
.devices-page .info {
  gap: 10px;
}

.info .item,
.connect-page .item,
.devices-page .item,
.managed-device,
.renew-counter,
.renew-total > div {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .76) !important;
  color: var(--lumen-ink) !important;
  box-shadow: 0 8px 22px rgba(40, 63, 100, .07) !important;
}

.k,
.managed-meta,
.renew-counter small,
.renew-total span,
.renew-label {
  color: var(--lumen-muted) !important;
}

.v,
.managed-title,
.renew-counter b {
  color: var(--lumen-ink) !important;
}

.device-card,
.connect-page .device-card,
.devices-page .managed-device,
.renew-period {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .76) !important;
  color: var(--lumen-ink) !important;
  box-shadow: 0 8px 22px rgba(40, 63, 100, .07) !important;
}

.device-card.active,
.connect-page .device-card.active,
.renew-period.active {
  border-color: rgba(255,22,135, .42) !important;
  background: linear-gradient(145deg, rgba(255,22,135, .12), rgba(255, 255, 255, .95)) !important;
  box-shadow: 0 12px 28px rgba(255,22,135, .14) !important;
}

.device-head,
.device-title,
.chev,
.ico {
  color: var(--lumen-ink) !important;
}

.ico,
.connect-page .ico,
.devices-page .ico,
.icon-btn {
  border-color: rgba(255,22,135, .16) !important;
  background: rgba(255,22,135, .08) !important;
  color: var(--lumen-primary) !important;
}

.btn,
.guide-action,
.model-btn {
  min-height: 48px;
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .86) !important;
  color: var(--lumen-ink) !important;
  box-shadow: 0 8px 20px rgba(40, 63, 100, .08) !important;
}

.btn.featured,
.success-btn,
.renew-pay-btn,
.guide-action.primary,
.model-btn.primary {
  border-color: transparent !important;
  background: linear-gradient(145deg, var(--lumen-primary), #bd0b5c) !important;
  color: #fff !important;
  box-shadow: 0 11px 25px rgba(255,22,135, .27) !important;
}

.danger-btn,
.mini-btn.danger {
  border-color: rgba(207, 63, 85, .18) !important;
  background: rgba(207, 63, 85, .08) !important;
  color: var(--lumen-danger) !important;
}

.mini-btn.success {
  border-color: rgba(22, 138, 100, .18) !important;
  background: rgba(22, 138, 100, .08) !important;
  color: var(--lumen-success) !important;
}

.renew-hero {
  border: 1px solid rgba(255,22,135, .18) !important;
  background:
    linear-gradient(135deg, rgba(255,22,135, .15), rgba(255, 255, 255, .86)),
    #fff !important;
  box-shadow: var(--lumen-shadow-soft) !important;
}

.renew-divider,
.renew-divider::before,
.renew-divider::after {
  border-color: rgba(255,22,135, .13) !important;
  background-color: rgba(255,22,135, .13) !important;
}

.model-dialog.show {
  background: rgba(40, 63, 100, .25) !important;
}

.model-card,
.app-fallback {
  border-color: var(--lumen-line-strong) !important;
  background: rgba(255, 255, 255, .97) !important;
  color: var(--lumen-ink) !important;
  box-shadow: 0 28px 80px rgba(40, 63, 100, .24) !important;
}

/* Connection guide */
.shell {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--lumen-ink) !important;
  box-shadow: var(--lumen-shadow), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.shell::before {
  background: linear-gradient(110deg, rgba(255,22,135, .24), rgba(255, 255, 255, .9), rgba(255,22,135, .15)) !important;
}

.hero h1,
.step h2,
.fallback h2 {
  color: var(--lumen-ink) !important;
}

.step {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 8px 22px rgba(40, 63, 100, .07) !important;
}

.step.active {
  border-color: rgba(255,22,135, .36) !important;
  background: linear-gradient(145deg, rgba(255,22,135, .1), rgba(255, 255, 255, .94)) !important;
}

.num,
.fallback-icon {
  border-color: rgba(255,22,135, .18) !important;
  background: rgba(255,22,135, .1) !important;
  color: var(--lumen-primary) !important;
}

.action.primary {
  background: linear-gradient(145deg, var(--lumen-primary), #bd0b5c) !important;
  color: #fff !important;
  box-shadow: 0 11px 25px rgba(255,22,135, .27) !important;
}

.action.secondary,
.action.ghost {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .84) !important;
  color: var(--lumen-ink) !important;
}

.fallback {
  border-color: rgba(207, 63, 85, .18) !important;
  background: rgba(255, 255, 255, .9) !important;
  color: var(--lumen-ink) !important;
}

/* Support chat */
.support-shell {
  background: transparent !important;
}

.support-brand-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(255,22,135, .2);
}

.support-title h1 {
  color: var(--lumen-ink) !important;
}

.support-title p {
  color: var(--lumen-muted) !important;
}

.status-dot {
  background: #20a878 !important;
  box-shadow: 0 0 0 6px rgba(32, 168, 120, .12) !important;
}

.ticket-chip {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: var(--lumen-ink) !important;
}

.ticket-chip.active,
.ticket-chip.new {
  border-color: rgba(255,22,135, .35) !important;
  background: var(--lumen-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(255,22,135, .22) !important;
}

.chat-window,
body.admin-support .chat-window {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: var(--lumen-shadow), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.message.bot,
body.admin-support .message.bot {
  border-color: rgba(255,22,135, .12) !important;
  background: rgba(255,22,135, .08) !important;
  color: var(--lumen-ink) !important;
}

.message.user,
body.admin-support .message.user {
  background: linear-gradient(145deg, var(--lumen-primary), #bd0b5c) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(255,22,135, .2) !important;
}

.message.system {
  border-color: rgba(255,22,135, .16) !important;
  background: rgba(255,22,135, .07) !important;
  color: #4d6384 !important;
}

.empty-chat {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .76) !important;
  color: var(--lumen-ink) !important;
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(40, 63, 100, .08) !important;
}

.empty-chat-icon {
  border-color: rgba(255,22,135, .14) !important;
  background: rgba(255,22,135, .08) !important;
  box-shadow: none !important;
}

.empty-chat-icon img {
  filter: invert(42%) sepia(81%) saturate(1733%) hue-rotate(210deg) brightness(91%) !important;
}

.empty-chat p {
  color: var(--lumen-muted) !important;
}

.quick-topics button {
  border-color: rgba(255,22,135, .2) !important;
  background: rgba(255,22,135, .07) !important;
  color: var(--lumen-ink) !important;
}

.admin-actions,
.status-panel,
.composer {
  border-color: rgba(255,22,135, .1) !important;
  background: rgba(247, 249, 253, .9) !important;
}

.admin-actions button,
.status-panel button,
.status-panel .status-line {
  border-color: var(--lumen-line) !important;
  background: rgba(255, 255, 255, .9) !important;
  color: var(--lumen-ink) !important;
}

.composer textarea {
  border-color: var(--lumen-line) !important;
  background: #fff !important;
  color: var(--lumen-ink) !important;
  caret-color: var(--lumen-primary) !important;
}

.composer textarea:focus {
  border-color: rgba(255,22,135, .52) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,22,135, .12) !important;
}

.send-button {
  background: linear-gradient(145deg, var(--lumen-primary), #bd0b5c) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(255,22,135, .26) !important;
}

html.support-preopen .support-shell,
html.from-fab-open .support-shell,
html.support-closing .support-shell {
  background: var(--lumen-bg) !important;
  box-shadow: 0 -28px 90px rgba(40, 63, 100, .2) !important;
}

html.support-closing body::after {
  background: var(--lumen-bg) !important;
}

@media (max-width: 430px) {
  .app-brand {
    margin-bottom: 12px;
    border-radius: 20px;
  }

  .app-brand img {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .profile-card {
    border-radius: 24px;
  }

  .box,
  .connect-page .box,
  .devices-page .box,
  .renew-page .box,
  .shell {
    border-radius: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Flat page layout: content cards provide hierarchy without a page-sized frame. */
.connect-page .box,
.devices-page .box {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.connect-page .box::before,
.devices-page .box::before {
  display: none !important;
}

/* Keep third-party app artwork neatly clipped to a consistent app-icon squircle. */
.connect-page .app-logo,
.connect-page .btn.featured .app-logo {
  border-radius: 10px !important;
  object-fit: cover;
  clip-path: inset(0 round 10px);
  background: transparent !important;
  box-shadow: 0 5px 14px rgba(40, 63, 100, .14) !important;
}

/* Incy is the recommended client, so its CTA follows Incy's own green identity. */
.connect-page .btn.featured {
  border-color: rgba(31, 157, 82, .34) !important;
  background: linear-gradient(135deg, #11683b, #21a85c) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(22, 138, 78, .25) !important;
}

.connect-page .btn.featured .app-badge {
  background: rgba(255, 255, 255, .17) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

/* OS glyphs stay unboxed; the full row remains the accessible touch target. */
.connect-page .device-head .ico {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* App-specific instruction themes. */
body.app-incy {
  --guide-accent: #168a4f;
  --guide-accent-2: #35b965;
  --guide-rgb: 22, 138, 79;
}

body.app-hiddify {
  --guide-accent: #4059df;
  --guide-accent-2: #6579ef;
  --guide-rgb: 64, 89, 223;
}

body.app-happ {
  --guide-accent: #29292d;
  --guide-accent-2: #55565e;
  --guide-rgb: 41, 41, 45;
}

body.app-v2raytun {
  --guide-accent: #0f1012;
  --guide-accent-2: #34363b;
  --guide-rgb: 15, 16, 18;
}

body.app-incy,
body.app-hiddify,
body.app-happ,
body.app-v2raytun {
  background:
    radial-gradient(circle at 8% 4%, rgba(var(--guide-rgb), .16), transparent 29%),
    radial-gradient(circle at 94% 34%, rgba(var(--guide-rgb), .11), transparent 32%),
    linear-gradient(155deg, #fbfcff 0%, #f0f4fa 56%, #f8faff 100%) !important;
}

body.app-incy .shell,
body.app-hiddify .shell,
body.app-happ .shell,
body.app-v2raytun .shell {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.app-incy .shell::before,
body.app-hiddify .shell::before,
body.app-happ .shell::before,
body.app-v2raytun .shell::before {
  background: radial-gradient(circle at 50% 0, rgba(var(--guide-rgb), .2), transparent 65%) !important;
}

body.app-incy .eyebrow,
body.app-hiddify .eyebrow,
body.app-happ .eyebrow,
body.app-v2raytun .eyebrow {
  color: var(--guide-accent) !important;
}

body.app-incy .app-logo-xl,
body.app-hiddify .app-logo-xl,
body.app-happ .app-logo-xl,
body.app-v2raytun .app-logo-xl {
  box-shadow: 0 16px 34px rgba(var(--guide-rgb), .2) !important;
}

body.app-incy .step.active,
body.app-hiddify .step.active,
body.app-happ .step.active,
body.app-v2raytun .step.active {
  border-color: rgba(var(--guide-rgb), .32) !important;
  background: linear-gradient(145deg, rgba(var(--guide-rgb), .1), rgba(255, 255, 255, .96)) !important;
  box-shadow: 0 10px 26px rgba(var(--guide-rgb), .1) !important;
}

body.app-incy .num,
body.app-hiddify .num,
body.app-happ .num,
body.app-v2raytun .num {
  border-color: rgba(var(--guide-rgb), .18) !important;
  background: rgba(var(--guide-rgb), .09) !important;
  color: var(--guide-accent) !important;
}

body.app-incy .action.primary,
body.app-hiddify .action.primary,
body.app-happ .action.primary,
body.app-v2raytun .action.primary {
  background: linear-gradient(145deg, var(--guide-accent), var(--guide-accent-2)) !important;
  color: #fff !important;
  box-shadow: 0 11px 25px rgba(var(--guide-rgb), .25) !important;
}

body.app-incy .action.secondary,
body.app-incy .action.ghost,
body.app-hiddify .action.secondary,
body.app-hiddify .action.ghost,
body.app-happ .action.secondary,
body.app-happ .action.ghost,
body.app-v2raytun .action.secondary,
body.app-v2raytun .action.ghost {
  border-color: rgba(var(--guide-rgb), .16) !important;
  background: rgba(255, 255, 255, .88) !important;
  color: var(--lumen-ink) !important;
}

body.app-incy .shell p,
body.app-hiddify .shell p,
body.app-happ .shell p,
body.app-v2raytun .shell p {
  color: var(--lumen-muted) !important;
}

body.app-incy button:focus-visible,
body.app-incy a:focus-visible,
body.app-hiddify button:focus-visible,
body.app-hiddify a:focus-visible,
body.app-happ button:focus-visible,
body.app-happ a:focus-visible,
body.app-v2raytun button:focus-visible,
body.app-v2raytun a:focus-visible {
  outline-color: rgba(var(--guide-rgb), .34) !important;
}

/* Platform glyphs in linked-device rows do not need a decorative tile. */
.devices-page .managed-device > .ico,
.devices-page .active-connection > .ico {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Chupacabra VPN — neon noir brand layer (loaded last on purpose). */
:root,
html,
body,
body.dark {
  color-scheme: dark !important;
  --lumen-primary: #ff1978;
  --lumen-primary-strong: #d70b62;
  --lumen-primary-soft: #341022;
  --lumen-ink: #fff4fa;
  --lumen-muted: #cda9bc;
  --lumen-bg: #070207;
  --lumen-surface: rgba(27, 7, 21, .84);
  --lumen-surface-solid: #160611;
  --lumen-line: rgba(255, 39, 137, .24);
  --lumen-line-strong: rgba(255, 53, 151, .48);
  --lumen-shadow: 0 22px 64px rgba(0, 0, 0, .55);
  --lumen-shadow-soft: 0 12px 34px rgba(0, 0, 0, .38);
  --lumen-danger: #ff426f;
  --lumen-success: #52e6bd;
  --bg1: #070207;
  --bg2: #12040e;
  --bg3: #230719;
  --panel: rgba(27, 7, 21, .84);
  --panel2: rgba(255, 25, 120, .08);
  --text: #fff4fa;
  --muted: #cda9bc;
  --line: rgba(255, 39, 137, .24);
  --primary: #ff1978;
  --primary2: #8b0d45;
  --primaryText: #fff;
  --shadow: 0 22px 64px rgba(0, 0, 0, .55);
  --btn: rgba(41, 9, 31, .88);
  background: #070207 !important;
  color: #fff4fa !important;
}

body,
body.app-incy,
body.app-hiddify,
body.app-happ,
body.app-v2raytun {
  background:
    radial-gradient(circle at 10% -4%, rgba(255, 25, 120, .31), transparent 32%),
    radial-gradient(circle at 96% 28%, rgba(139, 13, 69, .26), transparent 35%),
    linear-gradient(155deg, #050105 0%, #13030e 55%, #080207 100%) !important;
}

body::before,
body::after {
  background: #ff1978 !important;
  opacity: .22 !important;
}

.app-brand,
.tabs,
.card,
.tile,
.item,
.panel,
.sheet,
.dialog-card,
.profile-card,
.balance-card,
.subscription-card,
.device-card,
.renew-card,
.step,
.method-list button,
.preset-card,
.choice-grid button {
  border-color: var(--lumen-line) !important;
  background: linear-gradient(145deg, rgba(38, 8, 29, .92), rgba(17, 4, 14, .86)) !important;
  color: var(--lumen-ink) !important;
  box-shadow: var(--lumen-shadow-soft), inset 0 1px 0 rgba(255, 112, 179, .08) !important;
}

.app-brand img,
.mark,
.support-brand-logo {
  border-radius: 18px !important;
  box-shadow: 0 0 0 1px rgba(255, 85, 162, .38), 0 10px 30px rgba(255, 25, 120, .28) !important;
}

.app-brand strong,
.app h1,
.app h2,
.app h3,
.app b,
.app strong,
.brand h1,
.shell h1,
.shell h2 {
  color: var(--lumen-ink) !important;
}

.tabs {
  background: rgba(17, 4, 14, .88) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 92, 168, .12) !important;
}

.tabs button {
  color: #c7a4b7 !important;
}

.tabs button.active,
.primary,
.action.primary,
button.primary {
  border-color: rgba(255, 112, 179, .55) !important;
  background: linear-gradient(135deg, #ff1978, #c90d68 55%, #8b0d45) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(255, 25, 120, .34), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

input,
textarea,
select {
  border-color: rgba(255, 39, 137, .26) !important;
  background: rgba(8, 2, 7, .76) !important;
  color: #fff4fa !important;
}

::selection {
  background: rgba(255, 25, 120, .36);
  color: #fff;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: rgba(255, 25, 120, .55) !important;
}

body.app-incy,
body.app-hiddify,
body.app-happ,
body.app-v2raytun {
  --guide-accent: #ff1978;
  --guide-accent-2: #8b0d45;
  --guide-rgb: 255, 25, 120;
}

body.app-incy .step.active,
body.app-hiddify .step.active,
body.app-happ .step.active,
body.app-v2raytun .step.active {
  border-color: rgba(255, 39, 137, .44) !important;
  background: linear-gradient(145deg, rgba(65, 10, 47, .94), rgba(18, 4, 14, .94)) !important;
}

body.app-incy .action.secondary,
body.app-incy .action.ghost,
body.app-hiddify .action.secondary,
body.app-hiddify .action.ghost,
body.app-happ .action.secondary,
body.app-happ .action.ghost,
body.app-v2raytun .action.secondary,
body.app-v2raytun .action.ghost {
  border-color: rgba(255, 39, 137, .22) !important;
  background: rgba(31, 7, 24, .9) !important;
  color: #fff4fa !important;
}

/* Final Chupacabra mascot web layer. Keep this last: it retires every visual
   remnant of the former light/blue UI and the C-shaped mark. */
html,
body {
  min-width: 0 !important;
  background: #050105 !important;
}

#stars {
  background: transparent !important;
}

.app {
  width: min(720px, 100%) !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

.app-brand {
  border: 1px solid rgba(255, 22, 135, .28) !important;
  background: linear-gradient(135deg, rgba(37, 6, 27, .96), rgba(14, 3, 12, .92)) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 120, 183, .08) !important;
}

.app-brand img,
.mark,
.support-brand-logo,
.loader-inner img {
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  box-shadow: none !important;
  filter: none !important;
}

.app-brand strong,
.brand h1,
.support-title h1 {
  color: #fff4fa !important;
  text-shadow: none !important;
}

.app-brand small,
.support-title p,
.muted {
  color: #cda9bc !important;
}

.profile-cover {
  height: 138px !important;
  background:
    linear-gradient(90deg, rgba(5, 1, 5, .96), rgba(37, 5, 26, .58)),
    url('/assets/chupacabra-mascot.png?v=20260803-mascot-web-v10') right -24px center / 190px auto no-repeat,
    linear-gradient(135deg, #12030e, #3a0828) !important;
}

.profile-cover::before {
  inset: -18px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background-image: var(--profile-cover-img) !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: var(--profile-cover-opacity, .34) !important;
  transform: scale(var(--profile-cover-scale, 1)) !important;
  filter: blur(var(--profile-cover-blur, 0)) saturate(.7) !important;
}

.profile-cover::after {
  background:
    linear-gradient(90deg, rgba(4, 1, 4, .86), rgba(4, 1, 4, .16) 62%, rgba(4, 1, 4, .04)),
    linear-gradient(180deg, transparent 35%, rgba(7, 1, 6, .82)) !important;
}

.avatar {
  border: 5px solid #210718 !important;
  background:
    url('/assets/logo.png?v=20260803-mascot-web-v10') center / 82% no-repeat,
    #090207 !important;
  color: #fff4fa !important;
  box-shadow: 0 0 0 1px rgba(255, 22, 135, .5), 0 14px 34px rgba(0, 0, 0, .48) !important;
}

.profile-grid div,
.ref-stats div,
.dialog-details div {
  border-color: rgba(255, 22, 135, .18) !important;
  background: rgba(255, 22, 135, .055) !important;
}

.profile-grid b,
.ref-stats b,
.balance,
.package-card .row b:last-child,
.renew-total b,
.ref-link,
.item code,
.card code {
  color: #ff5ba9 !important;
}

.title-shine {
  color: #fff4fa !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
  text-shadow: none !important;
}

.method-list button.active,
.custom-package-toggle.active,
.quick-topics button,
.ticket-chip.new {
  border-color: rgba(255, 22, 135, .4) !important;
  background: rgba(255, 22, 135, .13) !important;
  color: #fff4fa !important;
  box-shadow: none !important;
}

.support-fab,
.support-hint-card button,
.nav-hint-card button,
.section-hint-card button,
.send-button,
.browser-card a {
  border-color: rgba(255, 112, 179, .5) !important;
  background: linear-gradient(135deg, #ff1687, #bd0b5c) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34) !important;
}

.support-fab::before {
  border-color: rgba(255, 22, 135, .34) !important;
}

.support-hint-icon::before,
.nav-hint-icon::before,
.section-hint-icon::before {
  background: #ff5ba9 !important;
}

.btn.featured {
  border-color: rgba(255, 22, 135, .34) !important;
  background: linear-gradient(135deg, rgba(112, 8, 62, .68), rgba(31, 5, 24, .92)) !important;
  color: #fff4fa !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3) !important;
}

.app-badge {
  background: rgba(255, 22, 135, .16) !important;
  color: #ff8ac1 !important;
}

.loader-ring {
  border-color: rgba(255, 22, 135, .18) !important;
  border-top-color: #ff1687 !important;
}

.tabs::before {
  background: linear-gradient(180deg, rgba(255, 92, 168, .06), transparent) !important;
}

.info .item,
.connect-page .item,
.devices-page .item,
.managed-device,
.renew-counter,
.renew-total > div,
.device-card,
.connect-page .device-card,
.devices-page .managed-device,
.renew-period {
  border-color: rgba(255, 22, 135, .22) !important;
  background: linear-gradient(145deg, rgba(34, 7, 26, .94), rgba(15, 3, 12, .94)) !important;
  color: #fff4fa !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 112, 179, .06) !important;
}

.device-card.active,
.connect-page .device-card.active,
.renew-period.active {
  border-color: rgba(255, 22, 135, .5) !important;
  background: linear-gradient(145deg, rgba(69, 10, 49, .96), rgba(20, 4, 16, .96)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .36) !important;
}

.device-head,
.device-title,
.chev,
.ico,
.v,
.managed-title,
.renew-counter b {
  color: #fff4fa !important;
}

.k,
.managed-meta,
.renew-counter small,
.renew-total span,
.renew-label {
  color: #cf9db7 !important;
}

.secondary,
.choice-grid button,
.method-list button,
.payout-banks button,
.payout-crypto-options button,
.custom-package-toggle {
  border-color: rgba(255, 22, 135, .2) !important;
  background: rgba(31, 7, 24, .9) !important;
  color: #fff4fa !important;
  box-shadow: none !important;
}

input,
textarea,
select,
.ref-link,
.country-code,
.payout-crypto-block input,
.model-field input {
  border-color: rgba(255, 22, 135, .24) !important;
  background: rgba(8, 2, 7, .88) !important;
  color: #fff4fa !important;
  caret-color: #ff1687 !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #a87d94 !important;
}

.chat-window,
body.admin-support .chat-window,
.empty-chat {
  border-color: rgba(255, 22, 135, .2) !important;
  background: linear-gradient(180deg, rgba(25, 5, 20, .96), rgba(8, 2, 7, .98)) !important;
  color: #fff4fa !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 112, 179, .06) !important;
}

.message.bot,
body.admin-support .message.bot,
.message.system {
  border-color: rgba(255, 22, 135, .18) !important;
  background: rgba(255, 22, 135, .09) !important;
  color: #fff4fa !important;
}

.message.user,
body.admin-support .message.user {
  background: linear-gradient(135deg, #ff1687, #bd0b5c) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.admin-actions,
.status-panel,
.composer {
  border-color: rgba(255, 22, 135, .14) !important;
  background: rgba(8, 2, 7, .94) !important;
}

.admin-actions button,
.status-panel button,
.status-panel .status-line {
  border-color: rgba(255, 22, 135, .2) !important;
  background: rgba(34, 7, 26, .94) !important;
  color: #fff4fa !important;
}

.composer textarea,
.composer textarea:focus {
  border-color: rgba(255, 22, 135, .28) !important;
  background: #0d030a !important;
  color: #fff4fa !important;
  box-shadow: none !important;
}

.browser-card a,
.denied a {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(255, 112, 179, .55) !important;
  border-radius: 15px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff1978, #bd0b5c) !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(255, 25, 120, .22) !important;
}

.server-list-columns b {
  color: #fff4fa !important;
}

.server-list-columns ol,
.server-list-columns li {
  color: #d9aec5 !important;
}

.server-list-columns li::marker {
  color: #ff1687 !important;
}

/* Brand-only surfaces: these selectors intentionally outrank the retired
   light theme on standalone connect, devices, renew and tutorial screens. */
.connect-page,
.devices-page,
.renew-page {
  background:
    radial-gradient(circle at 10% -4%, rgba(255, 22, 135, .2), transparent 32%),
    radial-gradient(circle at 96% 32%, rgba(139, 13, 69, .2), transparent 36%),
    linear-gradient(155deg, #050105 0%, #13030e 56%, #080207 100%) !important;
  color: #fff4fa !important;
}

.connect-glow,
.devices-glow,
.renew-glow {
  background: #ff1687 !important;
}

.connect-page .box,
.devices-page .box,
.renew-page .box {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.connect-page .box::before,
.devices-page .box::before,
.renew-page .box::before {
  display: none !important;
  content: none !important;
}

.renew-hero,
.model-card,
.app-fallback,
.shell,
.dialog-card,
.support-hint-card,
.nav-hint-card,
.section-hint-card {
  border-color: rgba(255, 22, 135, .24) !important;
  background: linear-gradient(145deg, rgba(38, 8, 29, .98), rgba(10, 2, 8, .98)) !important;
  color: #fff4fa !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 112, 179, .07) !important;
}

.dialog-card p,
.support-hint-card p,
.nav-hint-card p,
.section-hint-card p {
  color: #d9aec5 !important;
}

.renew-period.active,
.devices-page .success-btn,
.renew-pay-btn,
.guide-action.primary,
.model-btn.primary,
body.admin-support .ticket-chip.active,
body.admin-support .admin-actions .primary {
  border-color: rgba(255, 112, 179, .52) !important;
  background: linear-gradient(135deg, #ff1687, #bd0b5c) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(255, 22, 135, .2) !important;
}

.renew-divider,
.renew-divider::before,
.renew-divider::after {
  border-color: rgba(255, 22, 135, .18) !important;
  background-color: rgba(255, 22, 135, .18) !important;
}

.guide-frame-screen,
.guide-screen,
.guide-step,
.guide-action.secondary,
.guide-action.ghost {
  border-color: rgba(255, 22, 135, .2) !important;
  background: rgba(25, 5, 20, .96) !important;
  color: #fff4fa !important;
}

body.app-incy {
  --guide-accent: #9ee56a !important;
  --guide-accent-2: #35b965 !important;
  --guide-rgb: 80, 185, 72 !important;
  --accent: #9ee56a !important;
  --accent2: #35b965 !important;
  --accent-soft: rgba(80, 185, 72, .2) !important;
  --accent-card: rgba(20, 88, 39, .22) !important;
  --accent-line: rgba(158, 229, 106, .3) !important;
  --accent-text: #071407 !important;
}

body.app-hiddify {
  --guide-accent: #8ea2ff !important;
  --guide-accent-2: #4657ff !important;
  --guide-rgb: 92, 116, 255 !important;
  --accent: #8ea2ff !important;
  --accent2: #4657ff !important;
  --accent-soft: rgba(92, 116, 255, .22) !important;
  --accent-card: rgba(55, 65, 180, .2) !important;
  --accent-line: rgba(142, 162, 255, .3) !important;
  --accent-text: #060a22 !important;
}

body.app-happ {
  --guide-accent: #f4f4f5 !important;
  --guide-accent-2: #737373 !important;
  --guide-rgb: 190, 190, 194 !important;
  --accent: #f4f4f5 !important;
  --accent2: #737373 !important;
  --accent-soft: rgba(245, 245, 245, .14) !important;
  --accent-card: rgba(115, 115, 115, .17) !important;
  --accent-line: rgba(245, 245, 245, .22) !important;
  --accent-text: #080808 !important;
}

body.app-v2raytun {
  --guide-accent: #f5f5f5 !important;
  --guide-accent-2: #3f3f46 !important;
  --guide-rgb: 180, 180, 184 !important;
  --accent: #f5f5f5 !important;
  --accent2: #3f3f46 !important;
  --accent-soft: rgba(229, 229, 229, .14) !important;
  --accent-card: rgba(63, 63, 70, .18) !important;
  --accent-line: rgba(244, 244, 245, .22) !important;
  --accent-text: #070707 !important;
}

body.app-incy,
body.app-hiddify,
body.app-happ,
body.app-v2raytun {
  background:
    radial-gradient(circle at 8% 4%, rgba(var(--guide-rgb), .14), transparent 30%),
    radial-gradient(circle at 94% 34%, rgba(var(--guide-rgb), .09), transparent 34%),
    linear-gradient(155deg, #050506 0%, #0d0d10 56%, #030304 100%) !important;
}

body.app-incy .shell,
body.app-hiddify .shell,
body.app-happ .shell,
body.app-v2raytun .shell,
body.app-incy .guide-frame-screen,
body.app-hiddify .guide-frame-screen,
body.app-happ .guide-frame-screen,
body.app-v2raytun .guide-frame-screen,
body.app-incy .guide-step,
body.app-hiddify .guide-step,
body.app-happ .guide-step,
body.app-v2raytun .guide-step,
body.app-incy .step,
body.app-hiddify .step,
body.app-happ .step,
body.app-v2raytun .step {
  border-color: rgba(var(--guide-rgb), .22) !important;
  background: linear-gradient(145deg, rgba(var(--guide-rgb), .08), rgba(8, 8, 10, .97)) !important;
  color: #f8fafc !important;
}

body.app-incy .guide-step.active,
body.app-hiddify .guide-step.active,
body.app-happ .guide-step.active,
body.app-v2raytun .guide-step.active,
body.app-incy .step.active,
body.app-hiddify .step.active,
body.app-happ .step.active,
body.app-v2raytun .step.active {
  border-color: rgba(var(--guide-rgb), .48) !important;
  background: linear-gradient(145deg, rgba(var(--guide-rgb), .15), rgba(8, 8, 10, .98)) !important;
}

body.app-incy .guide-action.primary,
body.app-hiddify .guide-action.primary,
body.app-happ .guide-action.primary,
body.app-v2raytun .guide-action.primary,
body.app-incy .action.primary,
body.app-hiddify .action.primary,
body.app-happ .action.primary,
body.app-v2raytun .action.primary {
  border-color: rgba(var(--guide-rgb), .48) !important;
  background: linear-gradient(135deg, var(--guide-accent), var(--guide-accent-2)) !important;
  color: var(--accent-text) !important;
  box-shadow: 0 12px 28px rgba(var(--guide-rgb), .2) !important;
}

body.app-incy .guide-action.secondary,
body.app-incy .guide-action.ghost,
body.app-hiddify .guide-action.secondary,
body.app-hiddify .guide-action.ghost,
body.app-happ .guide-action.secondary,
body.app-happ .guide-action.ghost,
body.app-v2raytun .guide-action.secondary,
body.app-v2raytun .guide-action.ghost {
  border-color: rgba(var(--guide-rgb), .26) !important;
  background: rgba(var(--guide-rgb), .08) !important;
  color: #f8fafc !important;
}

body.app-incy .action.secondary,
body.app-incy .action.ghost,
body.app-hiddify .action.secondary,
body.app-hiddify .action.ghost,
body.app-happ .action.secondary,
body.app-happ .action.ghost,
body.app-v2raytun .action.secondary,
body.app-v2raytun .action.ghost {
  border-color: rgba(var(--guide-rgb), .3) !important;
  background: rgba(var(--guide-rgb), .08) !important;
  color: #f8fafc !important;
}

body.app-incy .num,
body.app-hiddify .num,
body.app-happ .num,
body.app-v2raytun .num,
body.app-incy .guide-num,
body.app-hiddify .guide-num,
body.app-happ .guide-num,
body.app-v2raytun .guide-num {
  border-color: rgba(var(--guide-rgb), .3) !important;
  background: rgba(var(--guide-rgb), .14) !important;
  color: var(--guide-accent) !important;
}

/* Screenshot audit: tab containers are layout only, never page-sized cards. */
.panel,
.panel.show {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.choice-grid button.active,
.method-list button.active,
.payout-banks button.active,
.payout-crypto-options button.active,
.custom-package-toggle.active {
  border-color: rgba(255, 22, 135, .52) !important;
  background: linear-gradient(145deg, rgba(91, 10, 62, .96), rgba(24, 4, 18, .98)) !important;
  color: #fff4fa !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 112, 179, .08) !important;
}

.support-fab-tooltip {
  border-color: rgba(255, 22, 135, .38) !important;
  background: #210718 !important;
  color: #fff4fa !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .46) !important;
}

.support-fab-tooltip::after {
  right: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 8px solid #210718 !important;
  background: transparent !important;
  transform: translateY(-50%) !important;
}

.secondary .btn-icon-img,
.empty-chat-icon img {
  filter: brightness(0) saturate(100%) invert(24%) sepia(99%) saturate(6746%) hue-rotate(325deg) brightness(102%) contrast(104%) !important;
  opacity: 1 !important;
}

.status-dot,
body.admin-support .status-dot {
  background: #ff1687 !important;
  box-shadow: 0 0 0 6px rgba(255, 22, 135, .13) !important;
}

.ticket-chip,
body.admin-support .ticket-chip {
  border-color: rgba(255, 22, 135, .26) !important;
  background: rgba(31, 7, 24, .96) !important;
  color: #d9aec5 !important;
  box-shadow: none !important;
}

.ticket-chip.active,
.ticket-chip.new,
body.admin-support .ticket-chip.active {
  border-color: rgba(255, 112, 179, .52) !important;
  background: linear-gradient(135deg, #ff1687, #bd0b5c) !important;
  color: #fff !important;
}

.empty-chat {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.empty-chat-icon {
  border-color: rgba(255, 22, 135, .3) !important;
  background: rgba(255, 22, 135, .1) !important;
}

.connect-page .app-choice {
  color: #fff4fa !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
}

.connect-page .app-choice-v2raytun,
.connect-page .app-choice-happ {
  border-color: rgba(244, 244, 245, .2) !important;
  background: linear-gradient(145deg, rgba(39, 39, 42, .96), rgba(9, 9, 11, .98)) !important;
}

.connect-page .app-choice-hiddify {
  border-color: rgba(142, 162, 255, .42) !important;
  background: linear-gradient(145deg, rgba(55, 65, 180, .42), rgba(8, 11, 34, .98)) !important;
  color: #eef1ff !important;
}

/* Fallback for clients that still have the pre-class app button markup cached. */
.connect-page .btn:has(.app-logo[src*="v2raytun.png"]),
.connect-page .btn:has(.app-logo[src*="happ.png"]) {
  border-color: rgba(244, 244, 245, .2) !important;
  background: linear-gradient(145deg, rgba(39, 39, 42, .96), rgba(9, 9, 11, .98)) !important;
  color: #fff4fa !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
}

.connect-page .btn:has(.app-logo[src*="hiddify.png"]) {
  border-color: rgba(142, 162, 255, .42) !important;
  background: linear-gradient(145deg, rgba(55, 65, 180, .42), rgba(8, 11, 34, .98)) !important;
  color: #eef1ff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
}

.model-dialog.show {
  background: rgba(5, 1, 5, .82) !important;
}

.dialog-backdrop.show {
  background: rgba(5, 1, 5, .82) !important;
}

.model-btn.ghost,
.model-btn:not(.primary) {
  border-color: rgba(255, 22, 135, .26) !important;
  background: rgba(31, 7, 24, .96) !important;
  color: #fff4fa !important;
}

.toast {
  border-color: rgba(255, 22, 135, .3) !important;
  background: rgba(31, 7, 24, .96) !important;
  color: #fff4fa !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff4fa !important;
  box-shadow: 0 0 0 1000px #0d030a inset !important;
  caret-color: #ff1687 !important;
}

html {
  background:
    radial-gradient(circle at 10% -4%, rgba(255, 22, 135, .2), transparent 32%),
    radial-gradient(circle at 96% 32%, rgba(139, 13, 69, .2), transparent 36%),
    linear-gradient(155deg, #050105 0%, #13030e 56%, #080207 100%) !important;
  background-attachment: fixed !important;
}

.support-hint.show,
.nav-hint.show,
.section-hint.show {
  background: transparent !important;
}

.support-hint::before,
.nav-hint::before,
.section-hint::before {
  border-color: rgba(255, 22, 135, .72) !important;
}

.support-hint-card::after,
.nav-hint-card::after,
.section-hint-card::after {
  background: #12030d !important;
  border-color: rgba(255, 22, 135, .34) !important;
}

.devices-denied-page .box {
  border: 1px solid rgba(255, 22, 135, .22) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(38, 8, 29, .94), rgba(10, 2, 8, .96)) !important;
  color: #fff4fa !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 112, 179, .07) !important;
}

.devices-denied-page .icon {
  border-color: rgba(255, 22, 135, .32) !important;
  background: rgba(255, 22, 135, .1) !important;
  color: #ff1687 !important;
  box-shadow: none !important;
}

.devices-denied-page p {
  color: #d9aec5 !important;
}

@media (max-width: 520px) {
  .server-list-columns {
    grid-template-columns: 1fr !important;
  }

  .app-brand img {
    width: 52px !important;
    height: 52px !important;
  }
}