/* Gift Tool — оформление «Воздух» (демо, включается в настройках).
 *
 * Ориентир — дизайн-система Air: ночное небо с облаками, стеклянные
 * поверхности, тонкие волосяные границы, никакой тяжёлой тени, малые
 * радиусы (карточки 12, кнопки 8, поля 4), один шрифт средней насыщенности,
 * синий #2b7fff только для акцентов и ссылок, но не для заливок кнопок.
 *
 * Всё живёт под .theme-air, поэтому основное оформление не меняется ни на
 * байт: снял галочку — вернулся прежний вид.
 *
 * Про слабые устройства: размытие фона (backdrop-filter) стоит дорого,
 * каждый такой слой видеокарта считает отдельно. Поэтому оно здесь только
 * там, где стекло действительно читается — нижнее меню, шторки, шапка
 * рулетки. Всё остальное «стекло» набрано полупрозрачной заливкой и
 * светлой каймой, это бесплатно. Облака — три растянутых радиальных
 * пятна без единого фильтра, они просто медленно плывут по композитору.
 */

/* ── небо ──────────────────────────────────────────────────────── */
.sky{display:none}

.theme-air .sky{
  display:block;position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(255,206,158,.14) 0%, rgba(255,206,158,0) 70%),
    radial-gradient(120% 80% at 50% -12%, #24406e 0%, rgba(36,64,110,0) 62%),
    linear-gradient(180deg, #08111f 0%, #0a1526 44%, #0c1728 100%);
}
/* облака: мягкие пятна без фильтров, поэтому даром достаются видеокарте */
.theme-air .sky i{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(206,224,248,.24), rgba(206,224,248,.09) 52%, rgba(206,224,248,0) 100%);
  will-change:transform;
}
.theme-air .sky i:nth-child(1){
  left:-30%;top:2%;width:150%;height:42%;
  animation:skyDrift 96s ease-in-out infinite alternate;
}
.theme-air .sky i:nth-child(2){
  left:-10%;top:34%;width:120%;height:38%;opacity:.7;
  animation:skyDrift 132s ease-in-out infinite alternate-reverse;
}
.theme-air .sky i:nth-child(3){
  left:-40%;bottom:-8%;width:170%;height:44%;opacity:.7;
  background:radial-gradient(closest-side,
    rgba(120,150,196,.42), rgba(120,150,196,.12) 58%, rgba(120,150,196,0) 100%);
  animation:skyDrift 156s ease-in-out infinite alternate;
}
@keyframes skyDrift{
  from{transform:translate3d(-3%,0,0)}
  to{transform:translate3d(3%,-2%,0)}
}
@media (prefers-reduced-motion:reduce){
  .theme-air .sky i{animation:none}
}

/* ── токены ────────────────────────────────────────────────────── */
body.theme-air{
  --bg:#070b14;
  --panel:rgba(255,255,255,.055);          /* стекло поверх неба */
  --panel-2:rgba(255,255,255,.085);
  --panel-3:rgba(255,255,255,.12);
  --stroke:rgba(255,255,255,.16);          /* волосяная кайма */
  --accent:#2b7fff;                        /* Signal Blue — только акцент */
  --accent-soft:rgba(43,127,255,.16);
  --danger:#ff6b6b;
  --text:#fff;
  --muted:rgba(226,235,247,.62);
  --r-lg:12px;                             /* карточки */
  --r-md:8px;                              /* кнопки */
  --r-sm:4px;                              /* поля ввода */
  --glass:rgba(255,255,255,.07);
  --glass-2:rgba(255,255,255,.12);
  --hair:rgba(255,255,255,.18);
  --edge:inset 0 1px 0 rgba(255,255,255,.22);
  background:transparent;
  font-weight:500;                         /* один вес на весь интерфейс */
  letter-spacing:0;
}

/* на широком экране колонка получает свою подложку — в этой теме она
   лишняя, небо должно просвечивать насквозь */
@media (min-width:520px){
  body.theme-air{background:transparent}
  .theme-air .app{
    background:rgba(255,255,255,.03);
    box-shadow:0 0 0 1px var(--hair);
  }
}

/* заголовки спокойные: вес 500, без плотной посадки букв */
.theme-air .brand-name,
.theme-air .page-title,
.theme-air .prof-h1,
.theme-air .sheet-title{font-weight:500;letter-spacing:0}
.theme-air .prof-h1{font-size:32px;line-height:1.1}
.theme-air .row-label,
.theme-air .match-name,
.theme-air .big-btn-title{font-weight:500}

/* ── поверхности ───────────────────────────────────────────────── */
/* общее правило стекла: полупрозрачная заливка, кайма в волос, блик
   сверху вместо тени — «минимальная высота» из Air */
.theme-air .tool,
.theme-air .icon-btn,
.theme-air .row-card,
.theme-air .rows,
.theme-air .cell,
.theme-air .slot-cell,
.theme-air .prof-card,
.theme-air .t-tabs,
.theme-air .pick,
.theme-air .match-prev{
  background:var(--glass);
  border:1px solid var(--hair);
  box-shadow:var(--edge);
}
.theme-air .cell,
.theme-air .slot-cell,
.theme-air .match-prev{border-radius:11px}       /* радиус картинок из Air */
.theme-air .row-card,
.theme-air .rows,
.theme-air .prof-card{border-radius:12px}
.theme-air .tool,
.theme-air .icon-btn{border-radius:8px}

.theme-air .cell.is-empty,
.theme-air .cell:not(:has(.gift)){background:rgba(255,255,255,.045)}

/* кнопки — только призрачные или светлая заливка, без цветных плашек */
.theme-air .ok-btn,
.theme-air .spin-btn{
  background:transparent;
  border:1px solid var(--hair);
  color:#fff;
  box-shadow:none;
  border-radius:8px;
  font-weight:500;
}
.theme-air .ok-btn:active,
.theme-air .spin-btn:active{background:rgba(255,255,255,.1)}
.theme-air .spin-btn{padding:14px}
.theme-air .icon-btn.danger{color:var(--danger)}
.theme-air .rowbtn{
  background:rgba(255,255,255,.05);
  border:1px solid var(--hair);
  border-radius:8px;
  box-shadow:none;
}

/* ссылки и подписи — единственное место для синего */
.theme-air .credit a{color:var(--accent)}
.theme-air .tab.is-on{color:#fff}
.theme-air .tab.is-on::after{background:var(--accent)}

/* ── нижнее меню и шторки: настоящее стекло ────────────────────── */
.theme-air .tabbar{
  background:rgba(12,18,30,.5);
  border:1px solid var(--hair);
  box-shadow:none;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.theme-air .tab-pill{
  background:rgba(255,255,255,.14);
  box-shadow:var(--edge);
}
.theme-air .overlay{background:rgba(6,10,18,.55)}
.theme-air .sheet{
  background:rgba(14,20,33,.82);
  border:1px solid var(--hair);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
}
.theme-air .grabber{background:rgba(255,255,255,.3)}
.theme-air .ctx{
  background:rgba(14,20,33,.88);
  border:1px solid var(--hair);
  border-radius:12px;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.theme-air .toast{
  background:rgba(14,20,33,.9);
  border:1px solid var(--hair);
  border-radius:8px;
}

/* поля ввода и списки в шторках */
.theme-air .search,
.theme-air .link-input{
  background:rgba(255,255,255,.06);
  border:1px solid var(--hair);
  border-radius:4px;
}
.theme-air .opt{border-radius:8px;background:rgba(255,255,255,.05)}
.theme-air .opt.is-on{border-color:var(--accent);background:var(--accent-soft)}
.theme-air .pick-row.is-on{background:var(--accent-soft)}
.theme-air .inst-row{
  background:rgba(255,255,255,.05);
  border:1px solid var(--hair);
  border-radius:8px;
}

/* ── переключатель и вкладки ───────────────────────────────────── */
.theme-air .t-toggle{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px var(--hair)}
.theme-air .t-toggle[data-on="true"]{background:var(--accent)}
.theme-air .t-tabs-pill{background:rgba(255,255,255,.14);box-shadow:var(--edge)}

/* ── карточки списков ──────────────────────────────────────────── */
.theme-air .match-count{
  background:rgba(8,12,20,.6);
  border:1px solid rgba(255,255,255,.24);
}
.theme-air .match-note{
  background:rgba(255,255,255,.05);
  border:1px solid var(--hair);
  border-radius:8px;
}
.theme-air .row-ico{border-radius:8px}
.theme-air .skel,
.theme-air .skel-line{
  background:linear-gradient(100deg,
    rgba(255,255,255,.04) 32%, rgba(255,255,255,.11) 46%, rgba(255,255,255,.04) 60%)
    0 0/300% 100%;
}

/* ── рулетка ───────────────────────────────────────────────────── */
.theme-air .slot-dim{background:rgba(6,10,18,.7)}
.theme-air .slot-veil-top{
  background:linear-gradient(180deg,rgba(7,11,20,.85),rgba(7,11,20,.08));
}
.theme-air .slot-veil-bottom{
  background:linear-gradient(0deg,rgba(7,11,20,.85),rgba(7,11,20,.08));
}
.theme-air .slot-item{border-radius:11px}

/* ── профиль и загрузочный экран ───────────────────────────────── */
.theme-air .prof-avatar{
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
}
.theme-air #splash{background:transparent}
.theme-air .splash-mark{
  background:rgba(255,255,255,.1);
  border:1px solid var(--hair);
  box-shadow:none;
  border-radius:12px;
}
.theme-air .brand-mark{
  background:rgba(255,255,255,.1);
  border:1px solid var(--hair);
  box-shadow:none;
  border-radius:8px;
}
.theme-air .loadbar{background:rgba(255,255,255,.12)}
.theme-air .loadbar-fill{background:var(--accent)}