/* =====================================================================
   ANDROMEDA — космическая тема для caddy-security (authcrunch portal)
   Подключается через:  ui { custom css path /etc/caddy/ui/andromeda.css }
   Работает и на новых (brand-переменные), и на старых (tailwind) версиях.
   ===================================================================== */

/* ---------- 1. Палитра (новые версии берут её из переменных) ---------- */
:root {
  --brand-page: #04020d;
  --brand-surface: rgba(255, 255, 255, 0.07);
  --brand-soft: rgba(255, 255, 255, 0.05);
  --brand-ink: #f4f1ff;
  --brand-muted: rgba(226, 220, 255, 0.72);
  --brand-primary: #a78bfa;
  --brand-on-primary: #ffffff;
  --brand-primary-hover: #c4b5fd;
  --brand-border: rgba(255, 255, 255, 0.16);
  --brand-control-border: rgba(255, 255, 255, 0.18);
  --brand-focus: #8b7bff;
  --brand-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --brand-page-image: none;
  --brand-banner-image: none;
  --brand-radius: 28px;

  --glass-bg: linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.03) 100%);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-hi: rgba(255, 255, 255, 0.35);
  --accent-a: #7c5cff;   /* фиолетовый */
  --accent-b: #3fc8ff;   /* голубой    */
  --accent-c: #ff6ad5;   /* розовая туманность */
  --font-apple: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Глубокий космос + туманности ---------- */
html, html body, html body.basic-theme {
  background-color: #04020d !important;
  background-image:
    radial-gradient(ellipse 60% 45% at 15% 20%, rgba(124, 92, 255, .28), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(63, 200, 255, .18), transparent 70%),
    radial-gradient(ellipse 40% 35% at 70% 15%, rgba(255, 106, 213, .14), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(40, 20, 90, .55), transparent 70%),
    linear-gradient(180deg, #070318 0%, #04020d 55%, #020108 100%) !important;
  background-attachment: fixed !important;
  color: var(--brand-ink) !important;
  font-family: var(--font-apple) !important;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
html, body { min-height: 100%; overflow-x: hidden; }

/* ---------- 3. Звёздное поле (тайловый паттерн, 3 слоя) ---------- */
html::before,
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 0;
}

/* мелкие далёкие звёзды */
html::before {
  background-image:
    radial-gradient(1px 1px at 23px 41px, #fff, transparent),
    radial-gradient(1px 1px at 89px 127px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 151px 63px, rgba(200,210,255,.9), transparent),
    radial-gradient(1px 1px at 197px 179px, #fff, transparent),
    radial-gradient(1px 1px at 61px 211px, rgba(255,230,240,.8), transparent),
    radial-gradient(1px 1px at 233px 17px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 131px 239px, rgba(190,220,255,.9), transparent),
    radial-gradient(1px 1px at 11px 151px, rgba(255,255,255,.6), transparent);
  background-size: 250px 250px;
  opacity: .7;
  animation: drift 240s linear infinite;
}

/* средние звёзды, мерцают */
body::before {
  background-image:
    radial-gradient(1.5px 1.5px at 47px 83px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 263px 29px, rgba(210,200,255,1), transparent),
    radial-gradient(1.5px 1.5px at 171px 301px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 337px 211px, rgba(180,230,255,1), transparent),
    radial-gradient(1.5px 1.5px at 109px 367px, rgba(255,220,240,1), transparent);
  background-size: 400px 400px;
  animation: drift 180s linear infinite reverse, twinkle 6s ease-in-out infinite;
}

/* яркие звёзды с ореолом */
body::after {
  background-image:
    radial-gradient(2px 2px at 120px 160px, #fff, transparent),
    radial-gradient(6px 6px at 120px 160px, rgba(167,139,250,.35), transparent),
    radial-gradient(2px 2px at 520px 420px, #fff, transparent),
    radial-gradient(7px 7px at 520px 420px, rgba(63,200,255,.30), transparent),
    radial-gradient(2.5px 2.5px at 380px 70px, #fff, transparent),
    radial-gradient(8px 8px at 380px 70px, rgba(255,106,213,.25), transparent);
  background-size: 640px 640px;
  animation: twinkle 9s ease-in-out infinite 2s;
}

/* ---------- 4. Галактика Андромеды (CSS, без картинок) ---------- */
html::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  width: 95vmin;
  height: 30vmin;
  top: 6vh;
  right: -18vmin;
  border-radius: 50%;
  transform: rotate(-32deg);
  background:
    /* спутник M32 */
    radial-gradient(circle at 38% 72%, rgba(255,240,220,.9) 0, rgba(255,220,190,.35) .6%, transparent 1.6%),
    /* ядро */
    radial-gradient(ellipse 4.5% 14% at 50% 50%, rgba(255,252,242,1) 0%, rgba(255,232,190,.8) 45%, transparent 100%),
    /* балдж */
    radial-gradient(ellipse 18% 42% at 50% 50%, rgba(255,214,170,.5) 0%, rgba(230,170,255,.2) 60%, transparent 100%),
    /* пылевые рукава (смещены — без «колец») */
    repeating-radial-gradient(ellipse 120% 100% at 47% 55%, transparent 0 5%, rgba(12,4,30,.22) 6% 7%, transparent 8.5% 11%),
    /* голубые области звездообразования */
    radial-gradient(ellipse 14% 22% at 22% 46%, rgba(120,190,255,.28), transparent 100%),
    radial-gradient(ellipse 12% 20% at 79% 56%, rgba(120,190,255,.24), transparent 100%),
    /* диск */
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(170,150,255,.42) 0%, rgba(110,120,255,.2) 45%, rgba(63,200,255,.07) 72%, transparent 100%);
  filter: blur(2.5px) saturate(1.15);
  opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  animation: galaxy-breathe 14s ease-in-out infinite;
}

/* падающая звезда */
html body .app-page::before {
  content: "";
  position: fixed;
  top: 12%;
  left: -10%;
  width: 160px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9));
  border-radius: 2px;
  filter: drop-shadow(0 0 6px rgba(190,180,255,.9));
  transform: rotate(18deg);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: shooting 11s ease-in 3s infinite;
}

@keyframes drift   { from { transform: translate3d(0,0,0); } to { transform: translate3d(-250px,-125px,0); } }
@keyframes twinkle { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes galaxy-breathe { 0%,100% { opacity: .78; } 50% { opacity: .95; } }
@keyframes shooting {
  0%   { opacity: 0; transform: translate3d(0,0,0) rotate(18deg); }
  2%   { opacity: 1; }
  9%   { opacity: 0; transform: translate3d(70vw,23vw,0) rotate(18deg); }
  100% { opacity: 0; transform: translate3d(70vw,23vw,0) rotate(18deg); }
}

/* ---------- 5. Раскладка: контент над фоном ---------- */
html body .app-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: 40px 20px !important;
}
html body .app-content { margin: 0 auto !important; width: 100%; max-width: 460px !important; padding-bottom: 0 !important; }
html body .app-content.app-content-wide,
html body .app-content-wide { max-width: 960px !important; }

/* ---------- 6. Liquid Glass карточка (в духе Apple) ---------- */
html body .app-container {
  position: relative;
  isolation: isolate;
  --card-padding: 40px;
  padding: 44px 40px 36px !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border) !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 0 .5px rgba(255,255,255,.08),
    0 30px 80px -20px rgba(0,0,0,.7),
    0 0 120px -30px rgba(124,92,255,.45) !important;
  overflow: hidden;
}
/* блик стекла */
html body .app-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.18), transparent 50%),
    radial-gradient(80% 50% at 100% 100%, rgba(124,92,255,.12), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
/* тонкая переливающаяся кромка */
html body .app-container::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(167,139,250,.25) 30%, rgba(255,255,255,0) 55%, rgba(63,200,255,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
html body .brand-banner { display: none !important; }

/* ---------- 7. Логотип-орбита + заголовок ---------- */
html body .logo-box { text-align: center; }
html body .logo-box::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 6%, rgba(255,230,200,.9) 12%, rgba(167,139,250,.7) 30%, transparent 62%),
    conic-gradient(from 200deg, rgba(124,92,255,0), rgba(124,92,255,.8), rgba(63,200,255,.8), rgba(255,106,213,.6), rgba(124,92,255,0));
  -webkit-mask: radial-gradient(circle, #000 66%, transparent 70%);
          mask: radial-gradient(circle, #000 66%, transparent 70%);
  box-shadow: 0 0 40px rgba(124,92,255,.6);
  animation: orbit 18s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }
html body .logo-img { filter: drop-shadow(0 0 18px rgba(167,139,250,.6)); }
html body .logo-txt,
html body .logo-col-txt,
html body .app-gen-banner-header {
  margin: 6px 0 30px !important;
  font-family: var(--font-apple) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-align: center;
  color: transparent !important;
  background: linear-gradient(180deg, #ffffff 0%, #d9d0ff 60%, #a9c9ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
}

/* ---------- 8. Поля ввода ---------- */
html body .app-inp-lbl,
html body .app-gen-inp-lbl,
html body .app-txt-section {
  color: var(--brand-muted) !important;
  font-family: var(--font-apple) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 10px !important;
  padding: 0 0 0 4px !important;
}
html body .app-inp-box { box-shadow: none !important; margin-top: 0 !important; }
html body .app-inp-txt,
html body .app-gen-inp-txt,
html body .app-inp-sel,
html body .app-inp-code-txt,
html body input[type="text"],
html body input[type="password"],
html body input[type="email"] {
  width: 100%;
  min-height: 54px;
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  font-family: var(--font-apple) !important;
  font-size: 17px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35) !important;
  transition: border-color .25s, background .25s, box-shadow .25s;
  caret-color: var(--accent-b);
}
html body .app-inp-txt::placeholder { color: rgba(255,255,255,.35) !important; }
html body .app-inp-txt:focus,
html body .app-inp-code-txt:focus,
html body input:focus {
  outline: none !important;
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(167,139,250,.75) !important;
  box-shadow: 0 0 0 4px rgba(124,92,255,.22), 0 0 24px rgba(124,92,255,.25) !important;
}
/* убрать жёлтый автозаполнения Chrome */
html body input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(30,20,60,.95) inset !important;
  transition: background-color 9999s ease-out;
}
html body .app-inp-prf-img,
html body .app-inp-prf-img i { color: rgba(220,210,255,.7) !important; }

/* ---------- 9. Кнопки ---------- */
html body .app-btn-pri {
  min-height: 54px;
  border: 0 !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-family: var(--font-apple) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  background: linear-gradient(135deg, var(--accent-a) 0%, #6a6bff 45%, var(--accent-b) 100%) !important;
  background-size: 200% 200% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -8px rgba(124,92,255,.8) !important;
  transition: transform .15s ease, box-shadow .3s ease, background-position .6s ease;
}
html body .app-btn-pri:hover {
  background-position: 100% 50% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 40px -8px rgba(63,200,255,.75) !important;
}
html body .app-btn-pri:active { transform: scale(.98); }

html body .app-btn-sec {
  min-height: 54px;
  color: #fff !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2) !important;
}
html body .app-btn-sec:hover { background: rgba(255,255,255,.14) !important; }

/* кнопки провайдеров / пункты портала (Remnawave, My Identity, MFA…) */
html body .app-login-btn-box,
html body .app-portal-btn-box {
  border-radius: 18px !important;
  overflow: hidden;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  transition: transform .2s, border-color .2s, background .2s;
}
html body .app-login-btn-box:hover,
html body .app-portal-btn-box:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(167,139,250,.55) !important;
}
html body .app-portal-btn-img,
html body .app-login-btn-box > :first-child {
  background: linear-gradient(135deg, rgba(124,92,255,.85), rgba(63,200,255,.75)) !important;
  color: #fff !important;
}
html body .app-portal-btn-txt,
html body .app-login-btn-txt { color: #f4f1ff !important; background: transparent !important; }

/* ---------- 10. Ссылки и текст ---------- */
html body a,
html body .app-lst-lnk,
html body a[class*="text-primary-"] { color: #c4b5fd !important; text-decoration: none; transition: color .2s; }
html body a:hover { color: #7dd3fc !important; }
html body [class*="text-primary-"],
html body [class*="text-secondary-"],
html body [class*="text-slate-"],
html body [class*="text-gray-"] { color: var(--brand-muted) !important; }
html body .app-container h1,
html body .app-container h2,
html body .app-container h3,
html body .app-container p,
html body .app-container li,
html body .app-container td,
html body .app-container span { color: inherit; }

/* QR-кнопка снизу */
html body #show-qrcode {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 0;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

/* ---------- 11. Мобильные ---------- */
@media (max-width: 520px) {
  html body .app-container { padding: 34px 22px 28px !important; border-radius: 24px !important; }
  html body .logo-txt { font-size: 26px !important; }
  html::after { width: 140vmin; height: 44vmin; top: 2vh; right: -60vmin; opacity: .6; }
}

/* ---------- 12. Если стекло не поддерживается — плотнее фон ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body .app-container { background: rgba(18, 12, 40, .88) !important; }
}

/* ---------- 13. Уважение к reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html::before, html::after, body::before, body::after,
  html body .app-page::before, html body .logo-box::before { animation: none !important; }
}