:root{
  --bg: #070A12;
  --bg2:#0B1020;
  --card:#0F172A;
  --card2:#111C33;
  --stroke: rgba(148,163,184,.18);

  --text:#F8FAFC;
  --muted:#94A3B8;

  --blue:#3B82F6;
  --blue2:#60A5FA;
  --cyan:#22D3EE;

  --green:#22C55E;
  --red:#EF4444;
}

html,body{height:100%;}
body{
  background:
    radial-gradient(circle at 22% 10%, rgba(59,130,246,.35), transparent 55%),
    radial-gradient(circle at 78% 18%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(59,130,246,.10), transparent 60%),
    var(--bg);
  color:var(--text);
}

/* Bootstrap helpers */
.text-muted{ color: var(--muted) !important; }

/* Navbar */
.navbar{
  background: rgba(7,10,18,.7) !important;
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
}
.navbar-brand{
  color: var(--text) !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .9rem;
}
.brand-dot{
  display:inline-block;
  width:.5rem;height:.5rem;border-radius:999px;
  background: linear-gradient(135deg,var(--blue),var(--cyan));
  margin-left:.4rem;
  box-shadow: 0 0 18px rgba(59,130,246,.55);
}
.nav-link{ color: rgba(226,232,240,.75) !important; }
.nav-link:hover,.nav-link.active{ color: var(--text) !important; }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,16,32,.92));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(2,6,23,.55);
  backdrop-filter: blur(18px);
}
.card.soft{
  background: linear-gradient(180deg, rgba(17,28,51,.92), rgba(11,16,32,.92));
}
.card .card-header{
  background: transparent;
  border-bottom: 1px solid rgba(148,163,184,.16);
}

/* Buttons */
.btn-primary{
  border: none;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow: 0 0 26px rgba(59,130,246,.45);
  border-radius: 999px;
}
.btn-primary:hover{
  background: linear-gradient(135deg, #2563EB, #38BDF8);
  box-shadow: 0 0 34px rgba(56,189,248,.55);
}
.btn-outline-primary{
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,.55);
  color: rgba(226,232,240,.9);
  background: rgba(2,6,23,.25);
}
.btn-outline-primary:hover{
  background: rgba(59,130,246,.14);
  border-color: rgba(34,211,238,.75);
  color: var(--text);
}

/* Forms */
.form-control,.form-select{
  background: rgba(2,6,23,.35);
  border: 1px solid rgba(148,163,184,.28);
  color: var(--text);
  border-radius: 16px;
  padding: .85rem 1rem;
}
.form-control:focus,.form-select:focus{
  background: rgba(2,6,23,.45);
  border-color: rgba(96,165,250,.8);
  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
  color: var(--text);
}
.form-text{ color: rgba(148,163,184,.85); }

/* Hero */
.hero-section{ padding: 2.5rem 0 2rem; }
.hero-card{
  position: relative; overflow:hidden;
}
.hero-card:before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 20% 15%, rgba(59,130,246,.45), transparent 55%),
    radial-gradient(circle at 70% 35%, rgba(34,211,238,.20), transparent 60%);
  opacity:.55; z-index:0;
}
.hero-card .card-body{ position:relative; z-index:1; }
.hero-title{
  font-size: clamp(2.0rem, 3.2vw, 3.2rem);
  line-height: 1.05;
}
.hero-title .accent{
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(59,130,246,.30);
}
.hero-sub{
  color: rgba(226,232,240,.72) !important;
  font-size: 1.05rem;
}

/* Stat cards */
.stat-label{
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  color: rgba(148,163,184,.92);
}
.stat-value{
  font-weight: 800;
}

/* Signals mode toggle */
.signal-mode-toggle{
  display:inline-flex;
  gap:.35rem;
  padding:.35rem;
  border-radius: 999px;
  background: rgba(2,6,23,.35);
  border: 1px solid rgba(148,163,184,.28);
}
.signal-mode-btn{
  border-radius: 999px !important;
  border:none;
  background: transparent;
  color: rgba(226,232,240,.78);
  padding: .55rem 1.05rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}
.signal-mode-btn .title{
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.signal-mode-btn .subtitle{
  font-size:.70rem;
  opacity:.85;
}
.signal-mode-btn.active{
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: var(--text);
  box-shadow: 0 0 18px rgba(59,130,246,.5);
}

/* Signal card (white inside like you liked) */
.signal-card-main{
  border-radius: 22px;
  background: #F8FAFC;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
  color: #0F172A;
}
.signal-card-buy{ border-left: 4px solid var(--green); }
.signal-card-sell{ border-left: 4px solid var(--red); }

.signal-direction-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
}
.signal-direction-chip .dot{
  width:.5rem;height:.5rem;border-radius:999px;
}
.signal-direction-chip.buy{
  background:#DCFCE7; color:#166534; border:1px solid rgba(34,197,94,.35);
}
.signal-direction-chip.buy .dot{ background:#16A34A; }
.signal-direction-chip.sell{
  background:#FEE2E2; color:#991B1B; border:1px solid rgba(239,68,68,.35);
}
.signal-direction-chip.sell .dot{ background:#EF4444; }

.signal-text-buy{ color:#16A34A; font-weight:800; }
.signal-text-sell{ color:#EF4444; font-weight:800; }

.signal-metric-pill{
  border-radius: 999px;
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(15,23,42,.10);
  padding: .55rem .9rem;
}
.signal-metric-label{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .7rem;
  color: rgba(15,23,42,.65);
}
.signal-metric-value{
  font-weight: 700;
}

.signal-strength-bar{
  height:.35rem;border-radius:999px;
  background: rgba(15,23,42,.12);
  overflow:hidden;
}
.signal-strength-bar-fill{
  height:100%;
  background: linear-gradient(90deg, #22c55e, #eab308, #f97316, #ef4444);
}

.signal-copy-icon-btn{
  border-radius:999px;
  border:1px solid transparent;
  background: transparent;
  color: rgba(15,23,42,.45);
  padding:.18rem .45rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: all .15s ease;
}
.signal-copy-icon-btn:hover{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.25);
  color: rgba(29,78,216,.9);
}
.signal-copy-icon-btn.copied{
  background: rgba(34,197,94,.15);
  border-color: rgba(34,197,94,.35);
  color: #166534;
}

/* Auth tabs */
.auth-tabs{
  border-bottom: 1px solid rgba(148,163,184,.28);
}
.auth-tabs .nav-link{
  border: none !important;
  background: transparent !important;
  color: rgba(226,232,240,.78) !important;
  font-weight: 600;
  padding: .85rem 1.25rem;
}
.auth-tabs .nav-link.active{
  background: #ffffff !important;
  color: #111827 !important;
  border-radius: 16px 16px 0 0;
}


/* ================================
   FIX CONTRAST: читаемый текст везде
   Вставить В КОНЕЦ styles.css
================================ */

/* База */
body {
  color: #F8FAFC !important;
}

/* Заголовки по умолчанию светлые */
h1, h2, h3, h4, h5, h6 {
  color: #F8FAFC;
}

/* Любые тексты внутри темных карточек/блоков */
.card,
.card .card-body,
.hero-section,
.navbar,
footer {
  color: rgba(248,250,252,.92) !important;
}

/* На темных карточках — заголовки всегда белые */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: #F8FAFC !important;
}

/* Подписи/параграфы читаемые */
.card p,
.hero-section p {
  color: rgba(226,232,240,.78) !important;
}

/* text-muted делаем ярче (не серый на сером) */
.text-muted {
  color: rgba(203,213,225,.72) !important;
}

/* Статистика (цифры и лейблы) */
.stat-label { color: rgba(148,163,184,.9) !important; }
.stat-value { color: #F8FAFC !important; }

/* Синий градиент-текст в hero остаётся акцентом */
.hero-title .accent {
  color: transparent !important;
}

/* ---- Исключение: белая карточка сигнала (там нужен тёмный текст) ---- */
.signal-card-main,
.signal-card-main * {
  color: #0F172A !important;
}
.signal-card-main .text-muted {
  color: rgba(15,23,42,.65) !important;
}





/* изменение от 28/12/25 */
/* new name */
.navbar-brand {
  font-size: 1.25rem;
  color: #f8fafc !important;
  letter-spacing: 0.5px;
}

.brand-up {
  color: var(--accent-up);
  text-shadow: 0 0 12px rgba(34,197,94,0.45);
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
}

.hero-sub {
  display: block;
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}


/* Footer */
footer{
  border-top: 1px solid var(--stroke);
  background: rgba(7,10,18,.6);
}



/* =========================================================
   MOBILE / RESPONSIVE PATCH (вставить в конец style.css)
   ========================================================= */

/* 1) Защита от переполнения (когда элементы "разъезжаются") */
html, body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
* { word-break: break-word; }
.card, .hero-card { overflow: hidden; }

/* 2) Нормальная ширина контейнера на мобиле */
.container, .container-fluid {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* 3) Умный размер заголовка (у тебя ниже есть .hero-title = 3rem, это иногда распирает) */
.hero-title {
  font-size: clamp(1.75rem, 6vw, 3rem);
  line-height: 1.12;
}

/* 4) Умный размер подзаголовка (у тебя hero-sub = 1.25rem, на мобиле жирно) */
.hero-sub {
  font-size: clamp(.98rem, 3.8vw, 1.25rem);
  line-height: 1.35;
}

/* -----------------------------
   Планшет и ниже (<= 992px)
------------------------------ */
@media (max-width: 992px){
  .hero-section { padding: 1.6rem 0 1.2rem; }
  .navbar-brand { font-size: 1.05rem; }
  .card { border-radius: 18px; }
  .form-control, .form-select { padding: .75rem .9rem; }
}

/* -----------------------------
   Телефон (<= 576px)
------------------------------ */
@media (max-width: 576px){

  /* Ритм и отступы */
  .hero-section { padding: 1.2rem 0 1rem; }
  .row { --bs-gutter-x: 0.9rem; --bs-gutter-y: 0.9rem; }

  /* Карточки: меньше padding, чтобы не выглядело "растянуто" */
  .hero-card .card-body { padding: 18px !important; }
  .card .card-body { padding: 16px !important; }

  /* Кнопки: на всю ширину + нормальная высота на мобиле */
  .btn.btn-lg {
    width: 100%;
    padding: .85rem 1rem;
    font-size: 1rem;
  }

  /* Если есть блоки с d-flex и gap у кнопок — пусть складываются */
  .d-flex.flex-wrap.gap-3 { flex-direction: column !important; }

  /* Статы: цифры меньше, чтобы не давили */
  .display-6 { font-size: 1.6rem !important; }
  .h3 { font-size: 1.35rem !important; }

  /* Стат-карточки: не высокие */
  .stat-label { font-size: .70rem; letter-spacing: .12em; }
  .stat-value { line-height: 1.1; }

  /* Тоггл Market/OTC: чтобы не распирал */
  .signal-mode-toggle {
    width: 100%;
    justify-content: space-between;
    padding: .3rem;
  }
  .signal-mode-btn {
    flex: 1 1 0;
    padding: .5rem .7rem;
  }
  .signal-mode-btn .title { font-size: .72rem; }
  .signal-mode-btn .subtitle { font-size: .66rem; }

  /* Метрики в сигнале: у тебя pills круглые и широкие — делаем компактнее */
  .signal-metric-pill {
    border-radius: 16px;
    padding: .5rem .7rem;
  }

  /* Белая карточка сигнала: текст и отступы более компактные */
  .signal-card-main { border-radius: 18px; }
}

/* -----------------------------
   Очень маленькие экраны (<= 380px)
------------------------------ */
@media (max-width: 380px){
  .navbar-brand { font-size: 1rem; }
  .hero-title { font-size: 1.55rem; }
  .btn.btn-lg { font-size: .96rem; }
  .signal-mode-btn { padding: .45rem .55rem; }
}

/* -----------------------------
   Умный 2-в-ряд для статов на мобиле
   (работает, если ты используешь col-sm-6 и т.п.)
------------------------------ */
@media (max-width: 576px){
  /* Это помогает когда внутри карточек есть фиксированная высота/контент */
  .card.soft { height: 100%; }
}