/* ═══════════════════════════════════════════════════════════════════════
   PIGEON · LIQUID GLASS
   Единая дизайн-система для landing / miniapp / admin2 / share_view.
   Подключается как <link rel="stylesheet" href="/static/glass.css?v=1">
   Страницы дополняют её собственными <style> — здесь только фундамент.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. ТОКЕНЫ ────────────────────────────────────────────────────────── */
:root{
  /* Подложка: почти чёрный с холодным подтоном */
  --g-bg-0:#05060a;
  --g-bg-1:#080a11;
  --g-bg-2:#0d1019;
  --g-bg-3:#141824;

  /* Текст */
  --g-ink:#f2f4f8;
  --g-ink-2:#a3accd;
  --g-ink-3:#6a7290;

  /* Акценты */
  --g-accent:#4c9aff;
  --g-accent-2:#8b7bff;
  --g-accent-soft:rgba(76,154,255,.14);
  --g-grad:linear-gradient(135deg,#4c9aff 0%,#6d8cff 45%,#8b7bff 100%);
  --g-grad-soft:linear-gradient(135deg,rgba(76,154,255,.22),rgba(139,123,255,.12));

  /* Статусы */
  --g-ok:#32d583;
  --g-warn:#fdb022;
  --g-err:#ff5c5c;
  --g-gold:#e0be6c;

  /* Стеклянные поверхности */
  --g-glass-1:rgba(255,255,255,.045);
  --g-glass-2:rgba(255,255,255,.075);
  --g-glass-3:rgba(255,255,255,.11);
  --g-hair:rgba(255,255,255,.09);
  --g-hair-2:rgba(255,255,255,.15);
  --g-blur:22px;
  --g-blur-lg:36px;

  /* Тени и свечение */
  --g-sh-1:0 1px 2px rgba(0,0,0,.35);
  --g-sh-2:0 10px 30px -10px rgba(0,0,0,.65);
  --g-sh-3:0 28px 70px -16px rgba(0,0,0,.75);
  --g-glow:0 0 44px -10px rgba(76,154,255,.5);

  /* Геометрия */
  --g-r-sm:10px;
  --g-r:14px;
  --g-r-lg:20px;
  --g-r-xl:28px;
  --g-r-pill:999px;

  /* Движение */
  --g-ease:cubic-bezier(.22,1,.36,1);
  --g-ease-in-out:cubic-bezier(.65,0,.35,1);
  --g-fast:.16s;
  --g-mid:.28s;
  --g-slow:.5s;

  /* Типографика */
  --g-font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --g-mono:ui-monospace,'SF Mono','JetBrains Mono','Fira Code',Menlo,monospace;

  /* Safe area */
  --g-safe-t:env(safe-area-inset-top,0px);
  --g-safe-b:env(safe-area-inset-bottom,0px);
}

/* ── 2. БАЗА ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

body{
  font-family:var(--g-font);
  color:var(--g-ink);
  background:var(--g-bg-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv11','tnum' 0;
}

button,input,textarea,select{font-family:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
svg{display:block}
a{color:var(--g-accent);text-decoration:none}

/* Скроллбар — тонкий, полупрозрачный */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.11);border-radius:var(--g-r-pill)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}

::selection{background:rgba(76,154,255,.32);color:#fff}

/* ── 3. АМБИЕНТНЫЙ ФОН ────────────────────────────────────────────────
   .g-amb — фиксированный слой под всем контентом: три медленно
   дрейфующих световых пятна + зерно. Даёт стеклу что преломлять. */
.g-amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--g-bg-0)}
.g-amb i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.g-amb i:nth-child(1){width:60vw;height:60vw;min-width:420px;min-height:420px;
  background:radial-gradient(circle,rgba(76,154,255,.55),transparent 68%);
  top:-22%;left:-14%;animation:g-drift-a 26s var(--g-ease-in-out) infinite alternate}
.g-amb i:nth-child(2){width:52vw;height:52vw;min-width:380px;min-height:380px;
  background:radial-gradient(circle,rgba(139,123,255,.45),transparent 68%);
  top:24%;right:-18%;animation:g-drift-b 32s var(--g-ease-in-out) infinite alternate}
.g-amb i:nth-child(3){width:46vw;height:46vw;min-width:340px;min-height:340px;
  background:radial-gradient(circle,rgba(56,214,200,.24),transparent 70%);
  bottom:-20%;left:26%;animation:g-drift-c 24s var(--g-ease-in-out) infinite alternate}

@keyframes g-drift-a{to{transform:translate3d(9vw,7vh,0) scale(1.18)}}
@keyframes g-drift-b{to{transform:translate3d(-8vw,6vh,0) scale(1.12)}}
@keyframes g-drift-c{to{transform:translate3d(6vw,-9vh,0) scale(1.22)}}

/* Зерно — убирает бандинг градиентов, добавляет «дорогую» фактуру */
.g-amb::after{
  content:'';position:absolute;inset:-50%;opacity:.16;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Виньетка — прижимает взгляд к центру */
.g-amb::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 0%,transparent 30%,rgba(5,6,10,.72) 100%);
}

/* ── 4. СТЕКЛО ────────────────────────────────────────────────────────
   .g-glass — базовая поверхность. .g-rim добавляет световую кромку
   (главный признак liquid glass: свет собирается по верхнему краю). */
.g-glass{
  position:relative;
  background:var(--g-glass-1);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(180%);
  backdrop-filter:blur(var(--g-blur)) saturate(180%);
  border-radius:var(--g-r-lg);
  box-shadow:var(--g-sh-2),inset 0 1px 0 0 rgba(255,255,255,.13);
}
.g-glass-lg{
  -webkit-backdrop-filter:blur(var(--g-blur-lg)) saturate(190%);
  backdrop-filter:blur(var(--g-blur-lg)) saturate(190%);
  box-shadow:var(--g-sh-3),inset 0 1px 0 0 rgba(255,255,255,.16);
}

/* Градиентная кромка в 1px: маска вырезает середину, остаётся рамка */
.g-rim::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.06) 32%,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.13) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:1;
}

/* Блик, скользящий по поверхности при наведении */
.g-sheen{overflow:hidden}
.g-sheen::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
  transform:skewX(-18deg);transition:left .8s var(--g-ease);pointer-events:none;z-index:2;
}
.g-sheen:hover::after{left:150%}

/* Запасной вариант там, где backdrop-filter не поддержан */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .g-glass{background:rgba(18,22,34,.92)}
}

/* ── 5. КНОПКИ ────────────────────────────────────────────────────────── */
.g-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--g-r);
  font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1;
  color:var(--g-ink);white-space:nowrap;
  transition:transform var(--g-fast) var(--g-ease),box-shadow var(--g-mid) var(--g-ease),
             background var(--g-fast) var(--g-ease),opacity var(--g-fast);
  -webkit-user-select:none;user-select:none;
}
.g-btn:active{transform:scale(.97)}
.g-btn:disabled{opacity:.45;pointer-events:none}

.g-btn--primary{
  background:var(--g-grad);color:#fff;
  box-shadow:0 6px 20px -6px rgba(76,154,255,.65),inset 0 1px 0 rgba(255,255,255,.28);
}
.g-btn--primary:hover{box-shadow:0 10px 32px -8px rgba(76,154,255,.8),inset 0 1px 0 rgba(255,255,255,.32)}

.g-btn--glass{
  background:var(--g-glass-2);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px var(--g-hair);
}
.g-btn--glass:hover{background:var(--g-glass-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px var(--g-hair-2)}

.g-btn--ghost{color:var(--g-ink-2);box-shadow:inset 0 0 0 1px var(--g-hair)}
.g-btn--ghost:hover{color:var(--g-ink);box-shadow:inset 0 0 0 1px var(--g-hair-2);background:var(--g-glass-1)}

.g-btn--danger{color:var(--g-err);box-shadow:inset 0 0 0 1px rgba(255,92,92,.28)}
.g-btn--danger:hover{background:rgba(255,92,92,.1);box-shadow:inset 0 0 0 1px rgba(255,92,92,.45)}

/* ── 6. ПОЛЯ ВВОДА ────────────────────────────────────────────────────── */
.g-field{
  width:100%;padding:12px 15px;border-radius:var(--g-r);
  background:rgba(255,255,255,.05);
  color:var(--g-ink);font-size:14.5px;outline:none;
  box-shadow:inset 0 0 0 1px var(--g-hair);
  transition:box-shadow var(--g-fast) var(--g-ease),background var(--g-fast);
}
.g-field::placeholder{color:var(--g-ink-3)}
.g-field:focus{
  background:rgba(76,154,255,.07);
  box-shadow:inset 0 0 0 1px rgba(76,154,255,.55),0 0 0 4px rgba(76,154,255,.11);
}

/* ── 7. ЧИПЫ И МЕТКИ ──────────────────────────────────────────────────── */
.g-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--g-r-pill);
  font-size:11.5px;font-weight:600;letter-spacing:.01em;line-height:1.6;
  background:var(--g-glass-2);color:var(--g-ink-2);
  box-shadow:inset 0 0 0 1px var(--g-hair);
}
.g-chip--ok{background:rgba(50,213,131,.13);color:var(--g-ok);box-shadow:inset 0 0 0 1px rgba(50,213,131,.24)}
.g-chip--err{background:rgba(255,92,92,.13);color:var(--g-err);box-shadow:inset 0 0 0 1px rgba(255,92,92,.24)}
.g-chip--warn{background:rgba(253,176,34,.13);color:var(--g-warn);box-shadow:inset 0 0 0 1px rgba(253,176,34,.24)}
.g-chip--info{background:var(--g-accent-soft);color:var(--g-accent);box-shadow:inset 0 0 0 1px rgba(76,154,255,.26)}

/* ── 8. ТИПОГРАФИКА ───────────────────────────────────────────────────── */
.g-title{font-weight:700;letter-spacing:-.028em;line-height:1.1}
.g-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:var(--g-r-pill);
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--g-accent);background:var(--g-accent-soft);
  box-shadow:inset 0 0 0 1px rgba(76,154,255,.22);
}
/* Градиентный текст — только для крупного кегля, иначе теряется контраст */
.g-grad-text{
  background:linear-gradient(135deg,#fff 0%,#cfe0ff 45%,#9db4ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── 9. ЖИВЫЕ ЭЛЕМЕНТЫ ────────────────────────────────────────────────── */
/* Пульсирующая точка «в эфире» */
.g-pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--g-ok);flex-shrink:0}
.g-pulse::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:g-ping 2s var(--g-ease-in-out) infinite;
}
@keyframes g-ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.8);opacity:0}}

/* Спиннер */
.g-spinner{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.1);border-top-color:var(--g-accent);
  animation:g-spin .7s linear infinite;
}
@keyframes g-spin{to{transform:rotate(360deg)}}

/* Скелет загрузки */
.g-skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);
  background-size:400% 100%;animation:g-shimmer 1.4s ease infinite;border-radius:var(--g-r-sm);
}
@keyframes g-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Появление снизу — для карточек и списков */
@keyframes g-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes g-fade{from{opacity:0}to{opacity:1}}
.g-rise{animation:g-rise .5s var(--g-ease) both}

/* ── 10. ДОСТУПНОСТЬ ──────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px;border-radius:4px}

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