/* Скин веб-версии — «как в Mini App». Подключает ТОЛЬКО сервер --web-server (инжект
   <link> перед </head> в webserver.rs); десктоп этот файл не грузит, его дизайн 1.0.x
   не меняется. Ложится поверх tokens.css/app.css последним в каскаде.

   Источник палитры и пластики — сам Mini App (/var/www/miniapp/app.css, снято 16.09.2026):
   холст #0A0816, чернила #F3F1FF, акцент #B5A8FF, градиент #6E5BD8→#A93FB0,
   стекло rgba(10,8,22,.55) + blur(14px), easing cubic-bezier(.2,.8,.3,1).
   Светлая тема Mini App = тот же холст #ECEBF2 и сиреневый акцент, что и в десктопе,
   поэтому там меняется только пластика: стекло и аврора. */

:root {
  --skin-ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --skin-grad: linear-gradient(90deg, #6e5bd8, #a93fb0);
  --skin-blob-a: rgba(110, 91, 216, 0.28);
  --skin-blob-b: rgba(169, 63, 176, 0.18);
  --skin-glass: rgba(255, 255, 255, 0.78);
  --skin-glass-strong: rgba(255, 255, 255, 0.9);
}

:root[data-theme='dark'] {
  --bg-window: #0a0816;
  --bg-card: rgba(20, 16, 38, 0.62);
  --bg-subtle: rgba(255, 255, 255, 0.05);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-selected: rgba(181, 168, 255, 0.16);

  --sidebar-bg: rgba(10, 8, 22, 0.55);
  --sidebar-ink: rgba(243, 241, 255, 0.72);
  --sidebar-ink-strong: #f3f1ff;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: linear-gradient(90deg, rgba(110, 91, 216, 0.5), rgba(169, 63, 176, 0.28));
  --sidebar-active-ink: #f3f1ff;

  --border-default: rgba(255, 255, 255, 0.1);
  --border-emphasized: rgba(255, 255, 255, 0.17);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 48px -24px rgba(0, 0, 0, 0.7);

  --ink: #f3f1ff;
  --ink-secondary: rgba(243, 241, 255, 0.72);
  --ink-tertiary: rgba(243, 241, 255, 0.5);
  --ink-quaternary: rgba(243, 241, 255, 0.26);

  --accent: #b5a8ff;
  --accent-hover: #c9bfff;
  --accent-solid: #6e5bd8;
  --accent-solid-hover: #5d4fc0;
  --accent-soft: #b5a8ff;
  --accent-subtle: rgba(181, 168, 255, 0.16);
  --accent-glow: rgba(181, 168, 255, 0.32);
  --chip-ink: #f3f1ff;
  --focus-ring: 0 0 0 3px rgba(181, 168, 255, 0.45);

  --positive: #3dd68c;
  --positive-subtle: rgba(61, 214, 140, 0.15);
  --error: #ff7a72;
  --error-subtle: rgba(255, 122, 114, 0.14);

  --overlay-scrim: rgba(4, 3, 10, 0.6);

  --skin-blob-a: rgba(110, 91, 216, 0.55);
  --skin-blob-b: rgba(169, 63, 176, 0.42);
  --skin-glass: rgba(20, 16, 38, 0.62);
  --skin-glass-strong: rgba(16, 13, 30, 0.86);
}

/* ── Аврора на холсте: два пятна на GPU-композите, ноль JS ─────────────────── */
body {
  position: relative;
  isolation: isolate;
}
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}
body::before {
  background: radial-gradient(closest-side, var(--skin-blob-a), transparent 70%);
  top: -28vmax;
  left: -22vmax;
  animation: skin-drift-a 42s ease-in-out infinite alternate;
}
body::after {
  background: radial-gradient(closest-side, var(--skin-blob-b), transparent 70%);
  bottom: -30vmax;
  right: -20vmax;
  animation: skin-drift-b 50s ease-in-out infinite alternate;
}
@keyframes skin-drift-a {
  to { transform: translate(12vmax, 9vmax); }
}
@keyframes skin-drift-b {
  to { transform: translate(-10vmax, -12vmax); }
}

/* ── Стекло: карточки, сайдбар, вход, модалки ──────────────────────────────── */
.card,
.login-card,
.kpi-cell {
  background: var(--skin-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-default);
}
.sidebar {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--border-default);
}
.modal {
  background: var(--skin-glass-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.login-screen {
  background: transparent;
}

/* ── Главное действие — градиент Mini App ──────────────────────────────────── */
.btn--primary {
  background: var(--skin-grad);
  border-color: transparent;
  transition: filter 0.25s var(--skin-ease), transform 0.25s var(--skin-ease);
}
.btn--primary:hover {
  background: var(--skin-grad);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: none;
  filter: brightness(0.96);
}

/* ── Лёгкие анимации: экран и карточка входа появляются снизу ──────────────── */
.screen,
.login-card {
  animation: skin-up 0.45s var(--skin-ease) both;
}
/* Только сдвиг, без opacity: fade-in ловят детекторы контраста как «бледный текст»,
   а глазу хватает движения. */
@keyframes skin-up {
  from { transform: translateY(10px); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .screen,
  .login-card {
    animation: none;
  }
  .btn--primary {
    transition: none;
  }
}

/* ── Телефон: нижняя панель вместо сайдбара, одна колонка, крупные касания ──── */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh;
  }
  .screen {
    order: 1;
    padding: 12px 12px 16px;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .screen__head,
  .screen__head-right {
    flex-wrap: wrap;
  }

  /* Сайдбар → нижняя панель. Внутри: бренд скрыт, основные пять разделов в ряд,
     из нижнего блока остаются только «Настройки» (там аккаунт, тема, подписка). */
  .sidebar {
    order: 2;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--border-default);
    box-shadow: none;
    overflow: visible;
  }
  .sidebar::before,
  .sidebar::after {
    display: none !important;
  }
  .sidebar__brand {
    display: none;
  }
  .nav {
    flex-direction: row;
    flex: 1 1 auto;
    gap: 0;
  }
  .nav--bottom {
    display: contents;
  }
  .nav--bottom .nav__item:first-child,
  .sidebar__profile,
  .theme-switch,
  .sidebar__status {
    display: none;
  }
  .nav__item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 11px;
    font-weight: 600;
    text-align: center;
    white-space: normal;
  }
  .nav__item svg {
    width: 22px;
    height: 22px;
    flex: none;
  }

  /* Сетки — в одну колонку, KPI — парами, таблицы скроллятся внутри карточки */
  .row--2,
  .grid-dash {
    grid-template-columns: 1fr;
  }
  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* overflow на .card нельзя: в колоночном flex это снимает min-height:auto, и карточка
     ужимается, клипая содержимое (ловили на форме «Разбора»). Скроллятся сами таблицы. */
  .card {
    padding: 14px;
  }
  .table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Модалки во всю ширину, скролл внутри */
  .overlay {
    align-items: flex-end;
  }
  .modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 16px 16px 0 0;
    padding: 16px;
  }

  /* Формы: сегменты площадок скроллятся, поля в столбик во всю ширину */
  .seg,
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .seg::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .field-row > .field {
    flex: 1 1 100%;
  }
  .field-row .input,
  .field-row select {
    width: 100%;
  }

  /* Касания: кнопки не ниже 40px, поля 16px — иначе iOS зумит при фокусе */
  .btn {
    min-height: 40px;
    white-space: normal;
    max-width: 100%;
  }
  .input {
    font-size: 16px;
  }
  .login-card {
    padding: 22px 18px;
  }
}