/* Админка KURILov VPN — в стиле мини-приложения: почти чёрный фиолетовый фон,
   переливающиеся фиолетовые пятна и тонкая сетка сзади, стеклянные карточки. */
.adm {
  --a-bg: #040307;
  --a-bg-deep: #020104;
  --a-card: rgba(255, 255, 255, 0.03);
  --a-card-hi: rgba(255, 255, 255, 0.055);
  --a-line: rgba(168, 85, 247, 0.14);
  --a-line-2: rgba(192, 132, 252, 0.28);
  --a-text: #e4dff2;
  --a-mute: #847aa4;
  --a-dim: #5d557a;
  --a-p: #7c3aed;
  --a-pb: #a855f7;
  --a-ps: #c084fc;
  --a-ok: #4ade80;
  --a-warn: #ff9d5c;
  --a-bad: #fb7185;
  --a-ease: cubic-bezier(0.22, 1, 0.32, 1);
  position: fixed;
  inset: 0;
  z-index: 10000; /* выше всего в приложении (у него максимум 9999) */
  overflow: hidden;
  color: var(--a-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(180deg, var(--a-bg) 0%, var(--a-bg-deep) 100%);
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.38s var(--a-ease), transform 0.5s var(--a-ease);
}
.adm.in { opacity: 1; transform: none; }
.adm.busy { cursor: progress; }
.adm.busy .adm-sheet button, .adm.busy .adm-fab { pointer-events: none; opacity: 0.6; }

.adm button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.adm svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── переливающийся фон: пятна медленно плывут и меняют оттенок, сверху сетка ── */
.adm-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.adm-bg i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.adm-bg .b1 {
  width: 120vw; height: 70vh; left: -35vw; top: -28vh;
  background: radial-gradient(closest-side, rgba(88, 28, 200, 0.42), rgba(48, 16, 86, 0.18) 55%, transparent 75%);
  animation: adm-drift-a 22s ease-in-out infinite alternate;
}
.adm-bg .b2 {
  width: 110vw; height: 65vh; right: -40vw; top: 18vh;
  background: radial-gradient(closest-side, rgba(192, 38, 211, 0.24), rgba(124, 58, 237, 0.1) 55%, transparent 75%);
  animation: adm-drift-b 26s ease-in-out infinite alternate;
}
.adm-bg .b3 {
  width: 160vw; height: 74vh; left: -30vw; bottom: -36vh;
  background: radial-gradient(closest-side, rgba(92, 42, 182, 0.34), rgba(124, 58, 237, 0.08) 50%, transparent 76%);
  animation: adm-breathe 12s ease-in-out infinite;
}
/* медленно вращающийся перелив поверх пятен — даёт «радужный» отлив, как у плёнки */
.adm-bg .b4 {
  width: 170vmax; height: 170vmax; left: 50%; top: 40%;
  margin: -85vmax 0 0 -85vmax;
  background: conic-gradient(from 0deg, rgba(124, 58, 237, 0) 0deg, rgba(168, 85, 247, 0.1) 60deg, rgba(56, 189, 248, 0.05) 120deg,
    rgba(236, 72, 153, 0.08) 200deg, rgba(124, 58, 237, 0) 280deg, rgba(192, 132, 252, 0.08) 330deg, rgba(124, 58, 237, 0) 360deg);
  filter: blur(40px);
  animation: adm-spin 60s linear infinite;
  opacity: 0.9;
}
.adm-bg .grid {
  inset: 0;
  border-radius: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 58% at 50% 0%, #000 12%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 58% at 50% 0%, #000 12%, transparent 78%);
  animation: adm-grid 18s linear infinite;
}

.adm-scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(110px + env(safe-area-inset-bottom, 0px));
  max-width: 560px;
  margin: 0 auto;
  scrollbar-width: none;
}
.adm-scroll::-webkit-scrollbar { display: none; }

/* шапка */
.adm-head { display: flex; align-items: center; gap: 12px; }
.adm-title { flex: 1; min-width: 0; }
.adm-title h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #f3edff 20%, #c084fc 55%, #f3edff 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: adm-shine 7s ease-in-out infinite;
}
.adm-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--a-ps) !important;
  background: rgba(124, 58, 237, 0.1);
  box-shadow: inset 0 0 0 1px var(--a-line);
  transition: transform 0.2s, background 0.2s;
}
.adm-icon:active { transform: scale(0.9); background: rgba(124, 58, 237, 0.22); }
.adm-icon.spin svg { animation: adm-spin 0.9s linear infinite; }

.adm-servers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.adm-srv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--a-mute);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--a-line);
}
.adm-srv > i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-ok); animation: adm-dot-ok 2.4s ease-in-out infinite; }
.adm-srv.down > i { background: var(--a-bad); animation: adm-dot-bad 2.4s ease-in-out infinite; }

.adm-flag { display: inline-block; flex: none; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); background: #2a2340; }
.adm-flag-pl { background: linear-gradient(180deg, #fff 50%, #dc143c 50%); }
.adm-flag-de { background: linear-gradient(180deg, #111 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); }
.adm-flag-nl { background: linear-gradient(180deg, #ae1c28 33.3%, #fff 33.3% 66.6%, #21468b 66.6%); }
.adm-flag-fi { background: linear-gradient(90deg, transparent 30%, #002f6c 30% 45%, transparent 45%), linear-gradient(180deg, #fff 40%, #002f6c 40% 60%, #fff 60%); }
.adm-flag-ru { background: linear-gradient(180deg, #fff 33.3%, #0039a6 33.3% 66.6%, #d52b1e 66.6%); }

.adm-notice {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--a-mute);
  background: rgba(124, 58, 237, 0.08);
  box-shadow: inset 0 0 0 1px var(--a-line-2);
}
.adm-notice b { color: var(--a-text); }
.adm-notice.bad { background: rgba(251, 113, 133, 0.08); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.3); color: #ffc4ce; }

/* стекло: общий вид карточек */
.adm-stat, .adm-row, .adm-search, .adm-grid > div {
  background: var(--a-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px var(--a-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* статистика */
.adm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.adm-stat {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 22px;
  animation: adm-rise 0.6s var(--a-ease) backwards;
}
.adm-stat:nth-child(2) { animation-delay: 0.05s; }
.adm-stat:nth-child(3) { animation-delay: 0.1s; }
.adm-stat:nth-child(4) { animation-delay: 0.15s; }
.adm-stat::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.3), transparent);
}
.adm-stat b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.adm-stat span { font-size: 12.5px; color: var(--a-mute); }
.adm-stat.is-online b { color: var(--a-ok); }
.adm-stat.is-online::after { background: radial-gradient(closest-side, rgba(74, 222, 128, 0.22), transparent); }
.adm-stat.is-warn b { color: var(--a-warn); }
.adm-stat.is-warn::after { background: radial-gradient(closest-side, rgba(255, 122, 61, 0.22), transparent); }
.adm-stat.is-soon b { color: var(--a-ps); }
.adm-traffic { margin-top: 10px; font-size: 12.5px; color: var(--a-mute); text-align: center; }
.adm-traffic b { color: var(--a-text); font-variant-numeric: tabular-nums; }

/* поиск и фильтры */
.adm-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 0 14px;
  height: 46px;
  border-radius: 16px;
  color: var(--a-dim);
  transition: box-shadow 0.25s;
}
.adm-search:focus-within { box-shadow: inset 0 0 0 1.5px rgba(168, 85, 247, 0.6), 0 0 26px -8px rgba(124, 58, 237, 0.8); }
.adm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--a-text); font: inherit; font-size: 15px; }
.adm-search input::placeholder { color: var(--a-dim); }

.adm-filters { display: flex; gap: 8px; margin: 12px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.adm-filters::-webkit-scrollbar { display: none; }
.adm-filters button {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--a-mute);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--a-line);
  transition: background 0.25s, color 0.25s, transform 0.2s, box-shadow 0.25s;
}
.adm-filters button:active { transform: scale(0.95); }
.adm-filters button.on {
  color: #fff;
  font-weight: 650;
  background: linear-gradient(180deg, var(--a-pb), var(--a-p));
  box-shadow: 0 6px 20px -6px rgba(124, 58, 237, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* список ключей */
.adm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.adm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 20px;
  text-align: left;
  animation: adm-rise 0.5s var(--a-ease) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
  transition: transform 0.2s, background 0.2s;
}
.adm-row:active { transform: scale(0.985); background: var(--a-card-hi); }
.adm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-row-main b { font-size: 15px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.adm-row-main span { font-size: 12.5px; color: var(--a-mute); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.adm-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.adm-row-side > span { font-size: 12px; color: var(--a-mute); font-variant-numeric: tabular-nums; }

.adm-row.skel { pointer-events: none; }
.adm-row.skel .adm-ava, .adm-row.skel i { background: linear-gradient(90deg, rgba(168,85,247,.06), rgba(168,85,247,.16), rgba(168,85,247,.06)); background-size: 200% 100%; animation: adm-shimmer 1.2s linear infinite; }
.adm-row.skel div { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.adm-row.skel i { display: block; height: 11px; width: 60%; border-radius: 6px; }
.adm-row.skel i + i { width: 40%; }

.adm-empty { padding: 40px 20px; text-align: center; color: var(--a-mute); font-size: 14px; }

.adm-ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  /* оттенок аватарки гуляет только по фиолетово-розовой гамме */
  background: linear-gradient(145deg, hsl(calc(250 + var(--h, 30) / 6) 70% 52%), hsl(calc(280 + var(--h, 30) / 8) 75% 30%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 16px -8px rgba(124, 58, 237, 0.8);
}
.adm-ava img { width: 100%; height: 100%; object-fit: cover; }
.adm-ava.lg { width: 56px; height: 56px; border-radius: 18px; font-size: 19px; }

.adm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.st-online { color: var(--a-ok); background: rgba(74, 222, 128, 0.12); }
.st-active { color: var(--a-ps); background: rgba(168, 85, 247, 0.14); }
.st-warn { color: var(--a-warn); background: rgba(255, 122, 61, 0.12); }
.st-bad { color: var(--a-bad); background: rgba(251, 113, 133, 0.12); }
.st-muted { color: var(--a-mute); background: rgba(255, 255, 255, 0.06); }
.pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: adm-pulse 1.6s ease-out infinite; }

/* кнопка нового ключа */
.adm-fab {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  height: 54px;
  border-radius: 999px;
  translate: -50% 0;
  overflow: hidden;
  font-weight: 700;
  font-size: 16px;
  color: #fff !important;
  background: linear-gradient(180deg, var(--a-pb), var(--a-p)) !important;
  box-shadow: 0 14px 38px -10px rgba(124, 58, 237, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: adm-fab 0.7s 0.25s var(--a-ease) backwards;
  transition: transform 0.2s;
}
/* блик пробегает по кнопке */
.adm-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: adm-sheen 4.5s 1.2s ease-in-out infinite;
}
.adm-fab:active { transform: scale(0.95); }
.adm-fab svg { width: 22px; height: 22px; stroke-width: 2.4; }

/* шторка */
.adm-sheet-wrap { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.adm-sheet-wrap:empty { display: none; }
.adm-backdrop { position: absolute; inset: 0; background: rgba(2, 1, 4, 0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.35s; }
.adm-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  max-height: 88vh;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(110% 40% at 50% 0%, rgba(124, 58, 237, 0.24), transparent 70%),
    rgba(12, 8, 22, 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(192, 132, 252, 0.3);
  transform: translateY(105%);
  transition: transform 0.5s cubic-bezier(0.22, 1.12, 0.36, 1);
  scrollbar-width: none;
}
.adm-sheet-wrap.open { pointer-events: auto; }
.adm-sheet-wrap.open .adm-backdrop { opacity: 1; }
.adm-sheet-wrap.open .adm-sheet { transform: none; }
.adm-grip { display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 99px; background: rgba(192, 132, 252, 0.3); }

.adm-sheet h3 { margin: 20px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-dim); }
.adm-sheet-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.adm-sheet-title.center, .adm-sub.center { text-align: center; }
.adm-sub { display: block; margin-top: 4px; font-size: 13.5px; color: var(--a-mute); line-height: 1.45; }

.adm-person { display: flex; align-items: center; gap: 14px; }
.adm-person > div { flex: 1; min-width: 0; }
.adm-person h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.adm-tg { margin-top: 2px; padding: 0; font-size: 14px !important; color: var(--a-ps) !important; }

.adm-hint {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #ffd0b0;
  background: rgba(255, 122, 61, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 61, 0.25);
}

.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.adm-grid > div { min-width: 0; padding: 12px; border-radius: 16px; }
.adm-grid span { display: block; font-size: 11.5px; color: var(--a-dim); }
.adm-grid b { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.adm-grid b.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.adm-grid small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--a-mute); }

.adm-link { margin-top: 14px; padding: 12px; border-radius: 18px; background: rgba(124, 58, 237, 0.09); box-shadow: inset 0 0 0 1px var(--a-line-2); }
.adm-link-title { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-dim); }
.adm-link code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--a-ps); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.adm-link-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.adm-link-btns button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--a-ps) !important;
  background: rgba(124, 58, 237, 0.12);
  transition: transform 0.2s, background 0.2s;
}
.adm-link-btns button:active { transform: scale(0.94); background: rgba(124, 58, 237, 0.26); }
.adm-qr { margin: 12px auto 0; width: min(240px, 100%); padding: 10px; border-radius: 16px; background: #fff; animation: adm-pop 0.4s var(--a-ease); }
.adm-qr svg { display: block; width: 100%; height: auto; }

.adm-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-seg button {
  flex: 1 1 auto;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--a-line);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.adm-seg button:active { transform: scale(0.95); }
.adm-seg button.on { color: #fff; background: linear-gradient(180deg, var(--a-pb), var(--a-p)); box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

.adm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.adm-actions button { padding: 13px 10px; border-radius: 14px; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--a-line); transition: transform 0.2s; }
.adm-actions button:active { transform: scale(0.96); }
.adm-actions .danger { color: var(--a-bad) !important; background: rgba(251, 113, 133, 0.08); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.25); }

.adm-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.adm-form h3 { margin: 12px 0 2px; }
.adm-form input, .adm-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: 14px;
  outline: 0;
  resize: none;
  font: inherit;
  font-size: 15px;
  color: var(--a-text);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--a-line);
  transition: box-shadow 0.25s;
}
.adm-form input:focus, .adm-form textarea:focus { box-shadow: inset 0 0 0 1.5px rgba(168, 85, 247, 0.65); }
.adm-form input::placeholder, .adm-form textarea::placeholder { color: var(--a-dim); }
.adm-primary {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  width: 100%;
  height: 52px;
  border-radius: 16px;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--a-pb), var(--a-p)) !important;
  box-shadow: 0 12px 30px -12px rgba(124, 58, 237, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s, opacity 0.2s;
}
.adm-primary:active { transform: scale(0.97); }
.adm-primary:disabled { opacity: 0.4; }

.adm-done { display: grid; place-items: center; margin: 6px 0 12px; }
.adm-done svg { width: 76px; height: 76px; stroke: var(--a-ok); stroke-width: 3; filter: drop-shadow(0 0 16px rgba(74, 222, 128, 0.55)); }
.adm-done circle { stroke-dasharray: 150; stroke-dashoffset: 150; animation: adm-draw 0.6s 0.1s var(--a-ease) forwards; }
.adm-done path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: adm-draw 0.45s 0.55s var(--a-ease) forwards; }

/* кнопка входа в админку поверх приложения — видна только администратору */
.adm-launch {
  position: fixed;
  right: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(160deg, #a855f7, #6d28d9);
  box-shadow: 0 10px 28px -8px rgba(124, 58, 237, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: adm-fab 0.7s 0.4s cubic-bezier(0.22, 1, 0.32, 1) backwards;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s;
}
.adm-launch:active { transform: scale(0.92); }
.adm-launch svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.adm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 10001;
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 14px;
  font: 500 13.5px/1.35 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #e4dff2;
  background: rgba(18, 12, 32, 0.95);
  box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.3), 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.adm-toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes adm-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes adm-fab { from { opacity: 0; transform: translateY(30px) scale(0.9); } }
@keyframes adm-pop { from { opacity: 0; transform: scale(0.9); } }
@keyframes adm-spin { to { transform: rotate(360deg); } }
@keyframes adm-shimmer { to { background-position: -200% 0; } }
@keyframes adm-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }
@keyframes adm-draw { to { stroke-dashoffset: 0; } }
@keyframes adm-sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes adm-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes adm-drift-a { to { transform: translate(18vw, 10vh) scale(1.15); } }
@keyframes adm-drift-b { to { transform: translate(-22vw, -8vh) scale(1.2); } }
@keyframes adm-breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes adm-grid { to { background-position: 0 56px; } }
@keyframes adm-dot-ok { 0%, 100% { box-shadow: 0 0 10px rgba(74, 222, 128, 0.85); } 50% { box-shadow: 0 0 18px rgba(74, 222, 128, 0.3); } }
@keyframes adm-dot-bad { 0%, 100% { box-shadow: 0 0 10px rgba(251, 113, 133, 0.85); } 50% { box-shadow: 0 0 18px rgba(251, 113, 133, 0.3); } }

/* ═════════ стиль KURILov VPN: берём переменные темы самого приложения ═════════
   (data-theme="black" / "violet"); значения после запятой — на случай, если темы нет */
.adm {
  --a-text: var(--ink, #f6f4fb);
  --a-mute: var(--ink-2, rgba(238, 233, 250, 0.58));
  --a-dim: var(--ink-2, rgba(238, 233, 250, 0.45));
  --a-line: var(--line, rgba(255, 255, 255, 0.08));
  --a-line-2: var(--line-hi, rgba(160, 125, 255, 0.38));
  --a-ps: var(--accent, #9275f2);
  --a-surf: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), var(--surface, #0b0912);
  --a-surf-2: linear-gradient(180deg, rgba(150, 115, 255, 0.14), rgba(150, 115, 255, 0.04)), var(--surface-2, #120e1d);
  --a-btn: var(--btn-bg, linear-gradient(180deg, #7a58ec 0%, #5a38c9 48%, #3d2296 100%));
  --a-btn-shadow: inset 0 1px 0 var(--btn-hi, rgba(255, 255, 255, 0.42)), inset 0 0 0 1px var(--btn-edge, rgba(255, 255, 255, 0.1)),
    inset 0 -12px 18px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.6),
    0 12px 22px -10px var(--btn-glow, rgba(112, 74, 240, 0.58)), 0 28px 42px -20px var(--btn-glow2, rgba(112, 74, 240, 0.32));
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.006em;
  background: var(--bg, #000);
}
/* живой фон приложения виден сквозь админку, само приложение на время скрыто */
.adm.use-app-bg { background: transparent; }
.adm.use-app-bg .adm-bg { display: none; }
body.adm-open #app, body.adm-open .adm-launch, body.adm-open .toast { visibility: hidden; }

/* поверхности — как карточки приложения */
.adm-stat, .adm-row, .adm-search, .adm-grid > div, .adm-filters button, .adm-seg button, .adm-actions button,
.adm-form input, .adm-form textarea, .adm-srv, .adm-icon {
  background: var(--a-surf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--a-line), 0 18px 30px -20px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.adm-stat, .adm-row { border-radius: 18px; }
.adm-stat::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--a-ps) 30%, transparent), transparent); }
.adm-stat.is-soon b, .adm-title h1 { color: var(--a-text); }
.adm-title h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: none; font-weight: 700; letter-spacing: -0.025em; }
.adm-icon { color: var(--a-text) !important; border-radius: 12px; }
.adm-row:active { background: var(--a-surf-2); }
.adm-search:focus-within, .adm-form input:focus, .adm-form textarea:focus { box-shadow: inset 0 0 0 1px var(--a-line-2), 0 0 24px -10px var(--btn-glow, rgba(112, 74, 240, 0.58)); }

/* кнопки — «стекло-металл» приложения */
.adm-launch {
  color: #fff;
  border-radius: 16px;
  background: var(--btn-bg, linear-gradient(180deg, #7a58ec 0%, #5a38c9 48%, #3d2296 100%));
  box-shadow: inset 0 1px 0 var(--btn-hi, rgba(255, 255, 255, 0.42)), inset 0 0 0 1px var(--btn-edge, rgba(255, 255, 255, 0.1)),
    0 1px 2px rgba(0, 0, 0, 0.6), 0 12px 22px -10px var(--btn-glow, rgba(112, 74, 240, 0.58)), 0 28px 42px -20px var(--btn-glow2, rgba(112, 74, 240, 0.32));
}
.adm-filters button.on, .adm-seg button.on, .adm-primary, .adm-fab {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38);
  background: var(--a-btn) !important;
  box-shadow: var(--a-btn-shadow);
}
.adm-primary { border-radius: 16px; }
.adm-filters button.on, .adm-seg button.on { font-weight: 600; }
.adm-link { background: var(--a-surf-2); box-shadow: inset 0 0 0 1px var(--a-line-2); }
.adm-link code, .adm-tg { color: var(--a-ps) !important; }
.adm-link-btns button { color: var(--a-text) !important; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--a-line); }
.st-active { color: var(--a-ps); background: color-mix(in srgb, var(--a-ps) 16%, transparent); }
.adm-ava { background: var(--a-btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.adm-sheet {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)), var(--surface, #0b0912);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.adm-grip { background: var(--a-line-2); }
.adm-notice { background: var(--a-surf); box-shadow: inset 0 0 0 1px var(--a-line); }

@media (prefers-reduced-motion: reduce) {
  .adm, .adm * { animation: none !important; transition: none !important; }
}