:root {
  --rv-bg: #f4f6fb;
  --rv-bg-soft: #eef2ff;
  --rv-surface: #ffffff;
  --rv-text: #111827;
  --rv-muted: #667085;
  --rv-border: #d9e1f0;
  --rv-accent: #4f46e5;
  --rv-accent-soft: #e0e7ff;
  --rv-shadow: 0 14px 30px rgba(31, 41, 55, 0.08);
}

body.app-body,
body.login-page {
  background: radial-gradient(circle at 10% 0%, #e8edff 0%, var(--rv-bg) 42%, #f8f9fd 100%) !important;
  color: var(--rv-text) !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

.app-layout,
.app-main,
.app-content,
.content-inner {
  background: transparent !important;
}

.app-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%) !important;
  border-right: 1px solid var(--rv-border) !important;
  box-shadow: 0 8px 25px rgba(30, 41, 59, 0.08) !important;
}

.sidebar-logo,
.sidebar-link span,
.sidebar-link i,
.telegram-menu a,
.sidebar-user-name,
.breadcrumb-text {
  color: var(--rv-text) !important;
}

.sidebar-link {
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  transition: all .18s ease !important;
}

.sidebar-link:hover {
  background: var(--rv-accent-soft) !important;
  border-color: #c7d2fe !important;
  transform: translateX(3px) !important;
}

.sidebar-link.active {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.28) !important;
}

.sidebar-link.active span,
.sidebar-link.active i {
  color: #ffffff !important;
}

.app-topbar,
.app-footer,
.dashboard-card,
.card,
.card-box,
.stat-card,
.table-card,
.hub-form-card,
.best-price-card,
.proxies-countries-wrap,
.proxies-hero,
.proxies-type-strip,
.proxies-cta-banner,
.telegram-section {
  background: var(--rv-surface) !important;
  color: var(--rv-text) !important;
  border: 1px solid var(--rv-border) !important;
  box-shadow: var(--rv-shadow) !important;
  border-radius: 14px !important;
}

.dashboard-card::before,
.stat-card::before,
.card::before,
.card-box::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed, #0ea5e9);
  border-radius: 100px;
}

.table th,
.hub-attacks-table th {
  background: #f5f7ff !important;
  color: var(--rv-text) !important;
  border-color: var(--rv-border) !important;
}

.table td,
.hub-attacks-table td {
  background: #ffffff !important;
  color: var(--rv-text) !important;
  border-color: var(--rv-border) !important;
}

.badge,
.hub-target-badge,
.proxies-country-item {
  background: #f8faff !important;
  color: var(--rv-text) !important;
  border: 1px solid var(--rv-border) !important;
  border-radius: 10px !important;
}

.form-control,
.method-select,
select.form-control,
input,
textarea {
  background: #ffffff !important;
  color: var(--rv-text) !important;
  border: 1px solid #ccd6ea !important;
  border-radius: 12px !important;
}

.form-control:focus,
.method-select:focus,
select.form-control:focus,
input:focus,
textarea:focus {
  border-color: var(--rv-accent) !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #7a8699 !important;
  opacity: 1 !important;
}

.btn-primary,
.btn-hit,
.btn-login,
.btn-pricing {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3) !important;
}

.btn-primary:hover,
.btn-hit:hover,
.btn-login:hover,
.btn-pricing:hover {
  transform: translateY(-1px);
  filter: brightness(1.06) !important;
}

/* Global readability mode: force black text on all pages */
body.app-body,
body.login-page,
body.app-body *,
body.login-page * {
  color: #000000 !important;
}

body.app-body input::placeholder,
body.app-body textarea::placeholder,
body.login-page input::placeholder,
body.login-page textarea::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

body.app-body .btn,
body.login-page .btn,
body.app-body .btn-primary,
body.login-page .btn-primary,
body.app-body .btn-hit,
body.login-page .btn-login,
body.login-page .btn-pricing {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

/* Sidebar profile dropdown final fix */
.app-sidebar .dropdown-menu,
.app-sidebar .profile-dropdown,
.app-sidebar .dropdown-menu.dropdown-menu-right {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
}

.app-sidebar .dropdown-item,
.app-sidebar .dropdown-item i,
.app-sidebar .dropdown-item.text-danger,
.app-sidebar .dropdown-item .mdi {
  color: #000000 !important;
  background: transparent !important;
}

.app-sidebar .dropdown-item:hover,
.app-sidebar .dropdown-item:focus {
  background: #f3f4f6 !important;
  color: #000000 !important;
}

.app-sidebar .dropdown-divider {
  border-top: 1px solid #e5e7eb !important;
}

/* Network status/progress visibility fix */
.progress,
.ns-progress,
.ms-progress,
.ns-progress-track {
  background: #e5e7eb !important;
}

.progress-bar,
.ns-progress-fill,
.ms-bar,
.ms-bar.status-green,
.ms-bar.status-orange,
.ms-bar.status-red {
  background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%) !important;
}

/* Chart tooltip readability fix */
.chartist-tooltip,
.chartist-tooltip * {
  color: #ffffff !important;
}

.chartist-tooltip {
  background: #1f2a44 !important;
  border: 1px solid #1f2a44 !important;
}

/* keep attacks-graph tooltip text white despite global black rules */
body.app-body .chartist-tooltip,
body.app-body .chartist-tooltip *,
body.app-body .ct-chart .chartist-tooltip,
body.app-body .ct-chart .chartist-tooltip * {
  color: #ffffff !important;
}

/* Animated brand logo */
.sidebar-logo {
  display: inline-block !important;
  animation: brand-float 2.2s ease-in-out infinite, brand-glow 2.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes brand-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(79, 70, 229, 0); }
  50% { text-shadow: 0 0 10px rgba(79, 70, 229, 0.35); }
}