/* ========== Design tokens (сокращённый, безопасный набор) ========== */
:root {
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-text: #2c3e50;
  --color-text-secondary: #7f8c8d;
  --color-primary: #667eea;
  --color-primary-2: #764ba2;
  --color-success: #27ae60;
  --color-error: #e74c3c;
  --color-warning: #f39c12;
  --color-border: #e1e8ed;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.12);

  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;

  --font: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,Arial,sans-serif;
}

/* ========== База ========== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
  min-height: 100vh;
}

/* Утилиты и критичные фиксы каскада */
.hidden { display: none !important; }           /* критично для закрытия модалки */
.modal.hidden { display: none !important; }     /* дополнительная страховка */
.block { display:block; }
.flex { display:flex; }

/* ========== Шапка ========== */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-14) var(--space-20);
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-2) 100%);
  color:#fff; box-shadow:var(--shadow-lg);
}
.brand h1{margin:0;font-size:20px}
.subtitle{font-size:12px;opacity:.9}
.actions{display:flex;gap:var(--space-8);align-items:center;flex-wrap:wrap}

/* ========== Контейнер и панель управления ========== */
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.controls{
  display:flex;gap:var(--space-12);align-items:flex-end;flex-wrap:wrap;
  background:var(--color-surface);padding:var(--space-16);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  margin-bottom:var(--space-16); border:1px solid var(--color-border);
}
.control-group{display:flex;flex-direction:column;gap:var(--space-6);min-width:140px}
.input,.select{
  padding:var(--space-10) var(--space-12);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font-size:14px;background:#fff;
}
.input:focus,.select:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(102,126,234,.12);
}

/* ========== Кнопки ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--space-10) var(--space-16);
  border-radius:var(--radius-md);border:0;background:#fff;color:#333;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:.2s;
}
.btn-outline{border:2px solid var(--color-primary);color:var(--color-primary);background:#fff}
.btn-outline:hover{background:var(--color-primary);color:#fff}
.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-2) 100%);color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-large{padding:var(--space-12) var(--space-20)}

/* ========== Статусы / лоадер ========== */
.status-panel{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-12);background:#fff;padding:var(--space-16);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--space-16)
}
.status-item{text-align:center}
.label{display:block;color:var(--color-text-secondary);font-size:12px}
.status-value{font-weight:700}
.loading{
  display:flex;gap:var(--space-10);align-items:center;justify-content:center;
  background:#fff;padding:var(--space-16);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--space-16)
}
.spinner{width:26px;height:26px;border:3px solid #eee;border-top:3px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== Сигналы ========== */
.signals-section{
  background:#fff;padding:var(--space-16);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);border:1px solid var(--color-border)
}
.section-header{display:flex;justify-content:space-between;gap:var(--space-12);align-items:center;margin-bottom:var(--space-12);flex-wrap:wrap}
.section-controls{display:flex;gap:var(--space-8);align-items:center}
.signals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-12)}
.signal-card{
  background:#fff;border-radius:var(--radius-lg);padding:var(--space-16);
  border-left:4px solid transparent;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);
  transition:box-shadow .2s ease
}
.signal-card:hover{box-shadow:var(--shadow-md)}
.signal-card.buy{border-left-color:var(--color-success)}
.signal-card.sell{border-left-color:var(--color-error)}
.signal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-8)}
.signal-title{font-weight:700}
.signal-timeframe{font-size:12px;color:var(--color-text-secondary);text-transform:uppercase}
.signal-side{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700}
.signal-side.buy{background:#d5f4e6;color:var(--color-success)}
.signal-side.sell{background:#fdeaea;color:var(--color-error)}
.signal-price{font-size:18px;font-weight:700;margin:6px 0}
.signal-confidence{display:flex;gap:var(--space-8);align-items:center}
.confidence-bar{flex:1;height:6px;background:#ecf0f1;border-radius:3px;overflow:hidden}
.confidence-fill{height:100%;background:linear-gradient(90deg,var(--color-warning) 0%,var(--color-success) 100%)}
.confidence-text{font-size:12px;font-weight:700}
.signal-reason{font-size:13px;color:#555;background:#f8f9fa;border-left:3px solid var(--color-primary);padding:10px;border-radius:8px;margin-top:8px}
.signal-time{font-size:12px;color:var(--color-text-secondary);text-align:right;margin-top:8px}

/* ========== Модалка (фикс каскада включён) ========== */
.modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:var(--space-16);z-index:1000;
}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px)}
.modal-content{
  position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  max-width:440px;width:100%;max-height:90vh;overflow:auto;z-index:1;border:1px solid var(--color-border)
}
.modal-header,.modal-footer{
  display:flex;justify-content:space-between;align-items:center;padding:var(--space-12) var(--space-16);
  border-bottom:1px solid #eee
}
.modal-footer{border-bottom:0;border-top:1px solid #eee}
.modal-body{padding:var(--space-16)}
.form-group{margin-bottom:var(--space-12)}
.btn-close{background:transparent;border:0;color:#777;font-size:22px;cursor:pointer}

/* ========== Toast ========== */
.toast-container{position:fixed;top:var(--space-16);right:var(--space-16);display:flex;flex-direction:column;gap:var(--space-8);z-index:1200}
.toast{background:#fff;border-left:4px solid var(--color-success);padding:var(--space-12) var(--space-16);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border:1px solid var(--color-border)}
.toast.error{border-left-color:var(--color-error)}
.toast.warning{border-left-color:var(--color-warning)}

/* ========== Адаптив ========== */
@media (max-width: 480px){
  .topbar{padding:var(--space-12) var(--space-16);flex-direction:column;gap:var(--space-12);text-align:center}
  .brand h1{font-size:18px}
  .container{margin:var(--space-16) auto;padding:0 var(--space-12)}
  .controls{flex-direction:column;align-items:stretch;gap:var(--space-16)}
  .signals-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .signal-card{padding:var(--space-12)}
  .modal-content{margin:var(--space-16);max-width:none;width:auto}
  .modal-header,.modal-footer{padding:var(--space-12)}
}