/* NetSecure interface refresh: shared visual language for every browser surface. */
:root {
  color-scheme: dark;
  --ns-bg: #08131f;
  --ns-surface: #0d1c2a;
  --ns-surface-raised: #112538;
  --ns-line: rgba(150, 190, 218, .17);
  --ns-text: #edf5fa;
  --ns-muted: #9aafbf;
  --ns-accent: #49d2d1;
  --ns-blue: #218de0;
  --ns-radius: 14px;
}

html { color-scheme: dark; }
body { color: var(--ns-text); }
::selection { color: #06131d; background: #70e3db; }
:focus-visible { outline: 3px solid rgba(73, 210, 209, .82) !important; outline-offset: 3px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-color: var(--ns-line) !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: #8298a9; }
button { border-radius: 10px; }
button:not(:disabled):hover { filter: brightness(1.09); }
button:disabled { cursor: not-allowed; opacity: .58; }

/* Operations consoles */
.shell, .sa-shell { background: var(--ns-bg); }
.sidebar, .sa-sidebar, .side {
  background: #091724 !important;
  border-color: var(--ns-line) !important;
}
.topbar, .top {
  background: rgba(8, 19, 31, .92) !important;
  border-color: var(--ns-line) !important;
  backdrop-filter: blur(16px);
}
.content { max-width: 1560px; }
.card, .panel, .stat, .metric, .module, .profile-mini {
  background: linear-gradient(145deg, rgba(16, 36, 53, .96), rgba(10, 25, 39, .98)) !important;
  border-color: var(--ns-line) !important;
  border-radius: var(--ns-radius) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .13);
}
.nav button, .menu button { border-radius: 10px !important; }
.nav button.active, .menu button.active {
  background: rgba(73, 210, 209, .12) !important;
  color: #e9ffff !important;
  box-shadow: inset 3px 0 var(--ns-accent);
}
.eyebrow, .logo b, .brand b, .logo span { color: #75e2df !important; }
.table th, .table td { border-color: var(--ns-line) !important; }
.table th { color: #9db2c1 !important; }
.btn, .primary, .btn-primary, .primary-button {
  box-shadow: 0 6px 18px rgba(20, 128, 207, .16);
}

/* Sign-in and account flows */
.login-container { isolation: isolate; }
.login-side, .login-card, .auth-card {
  border-color: var(--ns-line) !important;
  border-radius: 20px !important;
}
.field input, .field select, .field textarea,
.toolbar input, .toolbar select, .code-input {
  background-color: #081826 !important;
  color: var(--ns-text) !important;
}
.modal-box, .modal-card, .profile-card {
  border-color: var(--ns-line) !important;
  border-radius: 18px !important;
}

/* Seller and customer surfaces */
.device, .sale-row, .list-row { border-color: var(--ns-line) !important; }
.badge, .role, .status { letter-spacing: .025em; }
.notice, .message[role=status] { border-radius: 10px; }
.server-card, .server-grid > *, .payment-card, .plan-card {
  border-color: var(--ns-line) !important;
  border-radius: var(--ns-radius) !important;
}

@media (max-width: 760px) {
  .content { padding-left: 16px !important; padding-right: 16px !important; }
  .topbar, .top { padding-left: 16px !important; padding-right: 16px !important; }
  .table-wrap { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}