/* ============================================================
   mimo.VPN — Component Library
   components.css · Компоненты дизайн-системы "Liquid Ember"
   ============================================================ */

/* ------------------------------------------------------------
   1. КНОПКА ПИТАНИЯ — сердце приложения.
   Слоистая скульптура: аврора-ореол → волны → стекло → линза → иконка
   ------------------------------------------------------------ */
.pw-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 300px;
  height: 300px;
}

/* Ореол-аврора за кнопкой: то, что стекло преломляет */
.pw-halo {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(226, 122, 88, 0.42) 0%,
    rgba(212, 98, 61, 0.16) 42%,
    transparent 68%
  );
  filter: blur(28px);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-slow) var(--ease-ios),
              transform var(--dur-cinematic) var(--ease-ios);
}
.pw-halo[data-lit="true"] {
  opacity: 1;
  transform: scale(1);
}
/* Пульс ореола — дешёвая анимация opacity (compositor-friendly) */
.pw-halo-pulse {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(244, 192, 173, 0.5) 0%,
    rgba(226, 122, 88, 0.22) 44%,
    transparent 70%
  );
  filter: blur(34px);
  opacity: 0;
}
.pw-halo-pulse[data-lit="true"] {
  animation: halo-pulse var(--loop-breathe) ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.95; }
}

/* Волны-черепаха: расходятся при зажигании.
   Анимация привязана к data-lit сцены — её смена false→true
   перезапускает кейфрейм без участия JS. */
.pw-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(236, 157, 131, 0.55);
  pointer-events: none;
  opacity: 0;
}
.pw-stage[data-lit="true"] .pw-ripple {
  animation: ripple-out 1.5s var(--ease-out-soft) forwards;
  animation-delay: var(--pw-d, 0s);
}

/* Вспышка зажигания */
.pw-flash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 240, 230, 0.9) 0%,
    rgba(226, 122, 88, 0.55) 35%,
    transparent 70%
  );
  filter: blur(10px);
  opacity: 0;
}
.pw-stage[data-lit="true"] .pw-flash {
  animation: ignite-flash 0.9s var(--ease-out-soft) forwards;
}

/* Корпус кнопки — жидкое стекло */
.pw-body {
  position: relative;
  width: 192px;
  height: 192px;
  border-radius: 50%;
  border: 1px solid var(--glass-edge-hi);
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
  -webkit-backdrop-filter: blur(var(--blur-thick)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-thick)) saturate(var(--glass-saturate));
  box-shadow:
    0 30px 60px -18px rgba(0, 0, 0, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 -12px 24px rgba(0, 0, 0, 0.22);
  transition: background var(--dur-slow) var(--ease-ios),
              border-color var(--dur-slow) var(--ease-ios),
              box-shadow var(--dur-slow) var(--ease-ios);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.pw-body:active { outline: none; }

/* Заряженное стекло — терракотовая плазма внутри */
.pw-body[data-lit="true"] {
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(255, 214, 196, 0.30) 0%, rgba(212, 98, 61, 0.10) 55%),
    linear-gradient(180deg, var(--ember-glass-fill-hi), var(--ember-glass-fill-lo));
  border-color: var(--ember-glass-edge);
  box-shadow:
    var(--ember-glow-lg),
    inset 0 1.5px 0 rgba(255, 228, 214, 0.45),
    inset 0 -12px 24px rgba(120, 40, 20, 0.28);
}

/* Стекло в момент установки туннеля — тёплое предчувствие */
.pw-body[data-connecting="true"] {
  border-color: rgba(236, 157, 131, 0.35);
  box-shadow:
    0 30px 60px -18px rgba(0, 0, 0, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.35),
    0 0 32px rgba(212, 98, 61, 0.18),
    inset 0 1.5px 0 rgba(255, 235, 220, 0.3),
    inset 0 -12px 24px rgba(0, 0, 0, 0.22);
}

/* Концентрические желобки стекла — оптическая огранка линзы */
.pw-grooves {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.10),
    0 0 0 8px rgba(255, 255, 255, 0.03),
    0 0 0 9px rgba(255, 255, 255, 0.05);
}

/* Верхний спекулярный блик — блик-беглец по куполу */
.pw-specular {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(90% 62% at 50% -8%, rgba(255, 255, 255, 0.34) 0%, rgba(255,255,255,0.05) 42%, transparent 60%);
}

/* Кольцо подключения — конический градиент бегает по окружности */
.pw-spinner {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(236, 157, 131, 0.15) 60deg,
    rgba(236, 157, 131, 0.85) 150deg,
    var(--ember-300) 200deg,
    rgba(255, 240, 230, 0.95) 240deg,
    transparent 320deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: ring-spin 1.1s linear infinite;
  filter: drop-shadow(0 0 6px rgba(226, 122, 88, 0.6));
}

/* Иконка питания */
.pw-icon {
  position: relative;
  z-index: var(--z-content);
  color: var(--text-secondary);
  transition: color var(--dur-base) var(--ease-ios),
              filter var(--dur-base) var(--ease-ios),
              opacity var(--dur-base) var(--ease-ios);
}
.pw-icon[data-lit="true"] {
  color: #FFF3EC;
  filter: drop-shadow(0 0 14px rgba(226, 122, 88, 0.95))
          drop-shadow(0 0 34px rgba(212, 98, 61, 0.55));
}
.pw-icon[data-connecting="true"] {
  animation: icon-pulse 1s ease-in-out infinite;
  color: var(--ember-300);
}

/* ------------------------------------------------------------
   2. КАРТОЧКИ — стеклянные панели контента
   ------------------------------------------------------------ */
.mcard {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
}
.mcard--flat { box-shadow: none; }

/* Заголовок секции в стиле iOS */
.msection-title {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------
   3. СТРОКИ СПИСКОВ — эргономика iOS Settings
   ------------------------------------------------------------ */
.mrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  width: 100%;
  text-align: left;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-ios),
              transform var(--dur-fast) var(--ease-ios);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border: 1px solid transparent;
}
.mrow:hover  { background: rgba(255, 255, 255, 0.05); }
.mrow:active {
  background: rgba(255, 255, 255, 0.035);
  transform: scale(0.985);
}
.mrow[data-selected="true"] {
  background: linear-gradient(180deg, rgba(226,122,88,0.16), rgba(184,78,48,0.07));
  border-color: rgba(236, 157, 131, 0.25);
}
.mrow-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ember-300);
}

/* ------------------------------------------------------------
   4. ПЕРЕКЛЮЧАТЕЛЬ — жидкостеклянный тумблер
   ------------------------------------------------------------ */
.mtoggle {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background var(--dur-base) var(--ease-ios),
              border-color var(--dur-base) var(--ease-ios),
              box-shadow var(--dur-base) var(--ease-ios);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mtoggle[data-on="true"] {
  background: linear-gradient(180deg, var(--ember-400), var(--ember-600));
  border-color: rgba(236, 157, 131, 0.45);
  box-shadow:
    0 0 16px rgba(212, 98, 61, 0.45),
    inset 0 1px 1px rgba(255, 235, 220, 0.5);
}
.mtoggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #EDE4DE);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 -1px 2px rgba(0,0,0,0.06);
  transition: transform var(--dur-base) var(--ease-spring);
}
.mtoggle[data-on="true"] .mtoggle-knob { transform: translateX(20px); }

/* ------------------------------------------------------------
   5. ТАБ-БАР — парящая навигация из жидкого стекла
   ------------------------------------------------------------ */
.mtabbar {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: stretch;
  padding: var(--space-2);
  gap: var(--space-1);
  z-index: var(--z-tabbar);
}
.mtab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  transition: color var(--dur-base) var(--ease-ios);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: none;
  background: transparent;
}
.mtab[data-active="true"] { color: var(--ember-300); }
.mtab-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Стеклянная пилюля активной вкладки — перетекает между вкладками */
.tab-pill {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(226, 122, 88, 0.20), rgba(184, 78, 48, 0.08));
  border: 1px solid rgba(236, 157, 131, 0.28);
  box-shadow:
    0 0 20px rgba(212, 98, 61, 0.25),
    inset 0 1px 0 rgba(255, 220, 205, 0.25);
}

/* ------------------------------------------------------------
   6. ЧИПЫ И БЕЙДЖИ
   ------------------------------------------------------------ */
.mchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: all var(--dur-base) var(--ease-ios);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mchip:hover { background: rgba(255, 255, 255, 0.10); }
.mchip[data-active="true"] {
  color: var(--text-on-ember);
  background: linear-gradient(180deg, var(--ember-400), var(--ember-600));
  border-color: rgba(236, 157, 131, 0.4);
  box-shadow: var(--ember-glow-sm);
}
.mbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ember-200);
  background: rgba(226, 122, 88, 0.12);
  border: 1px solid rgba(226, 122, 88, 0.22);
}

/* Статусная точка */
.mdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-glow 2.2s ease-in-out infinite;
}

/* ------------------------------------------------------------
   7. ПОЛЯ ВВОДА — стеклянная поисковая строка
   ------------------------------------------------------------ */
.msearch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
  color: var(--text-tertiary);
  transition: border-color var(--dur-base) var(--ease-ios);
}
.msearch:focus-within { border-color: rgba(226, 122, 88, 0.4); }
.msearch input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--fs-subheadline);
  font-family: inherit;
}
.msearch input::placeholder { color: var(--text-tertiary); }

/* ------------------------------------------------------------
   8. ЦИФРОВАЯ ТИПОГРАФИКА СТАТИСТИКИ
   ------------------------------------------------------------ */
.mstat-value {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.mmono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Скелет под контент */
.mskel {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 70%
  );
  background-size: 200% 100%;
  animation: sheen-sweep 2.4s linear infinite;
}

/* ---------------------------------------------------------------
   9. УТИЛИТЫ
   --------------------------------------------------------------- */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Текст с мягким свечением для hero-статуса */
.text-glow-ember {
  text-shadow:
    0 0 18px rgba(226, 122, 88, 0.45),
    0 0 60px rgba(212, 98, 61, 0.25);
}

/* ------------------------------------------------------------
   10. АВТОРИЗАЦИЯ — вход по подписке (email / Telegram)
   ------------------------------------------------------------ */

/* Стеклянное поле ввода — тёмная лунка в стекле */
.minput {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: border-color var(--dur-base) var(--ease-ios),
              box-shadow var(--dur-base) var(--ease-ios);
  color: var(--text-tertiary);
}
.minput:focus-within {
  border-color: rgba(226, 122, 88, 0.5);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(226, 122, 88, 0.12);
}
.minput input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 16px;
  font-family: inherit;
  letter-spacing: var(--tracking-body);
}
.minput input::placeholder { color: var(--text-quaternary); }

/* Главная кнопка действия — раскалённая терракота */
.mcta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 52px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-on-ember);
  background: linear-gradient(180deg, var(--ember-400), var(--ember-600));
  border: 1px solid rgba(236, 157, 131, 0.5);
  box-shadow:
    0 8px 24px -6px rgba(212, 98, 61, 0.55),
    inset 0 1px 0 rgba(255, 235, 220, 0.55),
    inset 0 -2px 6px rgba(120, 40, 20, 0.35);
  transition: transform var(--dur-fast) var(--ease-ios),
              filter var(--dur-base) var(--ease-ios),
              box-shadow var(--dur-base) var(--ease-ios);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mcta:hover { filter: brightness(1.06); }
.mcta:active { transform: scale(0.97); }
.mcta:disabled { opacity: 0.7; cursor: default; }

/* Кнопка-секундарь: погасшая, ждёт ответа API */
.mcta--quiet {
  filter: saturate(0.6) brightness(0.9);
  box-shadow: 0 4px 14px -6px rgba(212, 98, 61, 0.3),
              inset 0 1px 0 rgba(255, 235, 220, 0.3);
}

/* Сегмент-контрол — стеклянные вкладки в лунке */
.mseg {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.mseg-item {
  position: relative;
  flex: 1;
  height: 40px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  transition: color var(--dur-base) var(--ease-ios);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mseg-item[data-active="true"] { color: var(--text-primary); }
.seg-pill {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* Знак бренда — стеклянный кубик с углём внутри */
.mlogo {
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--ember-400), var(--ember-600));
  border: 1px solid rgba(236, 157, 131, 0.55);
  box-shadow:
    0 0 32px rgba(212, 98, 61, 0.45),
    0 8px 24px -8px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 235, 220, 0.6),
    inset 0 -3px 8px rgba(120, 40, 20, 0.4);
  color: var(--text-on-ember);
}