@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* === ШРИФТ === */
body, .m2-body {
  font-family: 'Manrope', Inter, sans-serif !important;
}

/* === КАРТОЧКИ (основной класс) === */
.m2-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(100, 110, 255, 0.15) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
}

.m2-card:hover {
  border-color: rgba(100, 110, 255, 0.32) !important;
}

/* === HERO КАРТОЧКА === */
.m2-hero-card {
  background: linear-gradient(135deg, rgba(50, 60, 200, 0.22) 0%, rgba(15, 20, 70, 0.28) 100%) !important;
  border-color: rgba(100, 110, 255, 0.3) !important;
}

/* === МЕТРИКИ (баланс, подписки, платежи) === */
.m2-metric-card {
  background: rgba(91, 94, 255, 0.07) !important;
  border-color: rgba(91, 94, 255, 0.18) !important;
}

.m2-metric {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #f0f0ff !important;
}

.m2-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7878a0 !important;
}

/* === ТАРИФНЫЕ КАРТОЧКИ === */
.m2-tariff-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(100, 110, 255, 0.14) !important;
  border-radius: 16px !important;
  transition: all 0.2s ease !important;
}

.m2-tariff-item:hover {
  border-color: rgba(100, 110, 255, 0.38) !important;
  transform: translateY(-2px) !important;
}

/* === ЧИП / БЕЙДЖ (BASIC) === */
.m2-chip {
  background: rgba(91, 94, 255, 0.15) !important;
  color: #9090ff !important;
  border: 1px solid rgba(91, 94, 255, 0.28) !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

/* === KPI PILL ("Личный кабинет") === */
.m2-kpi-pill {
  background: rgba(91, 94, 255, 0.15) !important;
  color: #9090ff !important;
  border: 1px solid rgba(91, 94, 255, 0.25) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
}

/* === ОСНОВНАЯ КНОПКА === */
.m2-btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-family: 'Manrope', sans-serif !important;
  transition: all 0.18s ease !important;
}

.m2-btn:not(.m2-btn-ghost) {
  background: #5b5eff !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(91, 94, 255, 0.35) !important;
}

.m2-btn:not(.m2-btn-ghost):hover {
  background: #7070ff !important;
  box-shadow: 0 0 30px rgba(91, 94, 255, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* === GHOST КНОПКА === */
.m2-btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(150, 150, 255, 0.3) !important;
  color: #c0c0ff !important;
}

.m2-btn-ghost:hover {
  border-color: rgba(150, 150, 255, 0.6) !important;
  background: rgba(91, 94, 255, 0.08) !important;
  color: #fff !important;
}

/* === ЗАГОЛОВКИ === */
h1, h2, h3 {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #f0f0ff !important;
}

/* === MUTED ТЕКСТ === */
.m2-muted {
  color: #7878a0 !important;
}

/* === QUICK PANEL (правая карточка дашборда) === */
.m2-quick-panel {
  background: rgba(255, 255, 255, 0.04) !important;
}

.m2-props p {
  border-bottom: 1px solid rgba(100, 110, 255, 0.1) !important;
  padding-bottom: 10px !important;
}

/* === ИНПУТЫ === */
.m2-input, input, select, textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(100, 110, 255, 0.2) !important;
  border-radius: 10px !important;
  color: #f0f0ff !important;
  font-family: 'Manrope', sans-serif !important;
  transition: border-color 0.18s !important;
}

.m2-input:focus, input:focus, select:focus, textarea:focus {
  border-color: #5b5eff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(91, 94, 255, 0.15) !important;
}

/* === STEPS LIST === */
.m2-list-steps li {
  color: #c0c0e0 !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(100, 110, 255, 0.1) !important;
  font-size: 15px !important;
}

/* === УВЕДОМЛЕНИЯ === */
.m2-notice {
  border-radius: 12px !important;
  border: 1px solid rgba(100, 110, 255, 0.2) !important;
  background: rgba(91, 94, 255, 0.08) !important;
}

/* === СКРОЛЛБАР === */
::-webkit-scrollbar { width: 5px; background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(91,94,255,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(91,94,255,0.55); }