:root {
  --sgw-green: #22c55e;
  --sgw-green-dark: #16a34a;
  --sgw-blue: #2563eb;
  --sgw-red: #ef4444;
  --sgw-yellow: #f59e0b;
  --sgw-bg: #f3f6fb;
  --sgw-card: #ffffff;
  --sgw-border: #e5e7eb;
  --sgw-text: #1f2937;
  --sgw-muted: #6b7280;
  --sgw-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

body {
  background: var(--sgw-bg) !important;
}

.card,
.panel,
.box,
.server-card,
.mikrotik-card,
[class*="card"] {
  border-radius: 16px !important;
  border: 1px solid var(--sgw-border) !important;
  box-shadow: var(--sgw-shadow) !important;
}

.sgw-mikrotik-page .card,
.sgw-mikrotik-page .panel,
.sgw-mikrotik-page .box {
  overflow: hidden;
}

.sgw-status-pill {
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  display: inline-block;
}

.sgw-status-online {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}

.sgw-status-offline {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

.sgw-status-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}

.sgw-mikrotik-page .btn,
.sgw-mikrotik-page button,
.sgw-mikrotik-page a.btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
}

.sgw-mikrotik-page .btn-success,
.sgw-mikrotik-page .btn-primary {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border: 0 !important;
  color: #fff !important;
}

.sgw-top-new-server-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 18px 0;
}

.sgw-top-new-server-btn {
  min-width: 180px;
}

.progress,
.progress-bar {
  border-radius: 999px !important;
  overflow: hidden;
}

.progress {
  height: 10px !important;
  background: #e5e7eb !important;
}

.progress-bar {
  background: linear-gradient(90deg, #2563eb, #22c55e) !important;
}

@media (max-width: 768px) {
  .sgw-top-new-server-bar {
    margin: 10px 0 14px 0;
  }
}