/* ============================================================
   Россия (RU) Theme — Белый / Синий / Красный
   Эмоция: триколор + луковичные купола православных храмов
   Основной цвет: #0039A9 флаг синий
   ============================================================ */

:root {
  --brand:    #0039A9;   /* флаг синий */
  --brand2:  #D52B1E;   /* флаг красный */
  --brand3:  #0B1F4D;   /* тёмно-синий купол */
  --bg:      #F4F7FF;   /* холодный голубоватый фон */
  --card:    #FFFFFF;
  --ink:     #14203B;
  --price:   #D52B1E;
}

body {
  background: var(--bg);
  font-family: 'Segoe UI', 'Roboto', 'PT Sans', Arial, sans-serif;
  color: var(--ink);
  letter-spacing: .1px;
}

/* Flag strip: белый / синий / красный триколор */
.flagstrip {
  height: 7px !important;
  background: linear-gradient(to bottom,
    #FFFFFF 0%, #FFFFFF 33.3%,
    #0039A9 33.3%, #0039A9 66.6%,
    #D52B1E 66.6%, #D52B1E 100%) !important;
  border-bottom: 1px solid #E6E6E6;
}

/* App bar — тёмно-синяя «купольная» градиентная шапка */
.appbar {
  background: linear-gradient(180deg, #0B1F4D 0%, #0039A9 70%) !important;
  border-bottom: 3px solid #D52B1E;
  box-shadow: 0 4px 16px rgba(0,57,169,.30);
}
.appbar .brand { color: #fff; }
.appbar .brand .logo {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; /* купол */
}

/* Кошелёк — синий «луковичный купол» сверху */
.wallet-card {
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #0039A9 0%, #0B1F4D 100%) !important;
  border-top-left-radius: 90px 40px;   /* куполообразный верх */
  border-top-right-radius: 90px 40px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 8px 22px rgba(11,31,77,.35);
  color: #fff;
}
.wallet-card .acts a {
  background: #fff;
  color: var(--brand);
  border-radius: 14px;
  font-weight: 700;
}
.wallet-card .acts a.ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.65);
}

/* Карточки — мягкие куполообразные верхние углы */
.card, .badge, .chips span {
  border-top-left-radius: 26px 14px;
  border-top-right-radius: 26px 14px;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.badge {
  background: var(--card);
  border-top: 3px solid #0039A9;
  box-shadow: 0 3px 12px rgba(0,57,169,.10);
}
.badge .b-t { color: var(--brand3); font-weight: 700; }

/* Чипы — синяя обводка */
.chips span {
  border: 1.5px solid #0039A9 !important;
  color: var(--brand) !important;
  background: #EAF0FF !important;
  border-radius: 22px !important;
  font-weight: 600;
}
.chips span.on, .chips span.active {
  background: linear-gradient(135deg, #0039A9, #0B1F4D) !important;
  color: #fff !important;
}

/* Статистика — сине-красный триколор-градиент */
.stats {
  background: linear-gradient(135deg, #0039A9 0%, #0B1F4D 60%, #D52B1E 130%) !important;
  border-radius: 22px;
  box-shadow: 0 5px 16px rgba(0,57,169,.3);
  color: #fff;
}

/* Кнопки — синий градиент */
.btn, button, .field input[type=submit], a.button {
  border-radius: 14px;
}
.btn-primary, .field input[type=submit] {
  background: linear-gradient(135deg, #0039A9, #0B1F4D) !important;
  border: none;
  box-shadow: 0 4px 14px rgba(0,57,169,.35);
  color: #fff;
  font-weight: 700;
}

/* Цена — красный (флаг) */
.price { color: var(--price) !important; font-weight: 700; }

/* Таб-бар */
.tabbar {
  background: #fff;
  border-top: 2px solid #0039A9;
  box-shadow: 0 -3px 12px rgba(11,31,77,.08);
}
.tabbar a.on { color: var(--brand) !important; }

/* Кружки шагов — синие */
.howto .n {
  background: linear-gradient(135deg, #0039A9, #0B1F4D) !important;
  box-shadow: 0 2px 8px rgba(0,57,169,.35);
}

/* Ссылки */
a { color: var(--brand); }

.container { padding-top: 8px; }