/* ======================================================
   REDRU OVERRIDES v2
   Подключать ПОСЛЕ основного файла
====================================================== */

:root{
  /* можно менять акцент тут — и весь v2 перекрасится */
  --v2-bg: var(--bg, #0e1627);
  --v2-bg-soft: var(--bg-soft, #111c33);
  --v2-card: rgba(255,255,255,.04);
  --v2-card2: rgba(255,255,255,.06);
  --v2-border: rgba(255,255,255,.10);
  --v2-border2: rgba(255,255,255,.14);
  --v2-text: var(--text, #f1f5f9);
  --v2-muted: rgba(241,245,249,.72);
  --v2-muted2: rgba(241,245,249,.55);

  --v2-accent: var(--accent, #4f7cff);
  --v2-accent-soft: rgba(79,124,255,.18);

  --v2-success: var(--success, #22c55e);
  --v2-warn: #facc15;
  --v2-danger: var(--danger, #ef4444);

  --v2-radius: 18px;
  --v2-radius-sm: 14px;
  --v2-shadow: 0 16px 50px rgba(0,0,0,.35);
}

/* ======================================================
   GLOBAL POLISH
====================================================== */

body{
  background: radial-gradient(ellipse at top, #0f172a, #020617) !important;
}

.container{ max-width: 1200px; }

/* ссылки */
a:hover{ opacity: .95; }

/* ======================================================
   BUTTONS (унификация)
====================================================== */

.btn{
  border-radius: var(--v2-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.btn:active{ transform: translateY(1px); }

.btn.secondary{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--v2-border2) !important;
  color: var(--v2-text) !important;
}

.btn.danger{
  background: rgba(239,68,68,.20) !important;
  border: 1px solid rgba(239,68,68,.28) !important;
  color: #ffb4b4 !important;
}

/* ======================================================
   INPUTS / SELECT (главная боль со скрина)
====================================================== */

input, select, textarea{
  color-scheme: dark; /* помогает сделать системные элементы темнее */
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select, input{
  height: 44px;
  border-radius: var(--v2-radius-sm) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--v2-border2) !important;
  color: var(--v2-text) !important;
  outline: none;
}

input::placeholder{ color: var(--v2-muted2) !important; }

input:focus, select:focus, textarea:focus{
  border-color: rgba(79,124,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(79,124,255,.18) !important;
}

/* dropdown options (не везде работает, но лучше, чем белое) */
select option{
  background: #0b1224;
  color: #e5e7eb;
}

/* ======================================================
   TOOLBAR v2 (поиск + фильтр)
   Используй классы: .toolbar, .toolbar-left, .toolbar-field
====================================================== */

.toolbar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 18px;
}

.toolbar-left{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.toolbar-field{
  position: relative;
  min-width: 280px;
}

.toolbar-field input{
  width: 100%;
  padding-left: 42px !important;
}

.toolbar-field:before{
  content: "🔎";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
  pointer-events: none;
}

/* select чуть шире и аккуратнее */
.toolbar select{
  min-width: 220px;
}

/* ======================================================
   CARDS v2 (подписки/тарифы/кабинет)
====================================================== */

.card{
  border-radius: var(--v2-radius) !important;
  border: 1px solid var(--v2-border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)) !important;
  box-shadow: var(--v2-shadow) !important;
}

.card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* заголовок карточки */
.card-top h3,
.sub-title,
.service-title{
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* ======================================================
   BADGES (статусы)
====================================================== */

.badge{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 800 !important;
  border: 1px solid var(--v2-border2);
  background: rgba(255,255,255,.06) !important;
}

.badge.ok{
  color: #2ee58c !important;
  border-color: rgba(34,197,94,.26) !important;
  background: rgba(34,197,94,.12) !important;
}

.badge.warn{
  color: #ffd166 !important;
  border-color: rgba(250,204,21,.26) !important;
  background: rgba(250,204,21,.12) !important;
}

.badge.danger{
  color: #ff9a9a !important;
  border-color: rgba(239,68,68,.26) !important;
  background: rgba(239,68,68,.12) !important;
}

/* ======================================================
   PROGRESS
====================================================== */
.progress{
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
}

.progress-bar.ok{ background: var(--v2-success) !important; }
.progress-bar.warn{ background: var(--v2-warn) !important; }
.progress-bar.danger{ background: var(--v2-danger) !important; }

/* ======================================================
   SUB LINK FIELD (input + copy)
====================================================== */

.sub-input-wrap{
  gap: 10px !important;
}

.sub-input,
input[readonly]{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid var(--v2-border2) !important;
}

.copy-btn{
  height: 44px;
  min-width: 44px;
  border-radius: var(--v2-radius-sm) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--v2-border2) !important;
  color: var(--v2-text) !important;
  transition: .2s ease;
}

.copy-btn:hover{
  background: rgba(255,255,255,.10) !important;
}

/* ======================================================
   MODAL polish
====================================================== */

.modal .box{
  border: 1px solid var(--v2-border2) !important;
  background: radial-gradient(900px 300px at 20% 0%, rgba(79,124,255,.20), transparent 60%),
              rgba(10, 14, 28, .92) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.65);
}

/* ======================================================
   TABLE polish
====================================================== */
.table th, .table td{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.table tbody tr:hover{
  background: rgba(255,255,255,.03) !important;
}

/* ======================================================
   MOBILE tune
====================================================== */
@media (max-width: 768px){
  .toolbar-field{ min-width: 100%; }
  .toolbar select{ width: 100%; }
}