/* ═══════════════════════════════════════
   ProxyGate — Общие стили
   ═══════════════════════════════════════ */

:root {
  --bg-primary: #0a0b0f;
  --bg-secondary: #12141c;
  --bg-card: #161822;
  --bg-card-hover: #1c1f2e;
  --bg-elevated: #1e2133;
  --border: #252840;
  --border-hover: #363a5c;
  --text-primary: #e8eaf6;
  --text-secondary: #8b8fb0;
  --text-muted: #5c6080;
  --accent: #6c5ce7;
  --accent-hover: #7d6ff0;
  --accent-muted: rgba(108,92,231,0.15);
  --green: #00d68f;
  --green-muted: rgba(0,214,143,0.12);
  --red: #ff5c72;
  --red-muted: rgba(255,92,114,0.12);
  --yellow: #ffc048;
  --yellow-muted: rgba(255,192,72,0.12);
  --blue: #4ecafc;
  --blue-muted: rgba(78,202,252,0.12);
  --gradient-accent: linear-gradient(135deg, #6c5ce7 0%, #4ecafc 100%);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-glow: 0 0 40px rgba(108,92,231,0.15);
  --font-body: 'Outfit', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:3px; }

/* Animations */
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ─── Buttons ─── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; background:var(--gradient-accent); color:#fff;
  border:none; border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:15px; font-weight:600;
  cursor:pointer; transition:all .3s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(108,92,231,.35); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border); border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:15px; font-weight:600;
  cursor:pointer; transition:all .3s;
}
.btn-secondary:hover { background:var(--bg-card-hover); border-color:var(--border-hover); transform:translateY(-2px); }

.btn-sm {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; font-size:12px; font-weight:600;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-elevated); color:var(--text-secondary);
  font-family:var(--font-body); cursor:pointer; transition:all .15s;
}
.btn-sm:hover { background:var(--bg-card-hover); border-color:var(--border-hover); color:var(--text-primary); }
.btn-sm.btn-accent { background:var(--accent-muted); border-color:rgba(108,92,231,.3); color:var(--accent); }
.btn-sm.btn-accent:hover { background:rgba(108,92,231,.25); border-color:var(--accent); }
.btn-sm.btn-danger { background:var(--red-muted); border-color:rgba(255,92,114,.3); color:var(--red); }
.btn-sm.btn-danger:hover { background:rgba(255,92,114,.25); border-color:var(--red); }

/* ─── Badges ─── */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:100px; font-size:12px; font-weight:600;
  white-space:nowrap;
}
.badge-green { background:var(--green-muted); color:var(--green); }
.badge-red { background:var(--red-muted); color:var(--red); }
.badge-yellow { background:var(--yellow-muted); color:var(--yellow); }
.badge-blue { background:var(--blue-muted); color:var(--blue); }
.badge-accent { background:var(--accent-muted); color:var(--accent); }

.badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ─── Forms ─── */
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.form-input {
  width:100%; padding:10px 14px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-primary);
  font-family:var(--font-body); font-size:14px;
  transition:all .15s; outline:none;
}
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); }
.form-input::placeholder { color:var(--text-muted); }
.form-hint { font-size:12px; color:var(--text-muted); margin-top:6px; }

/* ─── Progress ─── */
.progress-bar { height:6px; background:var(--bg-elevated); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width .5s ease; }

/* ─── Tables ─── */
.table-container {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.table-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.table-header h3 { font-size:16px; font-weight:700; }

table { width:100%; border-collapse:collapse; }
thead th {
  text-align:left; padding:12px 20px; font-size:12px; font-weight:600;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td { padding:14px 20px; font-size:14px; border-bottom:1px solid var(--border); }
tbody tr:hover { background:var(--bg-card-hover); }
tbody tr:last-child td { border-bottom:none; }

.td-mono { font-family:var(--font-mono); font-size:13px; }
.td-muted { color:var(--text-secondary); }
.td-bold { font-weight:600; }
.td-small { font-size:13px; }

/* ─── Stats Cards ─── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:20px; transition:all .2s;
}
.stat-card:hover { border-color:var(--border-hover); }
.stat-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.stat-card-label { font-size:13px; color:var(--text-secondary); font-weight:500; }
.stat-card-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
}
.icon-green { background:var(--green-muted); color:var(--green); }
.icon-accent { background:var(--accent-muted); color:var(--accent); }
.icon-blue { background:var(--blue-muted); color:var(--blue); }
.icon-red { background:var(--red-muted); color:var(--red); }
.icon-yellow { background:var(--yellow-muted); color:var(--yellow); }

.stat-card-value { font-size:28px; font-weight:800; letter-spacing:-1px; margin-bottom:4px; }
.stat-card-change { font-size:12px; font-weight:500; color:var(--text-secondary); }
.change-up { color:var(--green); }
.change-down { color:var(--red); }

/* ─── Chart container ─── */
.chart-container {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}

/* ─── Grids ─── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ─── Alert ─── */
.alert {
  padding:12px 16px; border-radius:var(--radius-sm);
  font-size:14px; margin-bottom:20px;
}
.alert-error { background:var(--red-muted); color:var(--red); border:1px solid rgba(255,92,114,.3); }
.alert-success { background:var(--green-muted); color:var(--green); border:1px solid rgba(0,214,143,.3); }
.alert-info { background:var(--blue-muted); color:var(--blue); border:1px solid rgba(78,202,252,.3); }

/* ─── Detail rows ─── */
.detail-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.detail-row:last-child { border-bottom:none; }
.detail-label { font-size:13px; color:var(--text-secondary); }
.detail-value { font-size:14px; font-weight:600; font-family:var(--font-mono); }

/* ─── Slot bar ─── */
.slot-bar { display:flex; align-items:center; gap:8px; }
.slot-bar-track { flex:1; height:6px; background:var(--bg-elevated); border-radius:3px; overflow:hidden; min-width:60px; }
.slot-bar-fill { height:100%; border-radius:3px; transition:width .5s ease; }
.slot-bar-text { font-size:12px; font-family:var(--font-mono); color:var(--text-secondary); white-space:nowrap; }

/* ─── Responsive ─── */
@media (max-width:768px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  table { font-size:12px; }
  thead th, tbody td { padding:10px 12px; }
}