:root {
  --pro-radius-xl: 26px;
  --pro-radius-lg: 20px;
  --pro-radius-md: 14px;
  --pro-surface: color-mix(in srgb, var(--card) 94%, var(--panel-2));
  --pro-surface-soft: color-mix(in srgb, var(--panel-2) 88%, var(--card));
  --pro-border: color-mix(in srgb, var(--border) 82%, transparent);
  --pro-shadow: 0 18px 42px rgba(17, 24, 39, 0.09);
  --pro-shadow-soft: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.ops-shell,
.settings-shell,
.users-shell,
.routers-shell,
.card.data-card {
  position: relative;
}

.ops-shell::before,
.settings-shell::before,
.users-shell::before,
.routers-shell::before,
.card.data-card::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--ok) 10%, transparent), transparent 28%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--active-border) 18%, transparent), transparent 34%);
  opacity: 0.75;
}

.ops-shell > *,
.settings-shell > *,
.users-shell > *,
.routers-shell > *,
.card.data-card > * {
  position: relative;
}

.data-card,
.routers-card,
.users-card,
.settings-section,
.ops-section,
.ops-chart-card {
  box-shadow: var(--pro-shadow);
}

.data-toolbar,
.routers-banner,
.users-banner,
.settings-banner,
.ops-banner {
  overflow: hidden;
  position: relative;
}

.data-toolbar::after,
.routers-banner::after,
.users-banner::after,
.settings-banner::after,
.ops-banner::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.13), transparent 38%),
    radial-gradient(circle at 94% 0%, rgba(255, 255, 255, 0.18), transparent 32%);
}

.data-toolbar > *,
.routers-banner > *,
.users-banner > *,
.settings-banner > *,
.ops-banner > * {
  position: relative;
  z-index: 1;
}

:root[data-theme='light'] .routers-banner__meta span,
:root[data-theme='light'] .users-banner__meta span,
:root[data-theme='light'] .settings-banner__meta span {
  color: var(--active-ink);
  background: color-mix(in srgb, var(--active) 72%, rgba(255, 255, 255, 0.72));
  border-color: var(--active-border);
}

:root[data-theme='dark'] .routers-banner__meta span,
:root[data-theme='dark'] .users-banner__meta span,
:root[data-theme='dark'] .settings-banner__meta span {
  color: #fff;
}

.data-table,
.routers-table,
.users-table,
.ops-table {
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius-lg);
  overflow: hidden;
}

.data-table thead th,
.routers-table thead th,
.users-table thead th,
.ops-table th {
  background: color-mix(in srgb, var(--panel-2) 88%, var(--active));
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
  font-size: 11px;
  letter-spacing: 0.08em;
  padding-top: 11px;
  padding-bottom: 11px;
  white-space: nowrap;
}

.data-table tbody td,
.routers-table tbody td,
.users-table tbody td,
.ops-table td {
  line-height: 1.42;
}

.data-table tbody tr,
.routers-table tbody tr,
.users-table tbody tr,
.ops-table tbody tr {
  transition: background 0.16s ease, transform 0.16s ease;
}

.data-table tbody tr:hover,
.routers-table tbody tr:hover,
.users-table tbody tr:hover,
.ops-table tbody tr:hover {
  background: color-mix(in srgb, var(--active) 38%, transparent);
}

.data-table tbody td:first-child,
.routers-table tbody td:first-child,
.users-table tbody td:first-child,
.ops-table td:first-child {
  font-weight: 800;
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
}

.row-actions,
.routers-actions,
.users-actions,
.settings-actions,
.quick-actions,
.router-form-actions,
.users-form-actions {
  align-items: center;
}

.btn,
.users-icon-link,
.routers-actions a,
.topbar__actions a,
.ops-banner__action {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.btn:hover,
.users-icon-link:hover,
.routers-actions a:hover,
.topbar__actions a:hover,
.ops-banner__action:hover {
  transform: translateY(-1px);
}

.data-table .badge,
.routers-badge,
.users-badge,
.ops-pill,
.toolbar-meta .chip {
  font-weight: 800;
  letter-spacing: 0.01em;
}

input,
select,
textarea {
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--active-border) !important;
  box-shadow: var(--focus-ring);
  outline: none;
}

.data-table .hint,
.routers-small,
.users-hint,
.settings-hint {
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
}

@media (max-width: 920px) {
  .data-table,
  .routers-table,
  .users-table,
  .ops-table {
    min-width: 840px;
  }
}