/*
 * Zonara UI
 *
 * The stylesheet grew with the application, so source order still matters for
 * a few compatibility overrides. Keep component rules close to the feature
 * they belong to and add new theme overrides beside the component rather than
 * at the end of the file.
 *
 * Sections: base/layout, forms, account/user UI, dashboard, navigation,
 * monitoring, light theme and administrative tables.
 */
:root {
  --bg: #f4f6f9;
  --surface: #fff;
  --surface-alt: #f8fafc;
  --surface-soft: #fbfcfe;
  --text: #172033;
  --heading: #0d1525;
  --muted: #697386;
  --line: #e6eaf0;
  --line-strong: #d7dde6;
  --nav: #0b1220;
  --nav-soft: #121c2f;
  --accent: #f48120;
  --accent-dark: #d9670f;
  --accent-soft: #fff3e7;
  --success: #16835d;
  --success-soft: #eaf8f2;
  --danger: #c73f47;
  --danger-soft: #fff0f1;
  --warning: #b36c14;
  --warning-soft: #fff7e8;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(15,23,42,.03),0 10px 30px rgba(15,23,42,.045);
  --shadow-lg: 0 24px 70px rgba(15,23,42,.14);
  --sidebar-w: 256px;
}
* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  font: 14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent-dark);
  text-decoration: none;
}
a:hover {
  color: #b75308;
}
button,input,select,textarea {
  font: inherit;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 3px solid rgba(244,129,32,.18);
  outline-offset: 2px;
}
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 13px 14px;
  background: linear-gradient(180deg,#0b1220 0%,#0a111d 100%);
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  color: #c8d0dd;
  z-index: 60;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 5px 8px 20px;
  color: #fff !important;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#ff9a45,#ed7417);
  box-shadow: 0 8px 24px rgba(244,129,32,.23);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.06;
}
.brand-text strong {
  font-size: 16px;
  letter-spacing: -.02em;
}
.brand-text small {
  margin-top: 5px;
  font-size: 9px;
  color: #78869d;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-section {
  padding: 17px 11px 7px;
  color: #627087;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 850;
}
.side-nav a {
  height: 41px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border-radius: 10px;
  color: #aeb9c9 !important;
  font-size: 13px;
  font-weight: 650;
  transition: background .14s ease,color .14s ease,transform .14s ease;
}
.side-nav a svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #75849a;
}
.side-nav a:hover {
  background: rgba(255,255,255,.055);
  color: #fff !important;
}
.side-nav a.active {
  background: rgba(244,129,32,.12);
  color: #fff !important;
  box-shadow: inset 2px 0 var(--accent);
}
.side-nav a.active svg {
  color: #ff9c4b;
}
.sidebar-user {
  margin-top: auto;
  padding: 14px 7px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  display: grid;
  grid-template-columns: 35px minmax(0,1fr) 30px;
  gap: 9px;
  align-items: center;
}
.avatar {
  width: 35px;
  height: 35px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #1d2a3e;
  color: #fff;
  font-weight: 800;
}
.sidebar-user>div:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.sidebar-user strong {
  color: #f8fafc;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user small {
  font-size: 10px;
  color: #728096;
  text-transform: capitalize;
}
.logout-link {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #748198 !important;
  border-radius: 8px;
}
.logout-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff !important;
}
.logout-link svg {
  width: 16px;
  height: 16px;
}
.content-shell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-top {
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.top-left,.top-status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #657087;
  font-size: 11px;
  font-weight: 650;
}
.breadcrumb span {
  color: #9aa4b3;
}
.breadcrumb b {
  font-weight: 400;
  color: #cbd1da;
}
.status-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #627087;
  font-size: 11px;
  font-weight: 700;
}
.status-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20a36e;
  box-shadow: 0 0 0 3px #dcf5ea;
}
.top-user {
  padding-left: 12px;
  border-left: 1px solid var(--line);
  font-size: 11px;
  color: #8a94a4;
}
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #38445a;
  box-shadow: none;
  font-size: 17px;
  cursor: pointer;
}
.menu-toggle:hover {
  background: #f8fafc;
  transform: none;
}
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 34px 34px;
}
.auth-container {
  max-width: 1180px;
  padding-top: 0;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.page-title-row {
  display: flex;
  align-items: center;
  gap: 13px;
}
.eyebrow,.kicker {
  font-size: 9px;
  color: var(--accent-dark);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .145em;
}
.page-head h1 {
  margin: 3px 0 0;
  color: var(--heading);
  font-size: 29px;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.back-button {
  height: 39px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #566176;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 1px 2px rgba(15,23,42,.025);
}
.back-button svg {
  width: 16px;
  height: 16px;
}
.back-button:hover {
  background: var(--accent-soft);
  border-color: #ffd2aa;
  color: var(--accent-dark);
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.narrow {
  max-width: 680px;
}
.compact-card {
  padding: 20px;
}
.hero-card {
  background: linear-gradient(145deg,#fff 0%,#fffdfa 100%);
}
.grid.two {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(320px,.9fr);
  gap: 18px;
}
.top-gap {
  margin-top: 18px;
}
.section-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: -4px 0 15px;
}
.section-actions p {
  margin: 0;
}
h2 {
  margin: 0 0 7px;
  color: var(--heading);
  font-size: 18px;
  letter-spacing: -.025em;
}
h3 {
  margin: 0 0 6px;
  color: var(--heading);
  font-size: 15px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 11px;
}
.mono {
  font-family: "SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
.nowrap {
  white-space: nowrap;
}
.kicker {
  display: block;
  margin-bottom: 5px;
}
.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.card-heading p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 13px;
  margin-bottom: 18px;
}
.stat {
  position: relative;
  min-height: 101px;
  padding: 18px 19px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(15,23,42,.025);
  overflow: hidden;
}
.stat:after {
  content: "";
  position: absolute;
  right: -24px;
  top: -29px;
  width: 93px;
  height: 93px;
  border-radius: 50%;
  background: linear-gradient(145deg,#fff8f1,#fff);
}
.stat span {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 9px;
  color: #748094;
  font-size: 11px;
  font-weight: 750;
}
.stat strong {
  position: relative;
  z-index: 1;
  color: #111a2b;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.045em;
}
.analytics-stats {
  margin-top: 16px;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.toolbar p {
  margin: 0;
}
.toolbar-actions,.button-row,.inline-flex {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-box {
  height: 38px;
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fafc;
  color: #9aa4b2;
}
.search-box:focus-within {
  background: #fff;
  border-color: #f6ad6c;
  box-shadow: 0 0 0 3px rgba(244,129,32,.10);
}
.search-box input {
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}
.search-box input:focus {
  box-shadow: none;
}
.search-box span {
  font-size: 15px;
  line-height: 1;
}
.domain-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 15px;
}
.domain-card {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.domain-card:hover {
  border-color: #d2d9e3;
  box-shadow: 0 9px 28px rgba(15,23,42,.055);
  transform: translateY(-1px);
}
.domain-card[hidden],[data-filter-item][hidden] {
  display: none !important;
}
.domain-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.domain-top>div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
  min-width: 0;
}
.domain-top strong {
  overflow: hidden;
  color: #172033;
  font-size: 14px;
  text-overflow: ellipsis;
}
.domain-top small {
  grid-column: 2;
  color: #7e8898;
  font-size: 10px;
  text-transform: capitalize;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #99a4b3;
  box-shadow: 0 0 0 3px #edf0f4;
}
.status-dot.active {
  background: #20a36e;
  box-shadow: 0 0 0 3px #dcf5ea;
}
.status-dot.pending,.status-dot.initializing {
  background: #e99a2f;
  box-shadow: 0 0 0 3px #fff1d9;
}
.ns {
  min-height: 35px;
  margin: 13px 0;
  color: #808a99;
  font-size: 10px;
  line-height: 1.55;
  word-break: break-word;
}
.actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.actions>a {
  display: inline-flex;
  padding: 5px 8px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  border-radius: 7px;
  color: #526075;
  font-size: 10px;
  font-weight: 750;
}
.actions>a:hover {
  background: var(--accent-soft);
  border-color: #ffd3ac;
  color: var(--accent-dark);
}
.actions form {
  margin-left: auto;
}
.pill,.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid #e4e8ee;
  border-radius: 999px;
  background: #f5f7fa;
  color: #687386;
  font-size: 10px;
  font-weight: 780;
}
.connection-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.connection-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.connection-badge.online {
  color: #13704f;
  background: #ecf9f3;
  border: 1px solid #b8ead7;
}
.connection-badge.online i {
  background: #20a36e;
}
.connection-badge.offline {
  color: #a53139;
  background: #fff2f3;
  border: 1px solid #f3c3c7;
}
.connection-badge.offline i {
  background: #d9565e;
}
.alert {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  margin: 0 0 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 650;
}
.alert.success {
  background: var(--success-soft);
  border-color: #bfe8d8;
  color: #126d4d;
}
.alert.error {
  background: var(--danger-soft);
  border-color: #f1c6c9;
  color: #a8333a;
}
.alert.warning {
  background: var(--warning-soft);
  border-color: #f1d7ad;
  color: #946019;
}
.error-text {
  color: #b3373e;
  font-size: 11px;
}
.table-wrap {
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  scrollbar-width: thin;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}
th,td {
  padding: 10px 11px;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  vertical-align: middle;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: #788396;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover td {
  background: #fbfcfe;
}
td strong {
  color: #202a3d;
}
label {
  display: block;
  margin: 0 0 14px;
  color: #3f4a5e;
  font-size: 12px;
  font-weight: 720;
}
input,select,textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
input::placeholder,textarea::placeholder {
  color: #a5adba;
}
input:hover,select:hover,textarea:hover {
  border-color: #bfc7d2;
}
input:focus,select:focus,textarea:focus {
  border-color: #f3a35e;
  box-shadow: 0 0 0 3px rgba(244,129,32,.10);
}
textarea {
  resize: vertical;
}
.check {
  display: flex;
  align-items: center;
  gap: 9px;
}
.check input {
  width: auto;
  margin: 0;
}
.compact-check {
  margin: 0;
}
.compact {
  min-width: 80px;
  margin: 0;
  padding: 8px 9px;
}
.tiny {
  width: 78px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 0 15px;
}
.form-grid .span2 {
  grid-column: span 2;
}
button,.button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(180deg,#f68b32,#ec7418);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(218,98,10,.12);
  cursor: pointer;
  transition: transform .12s ease,filter .12s ease,background .12s ease,border-color .12s ease;
}
button:hover,.button:hover {
  filter: brightness(.985);
  transform: translateY(-1px);
  color: #fff;
}
.button.secondary {
  background: #202c40;
  border-color: #202c40;
  box-shadow: none;
}
.button.ghost {
  background: #fff;
  border-color: var(--line-strong);
  color: #526075;
  box-shadow: none;
}
.button.ghost:hover {
  background: #f8fafc;
  color: #172033;
}
.wide {
  width: 100%;
  min-height: 43px;
}
.link-button,.text-danger-button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: none !important;
  box-shadow: none;
}
.link-button {
  color: var(--accent-dark);
  font-size: 11px;
}
.link-button:hover,.text-danger-button:hover {
  transform: none;
  filter: none;
}
.danger,.text-danger-button {
  color: var(--danger) !important;
}
.danger-button {
  background: #c8444b !important;
  box-shadow: none;
}
.text-danger-button {
  font-size: 11px;
}
button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .76;
}
.is-loading:after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.inline {
  display: inline;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.setting-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.setting-card p {
  margin: 0;
}
.setting-card form {
  display: flex;
  align-items: center;
  gap: 7px;
}
.setting-card form select {
  min-width: 120px;
  margin: 0;
}
.permission-list {
  display: grid;
  margin: 12px 0 14px;
}
.permission-list>div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f2f5;
}
.permission-list>div:last-child {
  border-bottom: 0;
}
.permission-list b {
  font-size: 11px;
}
.permission-list span {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}
.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.diagnostic-item {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
}
.diagnostic-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-weight: 900;
}
.diagnostic-item>div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.diagnostic-item strong {
  font-size: 11px;
}
.diagnostic-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  word-break: break-word;
}
.diagnostic-item em {
  margin-top: 7px;
  color: #8b95a5;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}
.diagnostic-item.ok .diagnostic-icon {
  background: #dff6ec;
  color: #147351;
}
.diagnostic-item.bad .diagnostic-icon {
  background: #ffe7e9;
  color: #b2373e;
}
.diagnostic-item.neutral .diagnostic-icon {
  background: #edf1f5;
  color: #647084;
}
.info-note {
  margin-top: 12px;
  padding: 12px 13px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #667286;
  font-size: 10px;
}
.system-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.system-card p {
  margin: 0;
  color: var(--muted);
}
.system-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.system-pills span {
  padding: 5px 8px;
  border-radius: 8px;
  background: #f3f5f8;
  color: #667286;
  font-size: 10px;
  font-weight: 750;
}
.status-up {
  background: #eaf8f2;
  color: #13704f;
  border-color: #b8ead7;
}
.status-down {
  background: #fff0f1;
  color: #a8333a;
  border-color: #f1c6c9;
}
.status-unknown {
  background: #f1f4f7;
  color: #5c687c;
}
.auth-body {
  background: radial-gradient(circle at 10% 10%,rgba(255,183,112,.16),transparent 27%),radial-gradient(circle at 85% 78%,rgba(148,163,184,.12),transparent 23%),linear-gradient(135deg,#f8fafc,#f3f5f8);
}
.auth-shell {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: minmax(0,1.2fr) 420px;
  align-items: center;
  gap: 78px;
  padding: 55px 0;
}
.auth-copy:before {
  content: "Cloudflare Management";
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid #ffd3ac;
  border-radius: 999px;
  background: #fff8f1;
  color: #bd5a0d;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.auth-copy .eyebrow {
  display: none;
}
.auth-copy h1 {
  max-width: 650px;
  margin: 18px 0;
  color: #0f1728;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -.058em;
}
.auth-copy p {
  max-width: 585px;
  color: #667286;
  font-size: 16px;
  line-height: 1.7;
}
.auth-card {
  padding: 30px;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.auth-card:before {
  content: "Sicherer Zugang";
  display: block;
  margin-bottom: 5px;
  color: #98a2b2;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.auth-card h2 {
  margin-bottom: 21px;
  font-size: 24px;
}
dialog {
  width: min(550px,calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(15,23,42,.28);
}
dialog::backdrop {
  background: rgba(10,17,29,.6);
  backdrop-filter: blur(3px);
}
.dialog-form {
  padding: 23px;
}
.icon-button {
  min-height: auto;
  padding: 0 5px;
  background: none;
  color: #697386;
  box-shadow: none;
  font-size: 23px;
}
.clean-list {
  padding-left: 18px;
  color: #4f5b70;
}
.clean-list li {
  margin: 8px 0;
}
.pager {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}
.footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 34px 22px;
  color: #a0a8b4;
  font-size: 9px;
}
.auth-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 0 24px;
}
.recovery,.audit-detail {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafc;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}
.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.filter-grid label {
  margin: 0;
}
.filter-button {
  padding-bottom: 1px;
}
code {
  padding: 2px 5px;
  border-radius: 5px;
  background: #f0f3f6;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}
.nav-backdrop {
  display: none;
}
@media (max-width:1180px) {
  .domain-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .diagnostic-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:980px) {
  :root {
    --sidebar-w: 224px;
  }
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .toolbar {
    align-items: flex-start;
  }
  .toolbar-actions {
    justify-content: flex-end;
  }
  .grid.two {
    grid-template-columns: 1fr;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .auth-shell {
    gap: 45px;
  }
}
@media (max-width:820px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 256px;
    transform: translateX(-103%);
    transition: transform .2s ease;
    box-shadow: 22px 0 55px rgba(15,23,42,.22);
  }
  body.nav-open .sidebar {
    transform: translateX(0);
  }
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(8,15,27,.48);
    opacity: 0;
    visibility: hidden;
    transition: .2s;
  }
  .nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
  }
  .menu-toggle {
    display: inline-grid;
    place-items: center;
  }
  .content-top {
    padding: 0 18px;
  }
  .top-user {
    display: none;
  }
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-copy {
    display: none;
  }
  .auth-shell {
    min-height: calc(100vh - 60px);
    padding: 45px 0;
  }
  .stats {
    grid-template-columns: repeat(2,1fr);
  }
  .system-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .toolbar {
    flex-direction: column;
  }
  .toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .search-box {
    flex: 1;
    min-width: 180px;
  }
}
@media (max-width:600px) {
  .container {
    padding: 20px 13px 27px;
  }
  .content-top {
    height: 54px;
  }
  .breadcrumb {
    display: none;
  }
  .domain-grid,.diagnostic-grid {
    grid-template-columns: 1fr;
  }
  .stats {
    gap: 8px;
  }
  .stat {
    min-height: 91px;
    padding: 15px;
  }
  .stat strong {
    font-size: 25px;
  }
  .page-head h1 {
    font-size: 24px;
  }
  .page-title-row {
    align-items: flex-start;
    gap: 9px;
  }
  .back-button {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .back-button span {
    display: none;
  }
  .back-button svg {
    width: 17px;
  }
  .card {
    padding: 17px;
  }
  .card-heading,.setting-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .setting-card form {
    width: 100%;
  }
  .setting-card form select {
    flex: 1;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .span2 {
    grid-column: auto;
  }
  .filter-grid {
    grid-template-columns: 1fr;
  }
  .footer {
    padding-left: 13px;
    padding-right: 13px;
  }
  .auth-footer {
    padding-left: 13px;
    padding-right: 13px;
  }
  .actions form {
    margin-left: 0;
  }
  .search-box {
    width: 100%;
    flex-basis: 100%;
  }
  .toolbar-actions>.button,.toolbar-actions>button {
    flex: 1;
  }
  .section-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Dashboard refinements and connection controls */
.domain-grid {
  grid-template-columns: 1fr !important;
  gap: 10px;
}
.domain-card {
  display: grid;
  grid-template-columns: minmax(240px,1.15fr) minmax(220px,.9fr) minmax(420px,1.75fr);
  align-items: center;
  gap: 22px;
  padding: 17px 18px;
}
.domain-card:hover {
  transform: none;
  box-shadow: 0 7px 22px rgba(15,23,42,.05);
}
.domain-top {
  min-width: 0;
}
.domain-top strong {
  font-size: 13px;
}
.domain-top .pill {
  margin-left: auto;
}
.domain-card .ns {
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  border-left: 1px solid var(--line);
  color: #768196;
}
.domain-card .actions {
  justify-content: flex-end;
}
.domain-card .actions a {
  padding: 7px 9px;
  background: #f6f8fb;
  border-color: #e8edf3;
}
.domain-card .actions form {
  margin-left: 5px;
}
.connect-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 24px;
  background: linear-gradient(135deg,#fff 0%,#fff8f1 100%);
  border-color: #f2dfcf;
}
.connect-hero h2 {
  font-size: 22px;
}
.connect-hero p {
  max-width: 760px;
  margin-bottom: 0;
}
.connect-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
.cloudflare-button {
  min-width: 210px;
}
.copy-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.copy-field code {
  flex: 1;
  overflow: auto;
  white-space: nowrap;
  background: none;
  padding: 0;
}
.copy-field .button {
  min-height: 32px;
  padding: 6px 9px;
}
.inline-token-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}
.inline-token-form input {
  margin: 0;
}
.inline-token-form button {
  height: 100%;
}
@media (max-width:1150px) {
  .domain-card {
    grid-template-columns: 1fr 1fr;
  }
  .domain-card .actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .domain-card .ns {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 10px 0 0;
  }
}
@media (max-width:720px) {
  .domain-card {
    grid-template-columns: 1fr;
  }
  .domain-card .actions {
    grid-column: auto;
  }
  .domain-card .ns {
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
  .connect-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .connect-actions {
    align-items: stretch;
    width: 100%;
  }
  .inline-token-form {
    grid-template-columns: 1fr;
  }
  .copy-field {
    align-items: stretch;
    flex-direction: column;
  }
}
/* Cloudflare account authentication controls */
.auth-method {
  position: relative;
  transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.auth-method.selected {
  border-color: rgba(249,115,22,.42);
  box-shadow: 0 14px 38px rgba(15,23,42,.08),0 0 0 3px rgba(249,115,22,.07);
}
.auth-method.selected:before {
  content: "AKTIV";
  position: absolute;
  right: 18px;
  top: -11px;
  background: #f97316;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 5px 9px;
  border-radius: 999px;
}
.method-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.notice.warning {
  padding: 12px 14px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  border-radius: 12px;
  color: #9a3412;
  margin: 12px 0 16px;
  font-size: 13px;
}
/* Dashboard controls and dark theme */
.theme-toggle {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  overflow: hidden;
}
.theme-toggle:hover {
  background: var(--surface-alt);
  color: var(--heading);
  transform: none;
  filter: none;
}
.theme-icon {
  position: absolute;
  line-height: 1;
  font-size: 16px;
  transition: opacity .16s ease,transform .16s ease;
}
.theme-icon-moon {
  opacity: 1;
  transform: scale(1);
}
.theme-icon-sun {
  opacity: 0;
  transform: scale(.7);
}
html[data-theme="dark"] .theme-icon-moon {
  opacity: 0;
  transform: scale(.7);
}
html[data-theme="dark"] .theme-icon-sun {
  opacity: 1;
  transform: scale(1);
}
.auth-theme-toggle {
  position: fixed;
  right: 22px;
  top: 22px;
  z-index: 80;
}
.dashboard-toolbar {
  align-items: flex-start;
  margin-bottom: 18px;
}
.dashboard-toolbar>div:first-child {
  max-width: 690px;
}
.dashboard-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.dashboard-actions .search-box {
  width: 220px;
}
.dashboard-actions>.button,.dashboard-actions>button {
  white-space: nowrap;
}
.domain-card .actions .link-button {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid #f2c9cc !important;
  border-radius: 8px;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  font-size: 10px;
  font-weight: 800;
}
.domain-card .actions .link-button:hover {
  border-color: #e9aeb2 !important;
  background: #ffe5e7 !important;
}
@media (max-width:1220px) {
  .dashboard-toolbar {
    flex-direction: column;
  }
  .dashboard-toolbar>div:first-child {
    max-width: none;
  }
  .dashboard-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .dashboard-actions .search-box {
    flex: 1;
    min-width: 230px;
  }
}
@media (max-width:650px) {
  .dashboard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-actions .search-box {
    grid-column: 1/-1;
    width: 100%;
    min-width: 0;
  }
  .dashboard-actions>.button,.dashboard-actions>button {
    width: 100%;
  }
}
html[data-theme="dark"] {
  --bg: #0b1018;
  --surface: #121923;
  --surface-alt: #171f2b;
  --surface-soft: #101720;
  --text: #dbe4ef;
  --heading: #f7f9fc;
  --muted: #8f9bad;
  --line: #263140;
  --line-strong: #344153;
  --nav: #080d14;
  --nav-soft: #101824;
  --accent: #ff8a2a;
  --accent-dark: #ff9a4d;
  --accent-soft: #2b1c11;
  --success: #4bc392;
  --success-soft: #10291f;
  --danger: #ff777d;
  --danger-soft: #2e171a;
  --warning: #e6a34f;
  --warning-soft: #2d2415;
  --shadow: 0 1px 2px rgba(0,0,0,.18),0 12px 34px rgba(0,0,0,.18);
  --shadow-lg: 0 28px 80px rgba(0,0,0,.42);
}
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="dark"] .content-top {
  background: rgba(11,16,24,.88);
  border-color: var(--line);
}
html[data-theme="dark"] .breadcrumb {
  color: #9aa7b8;
}
html[data-theme="dark"] .breadcrumb span {
  color: #6f7d91;
}
html[data-theme="dark"] .breadcrumb b {
  color: #415064;
}
html[data-theme="dark"] .status-live {
  color: #98a5b7;
}
html[data-theme="dark"] .status-live i {
  box-shadow: 0 0 0 3px #143427;
}
html[data-theme="dark"] .top-user {
  color: #8794a7;
}
html[data-theme="dark"] .menu-toggle,html[data-theme="dark"] .back-button {
  background: var(--surface);
  border-color: var(--line);
  color: #bdc7d5;
}
html[data-theme="dark"] .menu-toggle:hover,html[data-theme="dark"] .back-button:hover {
  background: var(--surface-alt);
}
html[data-theme="dark"] .stat,html[data-theme="dark"] .domain-card,html[data-theme="dark"] .table-wrap,html[data-theme="dark"] table {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .stat:after {
  background: linear-gradient(145deg,#211810,#121923);
}
html[data-theme="dark"] .stat span {
  color: #8996a9;
}
html[data-theme="dark"] .stat strong,html[data-theme="dark"] .domain-top strong,html[data-theme="dark"] td strong {
  color: var(--heading);
}
html[data-theme="dark"] .search-box {
  background: #0f1620;
  border-color: var(--line);
  color: #78869a;
}
html[data-theme="dark"] .search-box:focus-within {
  background: #111a25;
}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea {
  background: #0f1620;
  border-color: var(--line-strong);
  color: var(--text);
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder {
  color: #68778c;
}
html[data-theme="dark"] .button.ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: #c3cddd;
}
html[data-theme="dark"] .button.ghost:hover {
  background: var(--surface-alt);
  color: #fff;
}
html[data-theme="dark"] .domain-card .actions a {
  background: #18212e;
  border-color: #2a3646;
  color: #bac6d6;
}
html[data-theme="dark"] .domain-card .actions a:hover {
  background: var(--accent-soft);
  border-color: #5a3820;
  color: #ffad69;
}
html[data-theme="dark"] .pill,html[data-theme="dark"] .badge {
  background: #18212d;
  border-color: #2b3746;
  color: #aab6c6;
}
html[data-theme="dark"] .table-wrap {
  background: var(--surface);
}
html[data-theme="dark"] thead th {
  background: #171f2a;
  color: #8e9aae;
}
html[data-theme="dark"] th,html[data-theme="dark"] td {
  border-bottom-color: #25303d;
}
html[data-theme="dark"] tbody tr:hover td {
  background: #151d28;
}
html[data-theme="dark"] .permission-list>div {
  border-color: #25303d;
}
html[data-theme="dark"] .diagnostic-item {
  background: #111923;
  border-color: var(--line);
}
html[data-theme="dark"] .info-note,html[data-theme="dark"] .recovery,html[data-theme="dark"] .audit-detail {
  background: #101720;
  border-color: var(--line);
  color: #9ca9ba;
}
html[data-theme="dark"] .system-pills span {
  background: #18212d;
  color: #a9b5c5;
}
html[data-theme="dark"] code {
  background: #1a2430;
  color: #cbd6e4;
}
html[data-theme="dark"] .connect-hero,html[data-theme="dark"] .hero-card {
  background: linear-gradient(135deg,#121923 0%,#1b1714 100%);
  border-color: #36291f;
}
html[data-theme="dark"] .auth-method.selected {
  box-shadow: 0 14px 38px rgba(0,0,0,.22),0 0 0 3px rgba(249,115,22,.08);
}
html[data-theme="dark"] .notice.warning {
  background: #2d2415;
  border-color: #5b4724;
  color: #f0b867;
}
html[data-theme="dark"] .auth-body {
  background: radial-gradient(circle at 10% 10%,rgba(244,129,32,.10),transparent 28%),radial-gradient(circle at 85% 78%,rgba(73,93,122,.12),transparent 24%),linear-gradient(135deg,#0b1018,#0e141e);
}
html[data-theme="dark"] .auth-copy h1 {
  color: var(--heading);
}
html[data-theme="dark"] .auth-copy p {
  color: #95a2b4;
}
html[data-theme="dark"] .auth-copy:before {
  background: #21170f;
  border-color: #5b3520;
  color: #ffa25a;
}
html[data-theme="dark"] dialog {
  background: var(--surface);
  color: var(--text);
}
html[data-theme="dark"] .clean-list {
  color: #aeb9c8;
}
html[data-theme="dark"] .status-up {
  background: #10291f;
  color: #5ad0a0;
  border-color: #245d48;
}
html[data-theme="dark"] .status-down {
  background: #2e171a;
  color: #ff858a;
  border-color: #613036;
}
html[data-theme="dark"] .status-unknown {
  background: #18212d;
  color: #a9b4c4;
}
html[data-theme="dark"] .footer {
  color: #667488;
}
/* User management and browser autofill behavior */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.users-layout {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(340px,.8fr);
  gap: 18px;
  align-items: start;
}
.users-card {
  min-width: 0;
}
.users-heading {
  margin-bottom: 14px;
}
.user-list {
  display: grid;
  gap: 9px;
}
.user-row {
  display: grid;
  grid-template-columns: minmax(230px,1.4fr) 88px 96px minmax(190px,.9fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
  transition: border-color .15s ease,background .15s ease;
}
.user-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-alt);
}
.user-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.user-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 850;
}
.user-identity>div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.user-identity strong {
  color: var(--heading);
  font-size: 13px;
}
.user-identity span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.meta-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.status-chip.good {
  background: var(--success-soft);
  border-color: color-mix(in srgb,var(--success) 28%,transparent);
  color: var(--success);
}
.status-chip.bad {
  background: var(--danger-soft);
  border-color: color-mix(in srgb,var(--danger) 28%,transparent);
  color: var(--danger);
}
.status-chip.neutral {
  background: var(--surface-alt);
  color: var(--muted);
}
.role-form {
  display: grid;
  grid-template-columns: minmax(100px,1fr) auto;
  gap: 7px;
  align-items: center;
}
.role-form select {
  margin: 0;
}
.compact-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 10px;
  white-space: nowrap;
}
.user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.user-actions form {
  margin: 0;
}
.danger-text {
  color: var(--danger) !important;
}
.create-user-card {
  position: sticky;
  top: 78px;
}
.create-user-card form {
  margin-top: 18px;
}
.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.45;
}
/* Keep browser autofill consistent with the active field palette. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text) !important;
  border-color: var(--line-strong) !important;
  transition: background-color 9999s ease-out 0s;
}
html[data-theme="dark"] input:-webkit-autofill,html[data-theme="dark"] input:-webkit-autofill:hover,html[data-theme="dark"] input:-webkit-autofill:focus,html[data-theme="dark"] textarea:-webkit-autofill,html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px #0f1620 inset !important;
  box-shadow: 0 0 0 1000px #0f1620 inset !important;
  caret-color: var(--text) !important;
}
html[data-theme="dark"] .user-row {
  background: #101720;
}
html[data-theme="dark"] .user-row:hover {
  background: #151d28;
}
html[data-theme="dark"] .user-avatar {
  background: #2b1c11;
  color: #ff9a4d;
}
html[data-theme="dark"] .status-chip.neutral {
  background: #18212d;
  color: #9ca9ba;
}
@media (max-width:1180px) {
  .users-layout {
    grid-template-columns: 1fr;
  }
  .create-user-card {
    position: static;
  }
  .user-row {
    grid-template-columns: minmax(220px,1.4fr) 80px 90px minmax(180px,1fr);
  }
  .user-actions {
    grid-column: 1/-1;
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
}
@media (max-width:760px) {
  .user-row {
    grid-template-columns: 1fr 1fr;
  }
  .user-identity {
    grid-column: 1/-1;
  }
  .role-form {
    grid-column: 1/-1;
  }
  .user-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .user-meta {
    min-width: 0;
  }
}
@media (max-width:460px) {
  .user-row {
    grid-template-columns: 1fr;
  }
  .user-meta,.role-form,.user-actions {
    grid-column: auto;
  }
  .role-form {
    grid-template-columns: 1fr;
  }
  .user-actions {
    flex-wrap: wrap;
  }
}
/* DNS table actions */
.dns-action-cell {
  width: 190px;
  min-width: 190px;
}
.dns-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin: 0;
  white-space: nowrap;
}
.dns-action-button {
  min-height: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  transform: none !important;
  filter: none !important;
}
.dns-action-button .dns-action-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
}
.dns-action-button.save {
  border: 1px solid #f1b47e;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.dns-action-button.save .dns-action-icon {
  background: rgba(244,129,32,.16);
}
.dns-action-button.save:hover {
  border-color: var(--accent);
  background: #ffe9d5;
  color: #b95208;
}
.dns-action-button.delete {
  border: 1px solid #efc5c8;
  background: var(--danger-soft);
  color: var(--danger);
}
.dns-action-button.delete .dns-action-icon {
  background: rgba(199,63,71,.11);
}
.dns-action-button.delete:hover {
  border-color: #e29aa0;
  background: #ffe3e5;
  color: #a92e36;
}
.dns-action-button:focus-visible {
  outline: 3px solid rgba(244,129,32,.16);
  outline-offset: 2px;
}
/* Visually group editable DNS cells into a single row control. */
.table-wrap table td {
  vertical-align: middle;
}
.table-wrap table td input.compact,.table-wrap table td select.compact {
  height: 38px;
  margin: 0;
}
.compact-check {
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.compact-check input {
  margin: 0;
}
.dns-row-actions button.is-loading span:not(.dns-action-icon) {
  display: none;
}
html[data-theme="dark"] .dns-action-button.save {
  border-color: #68401f;
  background: #291b11;
  color: #ff9f55;
}
html[data-theme="dark"] .dns-action-button.save .dns-action-icon {
  background: #3a2414;
}
html[data-theme="dark"] .dns-action-button.save:hover {
  border-color: #8b5429;
  background: #342014;
  color: #ffb070;
}
html[data-theme="dark"] .dns-action-button.delete {
  border-color: #5a3035;
  background: #2c171a;
  color: #ff858a;
}
html[data-theme="dark"] .dns-action-button.delete .dns-action-icon {
  background: #3b1c20;
}
html[data-theme="dark"] .dns-action-button.delete:hover {
  border-color: #764047;
  background: #381b1f;
  color: #ff9da1;
}
html[data-theme="dark"] .compact-check {
  color: #8e9aac;
}
@media (max-width:900px) {
  .dns-action-cell {
    min-width: 160px;
    width: 160px;
  }
  .dns-action-button {
    padding: 0 8px;
  }
  .dns-action-button span:last-child {
    display: none;
  }
  .dns-action-button {
    width: 34px;
  }
  .dns-action-button .dns-action-icon {
    width: 16px;
  }
}
/* Profile and two-factor authentication */
.sidebar-profile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  flex: 1;
}
.sidebar-profile-link:hover strong {
  color: var(--accent,#f97316);
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}
.profile-avatar-large {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 850;
  background: linear-gradient(135deg,#ffedd5,#fed7aa);
  color: #c2410c;
  border: 1px solid rgba(249,115,22,.18);
  flex: none;
}
html[data-theme="dark"] .profile-avatar-large {
  background: rgba(249,115,22,.12);
  border-color: rgba(249,115,22,.24);
  color: #fb923c;
}
.security-status-panel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-direction: column;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}
.security-status-panel.good {
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.07);
}
.security-status-panel span {
  font-size: 13px;
  color: var(--muted);
}
.sub-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}
.sub-card h3 {
  margin: 0 0 5px;
}
.sub-card p {
  margin-top: 0;
}
.danger-zone {
  border-color: rgba(239,68,68,.2);
}
.setup-steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.setup-step {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}
.setup-step>span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(249,115,22,.12);
  color: #f97316;
  font-weight: 800;
  flex: none;
}
.setup-step strong,.setup-step small {
  display: block;
}
.setup-step small {
  color: var(--muted);
  margin-top: 3px;
}
.secret-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(249,115,22,.24);
  background: rgba(249,115,22,.06);
  border-radius: 14px;
}
.secret-box code {
  font-size: 16px;
  letter-spacing: .08em;
  word-break: break-all;
}
.secret-box>div {
  min-width: 0;
}
.secret-box .meta-label {
  display: block;
  margin-bottom: 6px;
}
.inline-confirm {
  display: flex;
  align-items: end;
  gap: 12px;
}
.inline-confirm label {
  margin: 0;
  flex: 1;
  max-width: 360px;
}
.inline-confirm button {
  min-height: 42px;
}
.max-field {
  max-width: 480px;
}
.recovery-card {
  border-color: rgba(245,158,11,.35);
}
.recovery {
  padding: 16px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  line-height: 1.75;
  letter-spacing: .04em;
  overflow: auto;
}
@media (max-width:900px) {
  .profile-grid,.setup-steps {
    grid-template-columns: 1fr;
  }
  .inline-confirm {
    align-items: stretch;
    flex-direction: column;
  }
  .inline-confirm label {
    max-width: none;
  }
  .secret-box {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Multi-account and sharing UI */
.account-list,.share-list {
  display: grid;
  gap: 10px;
}
.account-row,.share-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}
.account-badge {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(249,115,22,.1);
  color: #f97316;
  font-weight: 850;
  flex: none;
}
.account-info {
  min-width: 180px;
  flex: 1;
}
.account-info strong,.account-info span,.share-row>div:first-child strong,.share-row>div:first-child span {
  display: block;
}
.account-info span,.share-row>div:first-child span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.account-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.inline-account-name {
  display: flex;
  align-items: center;
  gap: 7px;
}
.inline-account-name input {
  width: 190px;
  margin: 0;
}
.account-dialog {
  width: min(900px,calc(100vw - 32px));
}
.share-action {
  border-color: rgba(59,130,246,.22) !important;
  color: #60a5fa !important;
  background: rgba(59,130,246,.07) !important;
}
.share-form {
  display: grid;
  gap: 16px;
}
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.check-tile {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  cursor: pointer;
}
.check-tile input {
  width: auto !important;
  margin: 0 !important;
}
.check-tile span strong,.check-tile span small {
  display: block;
}
.check-tile span small {
  color: var(--muted);
  margin-top: 2px;
}
.share-row>div:first-child {
  min-width: 180px;
}
.share-caps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.share-caps span {
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.domain-main {
  min-width: 220px;
  flex: 1;
}
.domain-card {
  display: flex;
  align-items: center;
  gap: 18px;
}
.domain-card .actions {
  justify-content: flex-end;
}
.empty-state {
  padding: 28px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
}
.empty-state strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}
.empty-state .button {
  margin-top: 10px;
}
@media (max-width:900px) {
  .account-row,.share-row,.domain-card {
    align-items: stretch;
    flex-direction: column;
  }
  .account-actions {
    justify-content: flex-start;
  }
  .inline-account-name {
    width: 100%;
  }
  .inline-account-name input {
    width: auto;
    flex: 1;
  }
  .capability-grid {
    grid-template-columns: 1fr 1fr;
  }
  .domain-card .actions {
    justify-content: flex-start;
  }
}
@media (max-width:560px) {
  .capability-grid {
    grid-template-columns: 1fr;
  }
}
/* Sidebar and permission views */
.sidebar-user {
  grid-template-columns: minmax(0,1fr) 32px !important;
  gap: 8px !important;
  padding: 13px 6px 0 !important;
  min-height: 55px;
}
.sidebar-profile-link {
  grid-column: 1;
  display: grid !important;
  grid-template-columns: 35px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  overflow: hidden;
}
.sidebar-profile-link>div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-profile-link strong,.sidebar-profile-link small {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-profile-link .avatar {
  flex: none;
}
.sidebar-user>.logout-link {
  grid-column: 2;
  width: 32px;
  height: 32px;
  align-self: center;
}
.content-shell>.footer {
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--line);
  padding-top: 13px;
  min-height: 44px;
}
.perm-dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 850;
  border: 1px solid var(--border);
}
.perm-dot.yes {
  color: #22c55e;
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.2);
}
.perm-dot.no {
  color: var(--muted);
  background: var(--surface-soft);
}
/* Account deletion and danger states */
.account-danger-card {
  border-color: rgba(239,68,68,.28);
}
.danger-kicker {
  color: #ef4444 !important;
}
.delete-account-warning {
  padding: 15px 16px;
  margin: 10px 0 18px;
  border: 1px solid rgba(239,68,68,.22);
  border-radius: 14px;
  background: rgba(239,68,68,.06);
}
.delete-account-warning strong {
  display: block;
  color: #ef4444;
  margin-bottom: 5px;
}
.delete-account-warning p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.delete-account-form .danger-button {
  margin-top: 2px;
}
.user-actions .dns-action-btn.delete.compact-button {
  min-height: 34px;
  padding: 7px 10px;
}
/* User management and log controls */
.users-layout {
  grid-template-columns: minmax(0,1fr) minmax(360px,420px) !important;
}
.users-card {
  overflow: hidden;
}
.user-row {
  grid-template-columns: minmax(180px,1fr) 78px 88px !important;
  grid-template-areas: "identity twofa status" "role role actions" !important;
  column-gap: 12px !important;
  row-gap: 11px !important;
}
.user-identity {
  grid-area: identity;
}
.user-row>.user-meta:nth-of-type(1) {
  grid-area: twofa;
}
.user-row>.user-meta:nth-of-type(2) {
  grid-area: status;
}
.user-row>.role-form {
  grid-area: role;
  display: flex !important;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.user-row>.role-form select {
  width: 150px;
  min-width: 120px;
  flex: 0 1 150px;
}
.user-row>.user-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.user-actions form,.user-actions a {
  flex: 0 0 auto;
}
.user-identity>div {
  max-width: 100%;
}
.user-identity span {
  max-width: 100%;
}
.danger-outline {
  border: 1px solid rgba(239,68,68,.32) !important;
  background: rgba(239,68,68,.05) !important;
  color: #ef4444 !important;
  box-shadow: none !important;
}
.danger-outline:hover {
  border-color: rgba(239,68,68,.55) !important;
  background: rgba(239,68,68,.11) !important;
}
.audit-toolbar {
  align-items: flex-start;
}
.audit-toolbar .toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.audit-toolbar form {
  margin: 0;
}
html[data-theme="dark"] .danger-outline {
  border-color: #5f3035 !important;
  background: #2b171a !important;
  color: #ff858a !important;
}
html[data-theme="dark"] .danger-outline:hover {
  border-color: #814149 !important;
  background: #381b20 !important;
}
@media (max-width:1280px) {
  .users-layout {
    grid-template-columns: 1fr !important;
  }
  .create-user-card {
    position: static !important;
  }
}
@media (max-width:760px) {
  .user-row {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "identity identity" "twofa status" "role role" "actions actions" !important;
  }
  .user-row>.role-form {
    flex-wrap: wrap;
  }
  .user-row>.user-actions {
    justify-content: flex-start;
  }
}
@media (max-width:480px) {
  .user-row {
    grid-template-columns: 1fr !important;
    grid-template-areas: "identity" "twofa" "status" "role" "actions" !important;
  }
  .user-row>.role-form {
    align-items: stretch;
    flex-direction: column;
  }
  .user-row>.role-form select,.user-row>.role-form button {
    width: 100%;
    max-width: none;
  }
  .user-row>.user-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .user-row>.user-actions>* {
    width: 100%;
  }
  .user-row>.user-actions button,.user-row>.user-actions a {
    width: 100%;
    justify-content: center;
  }
  .audit-toolbar .toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
/* User management layout */
.user-list {
  display: grid;
  gap: 10px;
}
.user-row-v44 {
  display: grid;
  grid-template-columns: minmax(220px,1fr) auto minmax(430px,auto);
  align-items: center;
  gap: 18px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  min-width: 0;
}
.user-row-v44:hover {
  border-color: var(--line-strong);
  background: var(--surface-alt);
}
.user-primary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.user-primary-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.user-primary-text strong {
  font-size: 13px;
  color: var(--heading);
}
.user-primary-text span {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-state-group {
  display: flex;
  align-items: center;
  gap: 18px;
}
.user-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.user-control-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.role-form-v44 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-width: 0;
}
.role-form-v44 select {
  width: 135px;
  min-width: 135px;
  height: 36px;
  margin: 0;
}
.user-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: nowrap;
}
.user-action-buttons form {
  margin: 0;
  display: flex;
}
.user-control-button {
  min-height: 36px !important;
  height: 36px;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
  font-size: 10px !important;
  line-height: 1 !important;
  border-radius: 9px !important;
}
.user-action-buttons .danger-button.user-control-button {
  background: var(--danger) !important;
  color: white !important;
  border: 1px solid var(--danger) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .user-row-v44 {
  background: #101720;
}
html[data-theme="dark"] .user-row-v44:hover {
  background: #151d28;
}
@media (max-width:1450px) {
  .users-layout {
    grid-template-columns: 1fr !important;
  }
  .create-user-card {
    position: static !important;
  }
}
@media (max-width:1100px) {
  .user-row-v44 {
    grid-template-columns: minmax(220px,1fr) auto;
    grid-template-areas: "primary states"
      "controls controls";
  }
  .user-primary {
    grid-area: primary;
  }
  .user-state-group {
    grid-area: states;
  }
  .user-control-group {
    grid-area: controls;
    justify-content: flex-end;
    padding-top: 11px;
    border-top: 1px solid var(--line);
  }
}
@media (max-width:720px) {
  .user-row-v44 {
    grid-template-columns: 1fr;
    grid-template-areas: "primary" "states" "controls";
  }
  .user-state-group {
    justify-content: flex-start;
  }
  .user-control-group {
    align-items: stretch;
    flex-direction: column;
  }
  .role-form-v44 {
    width: 100%;
  }
  .role-form-v44 select {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .user-action-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
  }
  .user-action-buttons>* {
    width: 100%;
  }
  .user-action-buttons a,.user-action-buttons button {
    width: 100%;
  }
}
@media (max-width:480px) {
  .user-action-buttons {
    grid-template-columns: 1fr;
  }
  .role-form-v44 {
    flex-direction: column;
    align-items: stretch;
  }
  .role-form-v44 select,.role-form-v44 button {
    width: 100%;
    max-width: none;
  }
}
/* Desktop user-management layout */
.users-layout {
  display: grid !important;
  grid-template-columns: minmax(0,1.85fr) minmax(330px,.85fr) !important;
  gap: 18px !important;
  align-items: start !important;
  width: 100% !important;
}
.users-layout>.users-card,
.users-layout>.create-user-card {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.users-layout>.create-user-card {
  position: sticky !important;
  top: 78px !important;
}
.users-layout>.create-user-card form {
  width: 100% !important;
}
.users-layout>.create-user-card input,
.users-layout>.create-user-card select,
.users-layout>.create-user-card button.wide {
  width: 100% !important;
  box-sizing: border-box !important;
}
/*
 * Keep the two cards next to each other for normal desktop/tablet landscape widths.
 * Only stack when there is genuinely not enough space for the controls.
 */
@media (max-width:980px) {
  .users-layout {
    grid-template-columns: 1fr !important;
  }
  .users-layout>.create-user-card {
    position: static !important;
  }
}
/* Core Zonara visual system */
:root {
  --bg: #070c18;
  --surface: #0e1726;
  --surface-alt: #101c2e;
  --surface-soft: #0b1422;
  --text: #e8eef8;
  --heading: #f8fbff;
  --muted: #8291aa;
  --line: #22314a;
  --line-strong: #304360;
  --nav: #0b1020;
  --nav-soft: #121a31;
  --accent: #6c5cff;
  --accent-dark: #8174ff;
  --accent-soft: rgba(108,92,255,.13);
  --success: #25d6ad;
  --success-soft: rgba(37,214,173,.10);
  --danger: #ff5f76;
  --danger-soft: rgba(255,95,118,.11);
  --warning: #ffb454;
  --warning-soft: rgba(255,180,84,.10);
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 18px 50px rgba(0,0,0,.22);
  --shadow-lg: 0 26px 80px rgba(0,0,0,.34);
  --sidebar-w: 258px;
}
html,body {
  background: radial-gradient(circle at 38% 0%,rgba(35,49,91,.13),transparent 30%),var(--bg);
  color: var(--text);
}
html:not([data-theme="light"]) {
  color-scheme: dark;
}
.sidebar {
  background: linear-gradient(180deg,#0e1226 0%,#0a1020 100%);
  border-right: 1px solid #252d4c;
  padding: 14px 12px;
}
.brand {
  padding: 4px 4px 22px;
  gap: 10px;
}
.brand-mark {
  width: 43px;
  height: 43px;
  border-radius: 11px;
  background: linear-gradient(145deg,#8777ff,#5a45f6);
  border: 1px solid #9b8eff;
  box-shadow: 0 0 0 3px rgba(108,92,255,.12),0 10px 30px rgba(83,64,230,.35);
  font-size: 20px;
}
.brand-text strong {
  font-size: 17px;
}
.brand-text small {
  color: #8d9ab6;
  font-size: 8px;
  letter-spacing: .08em;
}
.nav-section {
  color: #687897;
  font-size: 9px;
}
.side-nav a {
  border-radius: 6px;
  color: #d9e1f0 !important;
  height: 40px;
  font-size: 12px;
}
.side-nav a svg {
  color: #dce5f7;
}
.side-nav a.active {
  background: linear-gradient(90deg,rgba(108,92,255,.22),rgba(37,214,173,.07));
  box-shadow: inset 0 0 0 1px rgba(84,219,202,.18);
  color: #49e3cb !important;
}
.side-nav a.active svg {
  color: #49e3cb;
}
.content-top {
  height: 62px;
  background: rgba(7,12,24,.86);
  border-bottom: 1px solid #1f2a40;
}
.breadcrumb {
  color: #73839f;
}
.breadcrumb span {
  color: #50ddc8;
}
.container {
  max-width: 1500px;
  padding-top: 26px;
}
.page-head {
  margin-bottom: 20px;
}
.eyebrow {
  color: #47dec9 !important;
  font-size: 9px;
  letter-spacing: .13em;
}
.page-head h1 {
  font-size: 26px;
}
.card {
  background: linear-gradient(180deg,rgba(16,28,46,.98),rgba(13,24,40,.98));
  border: 1px solid #263854;
  border-radius: 10px;
  box-shadow: 0 16px 45px rgba(0,0,0,.15);
}
button,.button {
  border-radius: 7px;
  background: linear-gradient(135deg,#7766ff,#5945ef);
  border: 1px solid #887aff;
  color: #fff;
  box-shadow: 0 8px 22px rgba(86,67,230,.18);
}
button:hover,.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.button.ghost,.button.secondary {
  background: #0c1726;
  border-color: #293b57;
  color: #eaf1fc;
  box-shadow: none;
}
.button.ghost:hover,.button.secondary:hover {
  background: #132138;
  border-color: #3c5273;
}
input,textarea,select {
  background: #091321 !important;
  color: #eef4ff !important;
  border: 1px solid #2b3d58 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
input:focus,textarea:focus,select:focus {
  border-color: #6f64ff !important;
  box-shadow: 0 0 0 3px rgba(108,92,255,.13) !important;
  outline: none !important;
}
/* Normalize native selects across Windows and Chromium browsers. */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2397a8c4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  min-height: 38px;
  line-height: 1.25;
}
select::-ms-expand {
  display: none;
}
select option {
  background: #101a2a;
  color: #f1f5fb;
  padding: 8px;
}
.compact select,select.compact {
  min-height: 36px !important;
  height: 36px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.status-chip.good,.status-live {
  color: #45e0c2;
}
.status-live i {
  background: #36dfbd;
  box-shadow: 0 0 0 3px rgba(54,223,189,.12);
}
.table-wrap {
  border-color: #263854;
}
table thead th {
  background: #101c2d;
  color: #8fa0bc;
  border-color: #263854;
}
table td {
  border-color: #22314a;
}
.pill {
  background: #152239;
  border-color: #293b58;
  color: #dce6f6;
}
.language-switch {
  margin: 0;
}
.language-switch select {
  height: 34px !important;
  min-height: 34px !important;
  width: 66px;
  padding: 5px 28px 5px 10px !important;
  font-size: 11px;
  font-weight: 800;
  background-position: right 8px center !important;
}
.theme-toggle {
  background: #0d1727 !important;
  border: 1px solid #283b58 !important;
  box-shadow: none !important;
}
.footer {
  color: #64748f;
  border-color: #1e2a40;
}
.back-button {
  background: #0d1727;
  border-color: #293b58;
  color: #dbe5f5;
}
.search-box {
  background: #091321;
  border-color: #2b3d58;
}
.alert {
  border-radius: 8px;
}
/* Light theme keeps the same cool blue palette as the dark interface. */
html[data-theme="light"] {
  --bg: #f3f6fb;
  --surface: #fff;
  --surface-alt: #f7f9fd;
  --surface-soft: #fbfcff;
  --text: #1b2740;
  --heading: #0b1426;
  --muted: #68758d;
  --line: #dce3ee;
  --line-strong: #cbd5e3;
  color-scheme: light;
}
html[data-theme="light"] body {
  background: #f3f6fb;
}
html[data-theme="light"] .content-top {
  background: rgba(255,255,255,.9);
}
html[data-theme="light"] .card {
  background: #fff;
  border-color: #dce3ee;
}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select {
  background-color: #fff !important;
  color: #152238 !important;
  border-color: #ccd6e5 !important;
}
html[data-theme="light"] select option {
  background: #fff;
  color: #152238;
}
@media (max-width:720px) {
  .language-switch select {
    width: 60px;
  }
  .top-user {
    display: none;
  }
}
/* Main navigation and control-center layout */
:root {
  --bg: #070b15;
  --surface: #0d1726;
  --surface-alt: #111d2f;
  --surface-soft: #0a1422;
  --text: #e8eef9;
  --heading: #f8fbff;
  --muted: #8b9ab5;
  --line: #22334e;
  --line-strong: #314766;
  --accent: #6957f5;
  --accent-dark: #8174ff;
  --accent-soft: rgba(105,87,245,.14);
  --success: #21d6aa;
  --success-soft: rgba(33,214,170,.10);
  --danger: #ff6578;
  --danger-soft: rgba(255,101,120,.10);
  --warning: #f2a84a;
  --warning-soft: rgba(242,168,74,.10);
  --sidebar-w: 288px;
  --radius: 11px;
}
html:not([data-theme="light"]) body {
  background: radial-gradient(circle at 60% -10%,rgba(66,67,153,.11),transparent 32%),#070b15;
}
.app-shell {
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
}
.sidebar {
  padding: 18px 15px 14px;
  background: linear-gradient(180deg,#0d1227,#090f1f);
  border-right: 1px solid #252e4d;
}
.brand {
  padding: 0 5px 25px;
  gap: 12px;
}
.brand-mark {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: linear-gradient(145deg,#8d6cff 5%,#624cf1 52%,#20c8e8);
  border: 1px solid rgba(173,151,255,.65);
  box-shadow: 0 0 0 3px rgba(109,91,246,.10),0 10px 26px rgba(78,59,217,.28);
  font-size: 24px;
  font-weight: 950;
  font-style: italic;
}
.brand-mark:after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.16);
}
.brand-text {
  position: relative;
}
.brand-text strong {
  font-size: 19px;
  letter-spacing: -.025em;
}
.brand-text small {
  font-size: 8px;
  text-transform: none;
  letter-spacing: .02em;
  color: #90a0bc;
}
.brand-text em {
  position: absolute;
  left: 0;
  top: 34px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #252c55;
  color: #cbd2ff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
.nav-section {
  padding: 17px 10px 8px;
  color: #71809f;
  font-size: 9px;
  letter-spacing: .15em;
}
.side-nav {
  gap: 4px;
}
.side-nav a {
  height: 43px;
  padding: 0 11px;
  border-radius: 7px;
  color: #eef3fb !important;
  font-size: 12px;
  font-weight: 700;
}
.side-nav a svg {
  width: 17px;
  height: 17px;
  color: #dce5f6;
}
.side-nav a.active {
  background: linear-gradient(90deg,rgba(104,83,244,.22),rgba(45,199,205,.08));
  box-shadow: inset 0 0 0 1px rgba(100,99,223,.34);
  color: #55e4d0 !important;
}
.side-nav a.active svg {
  color: #55e4d0;
}
.nav-badge {
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 4px;
  background: #283151;
  color: #cfd6ff;
  font-size: 7px;
  letter-spacing: .04em;
}
.sidebar-system {
  margin-top: auto;
  padding: 13px 10px;
  border-top: 1px solid #202b43;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-system>span {
  color: #71809f;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 800;
}
.sidebar-system strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #39ddb8;
  font-size: 10px;
}
.sidebar-system i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28d9b2;
  box-shadow: 0 0 0 3px rgba(40,217,178,.09);
}
.sidebar-user {
  margin-top: 4px;
  padding: 11px 9px;
  border: 1px solid #253653;
  border-radius: 9px;
  background: #0c1728;
  grid-template-columns: minmax(0,1fr) 30px;
}
.sidebar-profile-link {
  gap: 10px;
}
.avatar {
  background: linear-gradient(145deg,#6e59f6,#4c39d5);
  border-radius: 50%;
}
.logout-link {
  color: #91a0ba !important;
}
.content-top {
  height: 70px;
  padding: 0 34px;
  background: rgba(7,11,21,.90) !important;
  border-bottom: 1px solid #1e2c43 !important;
}
.top-search {
  width: 285px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid #263852;
  border-radius: 8px;
  background: #091321;
  color: #6f809e;
}
.top-search input {
  width: 100%;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px;
}
.top-search input:focus {
  box-shadow: none !important;
}
.top-search span {
  font-size: 16px;
}
.top-status {
  gap: 10px;
}
.language-switch select {
  width: 130px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 6px 34px 6px 12px !important;
  border-radius: 8px !important;
  background-color: #091321 !important;
}
.theme-toggle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
}
.top-profile {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 5px;
  border-left: 1px solid #23314a;
  color: #eef3fb !important;
  font-size: 11px;
  font-weight: 700;
}
.top-avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#765cf7,#4f39dc);
  color: white;
}
.container {
  max-width: 1540px;
  padding: 30px 36px 40px;
}
.page-head {
  margin-bottom: 8px;
}
.page-title-row {
  gap: 12px;
}
.eyebrow {
  color: #43dcc5 !important;
  font-size: 9px;
}
.page-head h1 {
  font-size: 28px;
  margin-top: 5px;
}
.dashboard-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 22px;
}
.dashboard-intro p {
  margin: 0;
  color: #94a4c0;
}
.dashboard-add {
  min-width: 170px;
}
.zonara-stats {
  gap: 16px;
  margin-bottom: 18px;
}
.zonara-stats .stat {
  min-height: 118px;
  padding: 19px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(145deg,#0d1b2d,#0b1727);
  border-color: #284365;
  border-radius: 10px;
  box-shadow: none;
}
.zonara-stats .stat:after {
  display: none;
}
.zonara-stats .stat-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #4f48e7;
  border-radius: 10px;
  background: linear-gradient(145deg,#4338ca,#5d48e9);
  color: #cbd5ff;
}
.zonara-stats .stat-icon.cyan {
  background: linear-gradient(145deg,#075a75,#087d94);
  border-color: #0f9ab5;
  color: #75e9ff;
}
.zonara-stats .stat-icon.purple {
  background: linear-gradient(145deg,#49217f,#6b2da3);
  border-color: #8245bd;
  color: #e0b3ff;
}
.zonara-stats .stat-icon.green {
  background: linear-gradient(145deg,#075f4a,#078363);
  border-color: #0a9b76;
  color: #79f4ce;
}
.zonara-stats .stat-icon svg {
  width: 27px;
  height: 27px;
}
.zonara-stats .stat>div {
  display: flex;
  flex-direction: column;
}
.zonara-stats .stat strong {
  font-size: 26px;
}
.zonara-stats .stat span:not(.stat-icon) {
  margin: 1px 0 0;
  color: #b5c1d5;
  font-size: 12px;
}
.zonara-stats .stat small {
  margin-top: 4px;
  color: #2de2b5;
  font-size: 10px;
  font-weight: 700;
}
.card {
  background: linear-gradient(180deg,#0e1a2b,#0c1727);
  border: 1px solid #253956;
  border-radius: 10px;
  box-shadow: 0 16px 45px rgba(0,0,0,.13);
}
.quick-card {
  margin-bottom: 18px;
  padding: 18px;
}
.quick-card .card-heading {
  margin-bottom: 13px;
}
.quick-card h2 {
  font-size: 15px;
}
.quick-card p {
  font-size: 11px;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.quick-grid>a {
  min-height: 67px;
  display: grid;
  grid-template-columns: 39px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #223653;
  border-radius: 8px;
  background: #0b1728;
  color: #eaf1fc !important;
}
.quick-grid>a:hover {
  background: #101f34;
  border-color: #3a4d70;
  transform: translateY(-1px);
}
.quick-grid>a>span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #162c5d;
  color: #7da4ff;
}
.quick-grid svg {
  width: 19px;
  height: 19px;
}
.quick-grid div {
  display: flex;
  flex-direction: column;
}
.quick-grid strong {
  font-size: 11px;
}
.quick-grid small {
  color: #7f91af;
  font-size: 9px;
}
.quick-grid b {
  color: #8193b1;
  font-size: 18px;
  font-weight: 400;
}
.domains-panel {
  margin-top: 0;
}
.toolbar h2 {
  font-size: 16px;
}
.domain-card {
  background: #0b1727 !important;
  border-color: #243957 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.domain-card:hover {
  background: #0e1d30 !important;
  border-color: #395174 !important;
}
.search-box {
  background: #091321 !important;
  border-color: #2a3d5b !important;
}
.actions>a {
  background: #101e32 !important;
  border-color: #293d5c !important;
  color: #c7d4e8 !important;
}
button,.button {
  border-radius: 7px;
  background: linear-gradient(135deg,#715cf8,#5943e8);
  border-color: #8171ff;
  box-shadow: 0 8px 20px rgba(81,62,218,.16);
}
.button.ghost,.button.secondary {
  background: #0b1727 !important;
  border-color: #2b3e5d !important;
  color: #e8eef8 !important;
}
input,textarea,select {
  border-radius: 7px !important;
  background-color: #091321 !important;
  border-color: #2b3e5c !important;
  color: #eef4ff !important;
}
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2397a9c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 15px !important;
  padding-right: 40px !important;
  line-height: 1.2 !important;
}
select option {
  background: #0d1828 !important;
  color: #edf3fc !important;
}
table thead th {
  background: #101d30 !important;
}
.table-wrap {
  border-color: #263b59 !important;
}
.footer {
  border-top: 1px solid #17253a;
  padding-top: 15px;
  color: #61728f;
}
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg,#0d1227,#090f1f);
}
html[data-theme="light"] .top-search {
  background: #f8fafc;
  color: #71809a;
}
html[data-theme="light"] .top-search input {
  color: #152238 !important;
}
html[data-theme="light"] .zonara-stats .stat,html[data-theme="light"] .quick-grid>a,html[data-theme="light"] .domain-card {
  background: #fff !important;
}
html[data-theme="light"] .quick-grid>a {
  color: #152238 !important;
}
@media (max-width:1150px) {
  .quick-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .top-search {
    width: 210px;
  }
}
@media (max-width:900px) {
  .top-search {
    display: none;
  }
  .container {
    padding: 24px 20px;
  }
  .content-top {
    padding: 0 20px;
  }
  .dashboard-intro {
    align-items: flex-start;
  }
  .zonara-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:650px) {
  .quick-grid,.zonara-stats {
    grid-template-columns: 1fr;
  }
  .language-switch select {
    width: 92px !important;
  }
  .language-switch option {
    font-size: 11px;
  }
  .top-profile>span:last-child {
    display: none;
  }
  .dashboard-intro {
    flex-direction: column;
  }
  .dashboard-add {
    width: 100%;
  }
}
/* Login, light theme and modal sizing */
/* Authentication uses the same compact card language as the main UI. */
.auth-body {
  min-height: 100vh;
  background: #070b15 !important;
}
.auth-container {
  max-width: none !important;
  min-height: calc(100vh - 48px);
  padding: 0 !important;
  display: grid;
  place-items: center;
}
.zonara-login-shell {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 70px 20px;
}
.zonara-login-card {
  width: min(100%,390px);
  padding: 27px 28px 29px;
  border-radius: 15px;
  background: linear-gradient(145deg,#12182d,#101526) !important;
  border: 1px solid #303958 !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.35) !important;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 27px;
}
.login-brand .brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}
.login-brand>div {
  display: flex;
  flex-direction: column;
  position: relative;
}
.login-brand strong {
  font-size: 18px;
  color: #fff;
  line-height: 1.1;
}
.login-brand small {
  margin-top: 3px;
  color: #8fa0bd;
  font-size: 9px;
  font-weight: 700;
}
.login-brand em {
  width: max-content;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #27305a;
  color: #cbd4ff;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}
.login-kicker {
  margin-bottom: 4px;
  color: #43dfc6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
}
.zonara-login-card h1 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 23px;
  letter-spacing: -.035em;
}
.zonara-login-card form {
  display: grid;
  gap: 13px;
}
.zonara-login-card label {
  color: #91a0bb;
  font-size: 10px;
  font-weight: 750;
}
.zonara-login-card input {
  height: 40px;
  margin-top: 5px;
}
.zonara-login-card button {
  height: 42px;
  margin-top: 2px;
}
.auth-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0 !important;
  background: transparent !important;
  color: #52617b !important;
}
/* Keep account dialogs within the viewport on narrow screens. */
dialog#addAccount {
  width: min(820px,calc(100vw - 36px)) !important;
  max-width: 820px !important;
  max-height: calc(100vh - 48px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}
dialog#addAccount .account-dialog {
  width: 100% !important;
  max-width: 100% !important;
  padding: 22px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 50px) !important;
}
dialog#addAccount .grid.two {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 14px !important;
}
dialog#addAccount .sub-card {
  min-width: 0 !important;
  width: 100% !important;
  padding: 17px !important;
}
dialog#addAccount input,dialog#addAccount select,dialog#addAccount textarea,dialog#addAccount button {
  max-width: 100% !important;
}
dialog#addAccount form {
  min-width: 0 !important;
}
@media (max-width:760px) {
  dialog#addAccount .grid.two {
    grid-template-columns: 1fr !important;
  }
  dialog#addAccount {
    width: min(94vw,560px) !important;
  }
}
/* Light mode defines complete component surfaces instead of inheriting dark ones. */
html[data-theme="light"] {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-alt: #f7f9fc;
  --surface-soft: #fbfcfe;
  --text: #26334a;
  --heading: #111b2e;
  --muted: #687791;
  --line: #dce4ef;
  --line-strong: #c9d4e3;
  --accent: #6251e8;
  --accent-dark: #5442d6;
  --accent-soft: #f0edff;
  --success: #148a69;
  --success-soft: #eaf8f3;
  --danger: #c84555;
  --danger-soft: #fff0f2;
  --warning: #a96b18;
  --warning-soft: #fff7e9;
  color-scheme: light;
}
html[data-theme="light"] body {
  background: #f5f7fb !important;
  color: var(--text);
}
html[data-theme="light"] .content-top {
  background: rgba(255,255,255,.94) !important;
  border-bottom-color: #dde5ef !important;
}
html[data-theme="light"] .top-search {
  background: #f6f8fb !important;
  border-color: #d8e0eb !important;
  color: #78879e;
}
html[data-theme="light"] .top-search input {
  background: transparent !important;
  color: #24324a !important;
}
html[data-theme="light"] .language-switch select,html[data-theme="light"] .theme-toggle {
  background-color: #fff !important;
  border-color: #d5deea !important;
  color: #26334a !important;
}
html[data-theme="light"] .top-profile {
  border-left-color: #dce4ee;
  color: #253149 !important;
}
html[data-theme="light"] .top-avatar {
  background: linear-gradient(145deg,#7664f5,#5845dc);
}
html[data-theme="light"] .page-head h1,html[data-theme="light"] h2,html[data-theme="light"] h3 {
  color: #111b2e;
}
html[data-theme="light"] .dashboard-intro p {
  color: #6d7c94;
}
html[data-theme="light"] .card {
  background: #fff !important;
  border-color: #dce4ef !important;
  box-shadow: 0 12px 32px rgba(24,39,66,.07) !important;
}
html[data-theme="light"] .zonara-stats .stat {
  background: #fff !important;
  border-color: #dce4ef !important;
  box-shadow: 0 6px 18px rgba(24,39,66,.045) !important;
}
html[data-theme="light"] .zonara-stats .stat strong {
  color: #111b2e !important;
}
html[data-theme="light"] .zonara-stats .stat span:not(.stat-icon) {
  color: #53627a !important;
}
html[data-theme="light"] .zonara-stats .stat small {
  color: #148a69 !important;
}
html[data-theme="light"] .quick-grid>a {
  background: #fbfcfe !important;
  border-color: #dce4ef !important;
  color: #172238 !important;
}
html[data-theme="light"] .quick-grid>a:hover {
  background: #f4f7fb !important;
  border-color: #c9d5e5 !important;
}
html[data-theme="light"] .quick-grid small {
  color: #72819a !important;
}
html[data-theme="light"] .domain-card {
  background: #fff !important;
  border-color: #dce4ef !important;
}
html[data-theme="light"] .domain-card:hover {
  background: #fbfcfe !important;
  border-color: #c8d5e5 !important;
}
html[data-theme="light"] .domain-card .actions a,html[data-theme="light"] .actions>a {
  background: #f6f8fb !important;
  border-color: #dce4ef !important;
  color: #46556d !important;
}
html[data-theme="light"] .search-box {
  background: #f7f9fc !important;
  border-color: #d8e1ec !important;
  color: #78879e;
}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select {
  background-color: #fff !important;
  border-color: #ccd7e5 !important;
  color: #1e2c43 !important;
}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder {
  color: #8a98ad !important;
}
html[data-theme="light"] select option {
  background: #fff !important;
  color: #1e2c43 !important;
}
html[data-theme="light"] .button.ghost,html[data-theme="light"] .button.secondary {
  background: #fff !important;
  border-color: #ccd7e5 !important;
  color: #35445c !important;
}
html[data-theme="light"] .table-wrap,html[data-theme="light"] table {
  background: #fff !important;
  border-color: #dce4ef !important;
}
html[data-theme="light"] table thead th {
  background: #f6f8fb !important;
  color: #63728a !important;
  border-color: #dce4ef !important;
}
html[data-theme="light"] table td {
  border-color: #e3e9f1 !important;
  color: #344259;
}
html[data-theme="light"] tbody tr:hover td {
  background: #f8fafc !important;
}
html[data-theme="light"] .pill,html[data-theme="light"] .badge {
  background: #f5f7fa !important;
  border-color: #dce4ef !important;
  color: #5d6c83 !important;
}
html[data-theme="light"] dialog {
  background: #fff !important;
  color: #26334a !important;
  border-color: #d8e1ed !important;
}
html[data-theme="light"] dialog .sub-card {
  background: #f9fbfd !important;
  border-color: #dce4ef !important;
}
html[data-theme="light"] .footer {
  border-color: #dde5ef !important;
  color: #7a889d !important;
}
html[data-theme="light"] .back-button {
  background: #fff !important;
  border-color: #d4deea !important;
  color: #46556d !important;
}
/* Navigation remains dark in both themes for visual continuity. */
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg,#0d1227,#090f1f) !important;
}
/* Branding and user panel */
.brand-mark {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg,#9a7cff 0%,#6a52f5 52%,#20c9e7 100%) !important;
  box-shadow: 0 0 0 2px rgba(130,106,255,.18),0 10px 28px rgba(77,61,220,.30) !important;
}
.brand-mark:before {
  content: "";
  position: absolute;
  left: -13px;
  top: 7px;
  width: 45px;
  height: 11px;
  border: 3px solid rgba(255,255,255,.72);
  border-left: 0;
  border-right: 0;
  border-radius: 50%;
  transform: rotate(-12deg);
  opacity: .75;
}
.brand-mark>span {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 7px rgba(32,20,115,.45);
}
.sidebar {
  min-height: 100vh;
  overflow: hidden;
}
.sidebar-user {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin: 5px 0 0;
  padding: 9px 10px;
  grid-template-columns: minmax(0,1fr) 32px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.sidebar-profile-link {
  min-width: 0;
  overflow: hidden;
}
.sidebar-profile-link>div:last-child {
  min-width: 0;
  overflow: hidden;
}
.sidebar-profile-link strong,.sidebar-profile-link small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-profile-link strong {
  font-size: 12px;
}
.sidebar-profile-link small {
  margin-top: 2px;
  font-size: 9px;
}
.sidebar-user .avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
.logout-link {
  width: 30px;
  height: 30px;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 7px;
}
.logout-link svg {
  width: 16px;
  height: 16px;
}
.sidebar-system {
  flex: 0 0 auto;
}
.profile-language-card {
  padding-bottom: 18px;
}
.profile-language-form {
  display: grid;
  grid-template-columns: minmax(220px,420px) auto;
  align-items: end;
  gap: 12px;
}
.profile-language-form label {
  margin: 0;
}
.profile-language-form button {
  height: 42px;
  margin: 0;
}
@media (max-width:650px) {
  .profile-language-form {
    grid-template-columns: 1fr;
  }
  .profile-language-form button {
    width: 100%;
  }
}
/* Header, sidebar identity and language controls */
.zonara-brand-lockup {
  height: 72px !important;
  padding: 4px 5px 14px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
}
.zonara-brand-lockup img {
  display: block;
  width: 205px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  object-position: left center;
}
.login-brand-image {
  margin: 0 0 26px !important;
  display: block !important;
}
.login-brand-image img {
  display: block;
  width: 230px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
html[data-theme="light"] .login-brand-image img {
  filter: none;
}
html[data-theme="light"] .zonara-login-card {
  background: #fff !important;
  border-color: #d6deea !important;
  box-shadow: 0 28px 70px rgba(31,49,79,.11) !important;
}
html[data-theme="light"] .zonara-login-card h1 {
  color: #111a2c !important;
}
html[data-theme="light"] .zonara-login-card label {
  color: #65758f !important;
}
html[data-theme="light"] .auth-body {
  background: radial-gradient(circle at 76% 17%,rgba(118,89,247,.08),transparent 25%),#f4f7fb !important;
}
/* Center the sidebar identity block without relying on text line-height. */
.sidebar {
  padding-bottom: 12px !important;
}
.sidebar-system {
  min-height: 42px !important;
  padding: 10px 10px !important;
  margin-bottom: 4px !important;
}
.sidebar-user {
  height: 62px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  align-items: center !important;
  border-radius: 9px !important;
}
.sidebar-profile-link {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}
.sidebar-profile-link .avatar {
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
}
.sidebar-profile-link>div:last-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 38px !important;
}
.logout-link {
  align-self: center !important;
}
/* Keep the personal language selector compact in the top bar. */
.profile-language-card {
  padding: 20px 22px !important;
}
.profile-language-form {
  display: grid !important;
  grid-template-columns: minmax(260px,520px) 128px !important;
  align-items: end !important;
  justify-content: start !important;
  gap: 14px !important;
}
.profile-language-form select {
  height: 42px !important;
}
.profile-language-form button {
  width: 128px !important;
  min-width: 128px !important;
  height: 42px !important;
  padding: 0 16px !important;
}
/* Administrative settings */
.settings-layout {
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 18px;
  align-items: start;
}
.settings-menu {
  padding: 20px !important;
}
.settings-menu h2 {
  margin: 0 0 5px;
}
.settings-menu>p {
  margin: 0 0 20px;
}
.settings-menu nav {
  display: grid;
  gap: 5px;
}
.settings-menu nav a,.settings-menu nav span {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.settings-menu nav svg {
  width: 17px;
  height: 17px;
}
.settings-menu nav .active {
  background: var(--accent-soft);
  color: var(--accent-dark) !important;
}
.settings-menu nav .disabled {
  opacity: .58;
}
.settings-content {
  padding: 23px !important;
}
.system-language-form {
  max-width: 720px;
}
.system-language-form label {
  display: block;
}
.system-language-form select {
  height: 43px;
}
.settings-save {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.settings-save button {
  width: auto !important;
  min-width: 120px !important;
  height: 41px !important;
  padding: 0 20px !important;
}
html[data-theme="light"] .settings-menu,html[data-theme="light"] .settings-content {
  background: #fff !important;
}
@media (max-width:850px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-menu nav {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:650px) {
  .profile-language-form {
    grid-template-columns: 1fr !important;
  }
  .profile-language-form button {
    width: 100% !important;
  }
  .settings-menu nav {
    grid-template-columns: 1fr;
  }
  .zonara-brand-lockup img {
    width: 180px;
  }
}
/* Brand icon and settings layout */
.zonara-brand-lockup {
  height: 72px !important;
  padding: 5px 7px 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
}
.zonara-brand-lockup .zonara-z-icon {
  width: 43px !important;
  height: 43px !important;
  object-fit: contain !important;
  flex: 0 0 43px;
}
.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
}
.brand-copy strong {
  font-size: 17px;
  line-height: 20px;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.25px;
}
.brand-copy small {
  margin-top: 3px;
  font-size: 8px;
  line-height: 10px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .15px;
}
.brand-copy em {
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(111,82,246,.2);
  color: #a9b5ff;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}
.login-brand-image {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 27px !important;
}
.login-brand-image .zonara-z-icon {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  flex: 0 0 48px;
}
.login-brand-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.login-brand-copy strong {
  font-size: 19px;
  line-height: 22px;
  font-weight: 850;
  letter-spacing: -.35px;
  color: var(--text);
}
.login-brand-copy small {
  margin-top: 2px;
  font-size: 9px;
  line-height: 12px;
  font-weight: 700;
  color: var(--muted);
}
.login-brand-copy em {
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(111,82,246,.16);
  color: #7371e8;
  font-size: 7px;
  line-height: 10px;
  font-weight: 800;
  font-style: normal;
}
html[data-theme="light"] .login-brand-copy strong {
  color: #172036 !important;
}
html[data-theme="light"] .login-brand-copy small {
  color: #7b8ba8 !important;
}
.settings-single {
  max-width: 900px;
}
.settings-single .settings-content {
  width: 100%;
  min-height: 0;
}
.system-language-form {
  max-width: none !important;
}
.settings-single .settings-save {
  justify-content: flex-start !important;
}
.settings-single .settings-save button {
  min-width: 120px !important;
}
/* Brand proportions and global CMS search */
.zonara-brand-lockup {
  height: 82px !important;
  padding: 11px 10px 14px !important;
  gap: 11px !important;
  border-bottom: 1px solid rgba(145,160,205,.10);
}
.zonara-brand-lockup .zonara-z-icon {
  width: 45px !important;
  height: 45px !important;
  flex-basis: 45px !important;
  border-radius: 12px;
  filter: drop-shadow(0 5px 12px rgba(99,72,246,.28));
}
.brand-copy {
  gap: 0 !important;
  line-height: 1 !important;
}
.brand-copy strong {
  font-size: 17px !important;
  line-height: 20px !important;
  font-weight: 850 !important;
  letter-spacing: -.25px !important;
  color: #f7f8ff !important;
}
.brand-copy small {
  margin-top: 2px !important;
  font-size: 8px !important;
  line-height: 11px !important;
  font-weight: 700 !important;
  color: #91a7d7 !important;
  letter-spacing: .08px !important;
}
.brand-copy em {
  margin-top: 4px !important;
  padding: 2px 6px !important;
  border: 1px solid rgba(129,102,255,.55) !important;
  border-radius: 999px !important;
  background: rgba(101,72,229,.18) !important;
  color: #b8a9ff !important;
  font-size: 7px !important;
  line-height: 10px !important;
  font-weight: 850 !important;
}
html[data-theme="light"] .zonara-brand-lockup {
  border-bottom-color: #e8edf5;
}
html[data-theme="light"] .brand-copy strong {
  color: #172036 !important;
}
html[data-theme="light"] .brand-copy small {
  color: #71809b !important;
}
.login-brand-image {
  gap: 12px !important;
}
.login-brand-image .zonara-z-icon {
  border-radius: 12px;
  filter: drop-shadow(0 6px 14px rgba(99,72,246,.25));
}
.login-brand-copy strong {
  font-size: 18px !important;
  font-weight: 850 !important;
}
.login-brand-copy small {
  font-size: 9px !important;
}
.login-brand-copy em {
  border: 1px solid rgba(129,102,255,.4) !important;
  border-radius: 999px !important;
}
/* Search results act as direct navigation targets. */
.cms-search {
  position: relative;
  z-index: 40;
}
.cms-search-results {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: min(420px,70vw);
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
.cms-search-results[hidden] {
  display: none !important;
}
.cms-search-results a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--text);
}
.cms-search-results a:hover,.cms-search-results a:focus {
  background: var(--accent-soft);
  outline: 0;
}
.cms-search-results strong {
  font-size: 11px;
}
.cms-search-results small {
  font-size: 9px;
  color: var(--muted);
}
.cms-search-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 10px;
}
html[data-theme="dark"] .cms-search-results {
  background: #0d1728;
  border-color: #263650;
}
/* Transparent brand lockup */
.zonara-brand-lockup {
  height: 102px !important;
  min-height: 102px !important;
  padding: 15px 13px 16px !important;
  gap: 13px !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(139,157,204,.13) !important;
  overflow: visible !important;
}
.zonara-brand-lockup .zonara-z-icon {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 5px 13px rgba(83,69,255,.32)) !important;
}
.brand-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.brand-copy strong {
  font-size: 19px !important;
  line-height: 22px !important;
  font-weight: 850 !important;
  letter-spacing: -.35px !important;
  color: #f8f9ff !important;
}
.brand-copy small {
  margin-top: 3px !important;
  font-size: 9px !important;
  line-height: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .05px !important;
  color: #8fa5d3 !important;
  white-space: nowrap !important;
}
.brand-copy em {
  margin-top: 6px !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(126,99,255,.65) !important;
  border-radius: 999px !important;
  background: rgba(100,72,224,.19) !important;
  color: #c0b4ff !important;
  font-size: 7px !important;
  line-height: 10px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: .15px !important;
}
html[data-theme="light"] .zonara-brand-lockup {
  border-bottom-color: #e5eaf3 !important;
}
html[data-theme="light"] .brand-copy strong {
  color: #162037 !important;
}
html[data-theme="light"] .brand-copy small {
  color: #71809b !important;
}
.login-brand-image .zonara-z-icon {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 15px rgba(83,69,255,.28)) !important;
}
.login-brand-image {
  gap: 14px !important;
}
.login-brand-copy strong {
  font-size: 21px !important;
  line-height: 24px !important;
}
.login-brand-copy small {
  margin-top: 3px !important;
  font-size: 9px !important;
}
.login-brand-copy em {
  margin-top: 6px !important;
}
/* Dashboard and control-center surfaces */
:root {
  --z-bg: #07101e;
  --z-panel: #0c1829;
  --z-panel2: #0f1c2f;
  --z-line: #22334e;
  --z-text: #f4f7ff;
  --z-muted: #8fa1c0;
  --z-violet: #7257ff;
  --z-cyan: #45bfff;
}
html[data-theme="dark"] body {
  background: radial-gradient(circle at 78% -10%,rgba(45,76,126,.12),transparent 32%),#07101e !important;
  color: var(--z-text);
}
html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg,#0b1425 0%,#091321 100%) !important;
  border-right: 1px solid #22314a !important;
}
.sidebar {
  width: 268px !important;
  padding: 0 18px 14px !important;
}
.content-shell {
  margin-left: 268px !important;
}
.app-shell {
  grid-template-columns: 268px minmax(0,1fr) !important;
}
.zonara-brand-lockup {
  height: 154px !important;
  min-height: 154px !important;
  padding: 24px 18px 24px !important;
  gap: 17px !important;
  align-items: center !important;
}
.zonara-brand-lockup .zonara-z-icon {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
  filter: drop-shadow(0 9px 18px rgba(64,91,255,.35)) !important;
}
.brand-copy strong {
  font-size: 25px !important;
  line-height: 29px !important;
}
.brand-copy small {
  font-size: 10px !important;
  line-height: 14px !important;
  margin-top: 4px !important;
}
.brand-copy em {
  font-size: 9px !important;
  line-height: 12px !important;
  padding: 3px 8px !important;
  margin-top: 7px !important;
}
.side-nav {
  padding: 16px 0 !important;
  gap: 7px !important;
}
.nav-section {
  margin: 5px 7px 9px !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
}
.side-nav>a {
  min-height: 52px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  gap: 13px !important;
}
.side-nav>a svg {
  width: 21px !important;
  height: 21px !important;
}
.side-nav>a.active {
  background: linear-gradient(90deg,rgba(91,68,210,.27),rgba(71,55,164,.20)) !important;
  border: 1px solid rgba(114,87,255,.38) !important;
  color: #fff !important;
  box-shadow: inset 0 0 22px rgba(114,87,255,.05);
}
.sidebar-system,.sidebar-user {
  border-color: #22334e !important;
}
.sidebar-user {
  background: #0c192a !important;
}
.sidebar-profile-link strong {
  font-size: 11px !important;
}
.sidebar-profile-link small {
  font-size: 9px !important;
}
.content-top {
  height: 82px !important;
  padding: 0 30px !important;
  background: rgba(7,16,30,.88) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #1c2b43 !important;
}
.top-left {
  margin-left: auto;
}
.top-search {
  width: 330px !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #0c1728 !important;
  border-color: #243550 !important;
}
.top-search input {
  font-size: 12px !important;
}
.top-status {
  gap: 13px !important;
}
.language-switch select {
  height: 42px !important;
  background: #0c1728 !important;
  border-color: #243550 !important;
}
.theme-toggle {
  width: 42px !important;
  height: 42px !important;
  border-radius: 9px !important;
  background: #0c1728 !important;
  border: 1px solid #243550 !important;
}
.profile-menu {
  position: relative;
}
.top-profile {
  height: 46px !important;
  min-width: 78px !important;
  padding: 0 11px !important;
  border: 1px solid #243550 !important;
  border-radius: 10px !important;
  background: #0c1728 !important;
  justify-content: space-between !important;
}
.top-avatar {
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(145deg,#476d9c,#28476e) !important;
}
.profile-chevron {
  font-size: 17px;
  color: #a9b9d2;
}
.profile-popover {
  position: absolute;
  right: 0;
  top: 54px;
  width: 230px;
  padding: 7px;
  z-index: 100;
  background: #0c1829;
  border: 1px solid #263853;
  border-radius: 11px;
  box-shadow: 0 22px 55px rgba(0,0,0,.38);
}
.profile-popover[hidden] {
  display: none !important;
}
.profile-popover-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 12px;
  border-bottom: 1px solid #22334e;
  margin-bottom: 5px;
}
.profile-popover-head div {
  display: flex;
  flex-direction: column;
}
.profile-popover-head strong {
  font-size: 11px;
}
.profile-popover-head small {
  font-size: 9px;
  color: #8fa1c0;
  margin-top: 2px;
}
.profile-popover>a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 7px;
  color: #c9d4e7;
  font-size: 10px;
  font-weight: 700;
}
.profile-popover>a:hover {
  background: #13233a;
  color: #fff;
}
.profile-popover>a svg {
  width: 16px;
  height: 16px;
}
.profile-popover .profile-logout {
  color: #ff9b9b;
}
.container {
  max-width: none !important;
  padding: 28px 32px 38px !important;
}
.page-head {
  margin-bottom: 14px !important;
}
.page-head .eyebrow {
  display: none !important;
}
.page-head h1 {
  font-size: 32px !important;
  letter-spacing: -.035em !important;
}
.page-title-row {
  align-items: center !important;
}
.back-button {
  height: 36px !important;
}
.card {
  background: linear-gradient(145deg,#0d192a,#0b1727) !important;
  border: 1px solid #223650 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.card h2 {
  color: #f4f7ff;
}
.muted,.card p {
  color: #8fa1c0;
}
.dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: -6px 0 24px;
}
.dashboard-hero h2 {
  display: none;
}
.dashboard-hero p {
  margin: 0;
  color: #8fa1c0;
  font-size: 14px;
}
.mockup-stats {
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 16px !important;
}
.mockup-stats .stat {
  min-height: 138px !important;
  padding: 22px !important;
  align-items: flex-start !important;
}
.mockup-stats .stat-icon {
  width: 54px !important;
  height: 54px !important;
  border: 0 !important;
}
.mockup-stats .stat-icon.blue {
  background: rgba(47,135,216,.20) !important;
  color: #50b8ff !important;
}
.mockup-stats .stat-icon.green {
  background: rgba(42,189,124,.19) !important;
  color: #45e89c !important;
}
.mockup-stats .stat-icon.purple {
  background: rgba(131,75,218,.20) !important;
  color: #b36aff !important;
}
.mockup-stats .stat-icon.orange {
  background: rgba(218,119,47,.19) !important;
  color: #ff9d49 !important;
}
.mockup-stats .stat>div {
  gap: 4px;
}
.mockup-stats .stat>div>span {
  order: 0 !important;
  font-size: 12px !important;
  color: #9bacc7 !important;
}
.mockup-stats .stat strong {
  order: 1;
  font-size: 28px !important;
  color: #fff !important;
}
.mockup-stats .stat small {
  order: 2;
  color: #38d995 !important;
}
.traffic-card {
  margin-bottom: 20px;
  padding: 22px 24px 18px !important;
}
.traffic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}
.traffic-head h2 {
  margin: 0 0 5px;
  font-size: 17px;
}
.traffic-head p {
  margin: 0;
  font-size: 11px;
}
.traffic-range {
  padding: 10px 13px;
  border: 1px solid #263852;
  border-radius: 9px;
  color: #d7dfed;
  font-size: 10px;
  font-weight: 700;
}
.traffic-chart {
  height: 285px;
  margin-top: 18px;
}
.traffic-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-grid path {
  stroke: #1d2b41;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.traffic-empty {
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #8fa1c0;
}
.traffic-empty strong {
  color: #dce5f5;
  margin-bottom: 6px;
}
.traffic-empty span {
  max-width: 520px;
  font-size: 11px;
}
.domains-panel {
  margin-top: 0 !important;
}
.domain-card,.quick-grid>a,.sub-card {
  background: #0d192a !important;
  border-color: #223650 !important;
}
.domain-card:hover {
  border-color: #3a5275 !important;
}
.actions>a {
  background: #111f33 !important;
  border-color: #263a56 !important;
  color: #b9c8df !important;
}
.profile-grid {
  gap: 18px !important;
}
.profile-grid>.card,.profile-language-card,.account-danger-card {
  padding: 24px !important;
}
.profile-avatar-large {
  width: 58px !important;
  height: 58px !important;
  background: linear-gradient(145deg,#7257ff,#4d37dc) !important;
}
.profile-language-form {
  grid-template-columns: minmax(260px,420px) 140px !important;
}
.profile-language-form button {
  width: 140px !important;
}
.security-status-panel,.sub-card,.delete-account-warning {
  border-radius: 9px !important;
}
input,textarea,select {
  border-radius: 8px !important;
}
button,.button {
  border-radius: 8px !important;
}
html[data-theme="light"] .profile-popover {
  background: #fff;
  border-color: #dce4ef;
}
.html[data-theme="light"] .top-profile {
  background: #fff;
}
@media (max-width:1100px) {
  .mockup-stats {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .top-search {
    width: 260px !important;
  }
}
@media (max-width:820px) {
  .content-shell {
    margin-left: 0 !important;
  }
  .app-shell {
    display: block !important;
  }
  .sidebar {
    width: 268px !important;
  }
  .container {
    padding: 22px 16px 30px !important;
  }
  .content-top {
    padding: 0 16px !important;
  }
  .profile-language-form {
    grid-template-columns: 1fr !important;
  }
  .profile-language-form button {
    width: 100% !important;
  }
}
@media (max-width:600px) {
  .mockup-stats {
    grid-template-columns: 1fr !important;
  }
  .traffic-card {
    padding: 17px !important;
  }
  .traffic-chart {
    height: 210px;
  }
  .traffic-range {
    display: none;
  }
  .page-head h1 {
    font-size: 26px !important;
  }
}
/* Layout constraints and SMTP settings */
.app-shell {
  display: grid !important;
  grid-template-columns: 268px minmax(0,1fr) !important;
  width: 100% !important;
  min-height: 100vh !important;
}
.sidebar {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100vh !important;
  box-sizing: border-box !important;
}
.content-shell {
  margin-left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
.content-top {
  width: 100% !important;
  box-sizing: border-box !important;
}
.container {
  width: 100% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 28px 32px 42px !important;
}
.mockup-stats {
  width: 100% !important;
}
.traffic-card,.domains-panel {
  width: 100% !important;
  box-sizing: border-box !important;
}
.domain-card {
  min-width: 0 !important;
}
.toolbar {
  min-width: 0 !important;
}
.top-search {
  max-width: min(330px,32vw) !important;
}
.settings-stack {
  display: grid;
  gap: 18px;
  max-width: 980px;
}
.settings-content {
  padding: 24px !important;
}
.settings-form {
  max-width: none !important;
}
.settings-grid {
  display: grid;
  grid-template-columns: 2fr .65fr 1fr;
  gap: 13px;
  margin-top: 15px;
}
.settings-grid label {
  margin: 0;
}
.settings-grid label:nth-last-child(-n/**/+2) {
  grid-column: span 1;
}
.toggle-row {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 15px 0 2px !important;
}
.toggle-row input {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.settings-actions button {
  width: auto !important;
  min-width: 130px !important;
}
.smtp-test-form {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.smtp-test-form button {
  width: auto !important;
}
@media (max-width:1100px) {
  .container {
    padding: 24px !important;
  }
  .settings-grid {
    grid-template-columns: 1fr 1fr;
  }
  .top-search {
    max-width: 240px !important;
  }
}
@media (max-width:820px) {
  .app-shell {
    display: block !important;
  }
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    width: 268px !important;
  }
  .content-shell {
    margin-left: 0 !important;
  }
  .container {
    padding: 20px 16px 32px !important;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .content-top {
    height: 68px !important;
  }
  .top-search {
    max-width: 190px !important;
  }
}
@media (max-width:600px) {
  .top-search {
    display: none !important;
  }
  .language-switch {
    display: none !important;
  }
  .settings-content {
    padding: 18px !important;
  }
}
/* Responsive layout stabilization */
:root {
  --sidebar-w: 280px !important;
}
.app-shell {
  display: grid !important;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr) !important;
  min-height: 100vh !important;
  width: 100% !important;
}
.sidebar {
  position: sticky !important;
  inset: 0 auto auto 0 !important;
  width: var(--sidebar-w) !important;
  height: 100vh !important;
  min-height: 0 !important;
  padding: 0 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.zonara-brand-lockup {
  height: auto !important;
  min-height: 128px !important;
  padding: 22px 16px !important;
  gap: 14px !important;
  flex: none !important;
}
.zonara-brand-lockup .zonara-z-icon {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
}
.brand-copy strong {
  font-size: 21px !important;
  line-height: 24px !important;
}
.brand-copy small {
  font-size: 9px !important;
}
.brand-copy em {
  font-size: 8px !important;
  margin-top: 5px !important;
}
.side-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 18px 0 10px !important;
  flex: 0 0 auto !important;
}
.nav-section {
  margin: 9px 8px 7px !important;
}
.side-nav>a {
  min-height: 48px !important;
  height: auto !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  gap: 12px !important;
}
.side-nav>a svg {
  width: 19px !important;
  height: 19px !important;
}
.nav-badge {
  margin-left: auto !important;
}
.sidebar-system {
  margin-top: auto !important;
  flex: none !important;
}
.sidebar-user {
  flex: none !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 34px !important;
  min-height: 62px !important;
  height: auto !important;
  padding: 8px !important;
  margin: 6px 0 0 !important;
}
.sidebar-profile-link {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  height: auto !important;
}
.sidebar-profile-link .avatar {
  width: 38px !important;
  height: 38px !important;
}
.logout-link {
  width: 34px !important;
  height: 34px !important;
}
.content-shell {
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
}
.content-top {
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 clamp(18px,2.2vw,34px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}
.top-left {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.menu-toggle {
  display: none;
}
.top-status {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}
.top-search {
  width: clamp(220px,25vw,340px) !important;
  max-width: none !important;
  height: 42px !important;
}
.language-switch select {
  width: 126px !important;
  height: 42px !important;
  padding-right: 28px !important;
}
.theme-toggle {
  width: 42px !important;
  height: 42px !important;
}
.top-profile {
  height: 42px !important;
  min-width: 76px !important;
}
.profile-popover {
  top: 50px !important;
  width: 240px !important;
}
.container {
  width: 100% !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 28px clamp(20px,2.5vw,40px) 40px !important;
  box-sizing: border-box !important;
}
.footer {
  margin-top: auto !important;
}
/* Profile forms use constrained widths and compact action rows. */
.profile-language-card {
  padding: 22px !important;
}
.profile-language-form {
  grid-template-columns: minmax(240px,420px) auto !important;
  justify-content: start !important;
  align-items: end !important;
  gap: 12px !important;
}
.profile-language-form button {
  width: auto !important;
  min-width: 150px !important;
  height: 42px !important;
  padding: 0 18px !important;
}
.profile-grid {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  align-items: start !important;
}
.profile-grid form>button,.profile-grid form>.button {
  width: auto !important;
  min-width: 150px !important;
}
.profile-grid .card {
  min-width: 0 !important;
}
.card-heading {
  align-items: flex-start !important;
}
@media (max-width:1050px) {
  :root {
    --sidebar-w: 240px !important;
  }
  .zonara-brand-lockup {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .zonara-brand-lockup .zonara-z-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
  .brand-copy strong {
    font-size: 18px !important;
  }
  .top-search {
    width: 220px !important;
  }
  .language-switch select {
    width: 108px !important;
  }
  .profile-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width:820px) {
  .app-shell {
    display: block !important;
  }
  .sidebar {
    position: fixed !important;
    z-index: 120 !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    transform: translateX(-102%);
    transition: transform .2s ease;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .menu-toggle {
    display: inline-grid !important;
  }
  .content-top {
    justify-content: space-between !important;
  }
  .top-left {
    gap: 10px !important;
  }
  .top-search {
    width: min(48vw,280px) !important;
  }
  .language-switch {
    display: none !important;
  }
  .container {
    padding: 22px 16px 32px !important;
  }
  .profile-language-form {
    grid-template-columns: 1fr !important;
  }
  .profile-language-form button {
    width: 100% !important;
  }
  .nav-backdrop.open {
    display: block !important;
  }
}
@media (max-width:560px) {
  .top-search {
    display: none !important;
  }
  .content-top {
    height: 64px !important;
    min-height: 64px !important;
  }
  .theme-toggle {
    display: none !important;
  }
  .profile-grid form>button,.profile-grid form>.button {
    width: 100% !important;
  }
}
/* Monitoring recipients */
.monitor-recipient-form {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 270px;
}
.monitor-recipient-form input {
  min-width: 190px;
  height: 34px;
  margin: 0;
}
.monitor-recipient-form button {
  white-space: nowrap;
}
.domain-alert-grid {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.domain-alert-row {
  display: grid;
  grid-template-columns: minmax(150px,240px) minmax(260px,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.domain-alert-row input {
  margin: 0;
  height: 40px;
}
.domain-alert-row button {
  width: auto !important;
  margin: 0 !important;
}
@media (max-width:800px) {
  .domain-alert-row {
    grid-template-columns: 1fr;
  }
  .domain-alert-row button {
    width: 100% !important;
  }
  .monitor-recipient-form {
    min-width: 220px;
    flex-wrap: wrap;
  }
}
/* Monitoring layout */
.monitoring-layout {
  grid-template-columns: minmax(0,1fr) 340px !important;
  gap: 18px !important;
  align-items: start !important;
}
.monitoring-layout>.card {
  min-width: 0 !important;
}
.monitoring-layout .table-wrap {
  overflow-x: auto !important;
  border-radius: 10px !important;
}
.monitoring-layout table {
  min-width: 760px !important;
}
.monitoring-layout th {
  white-space: nowrap !important;
}
.monitoring-layout td {
  vertical-align: middle !important;
}
.monitor-recipient-form {
  display: grid !important;
  grid-template-columns: minmax(180px,1fr) auto !important;
  gap: 8px !important;
  min-width: 260px !important;
  align-items: center !important;
}
.monitor-recipient-form input {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 11px !important;
}
.monitor-recipient-form .monitor-save {
  height: 38px !important;
  width: auto !important;
  min-width: 82px !important;
  padding: 0 12px !important;
  margin: 0 !important;
}
.monitoring-layout td.nowrap {
  white-space: nowrap !important;
}
.domain-alert-grid {
  gap: 10px !important;
}
.domain-alert-row {
  grid-template-columns: minmax(180px,240px) minmax(280px,1fr) 110px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,.015);
}
.zone-alert-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.zone-alert-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zone-alert-name small {
  font-size: 9px;
  color: var(--muted);
}
.domain-alert-row input {
  width: 100% !important;
}
.domain-alert-row button {
  height: 40px !important;
  min-width: 100px !important;
}
@media (max-width:1050px) {
  .monitoring-layout {
    grid-template-columns: 1fr !important;
  }
  .monitoring-layout table {
    min-width: 720px !important;
  }
}
@media (max-width:700px) {
  .domain-alert-row {
    grid-template-columns: 1fr !important;
  }
  .monitor-recipient-form {
    grid-template-columns: 1fr !important;
  }
  .monitor-recipient-form .monitor-save {
    width: 100% !important;
  }
}
/* Monitoring contrast and recipient fields */
html[data-theme="light"] {
  --bg: #f3f6fb !important;
  --panel: #ffffff !important;
  --panel-2: #f8fafc !important;
  --text: #14213a !important;
  --muted: #61708d !important;
  --line: #d7e0ec !important;
  --accent-soft: rgba(101,72,229,.10) !important;
}
html[data-theme="light"] body,html[data-theme="light"] .content,html[data-theme="light"] main {
  color: #14213a !important;
}
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,
html[data-theme="light"] .card h2,html[data-theme="light"] .card h3,
html[data-theme="light"] .stat strong,html[data-theme="light"] .domain-name,
html[data-theme="light"] table td,html[data-theme="light"] table th {
  color: #14213a !important;
}
html[data-theme="light"] .muted,html[data-theme="light"] .small,
html[data-theme="light"] .card p,html[data-theme="light"] .stat span,
html[data-theme="light"] .domain-meta,html[data-theme="light"] .field-hint {
  color: #61708d !important;
}
html[data-theme="light"] .card,html[data-theme="light"] .stat,
html[data-theme="light"] .domain-row,html[data-theme="light"] .settings-content {
  background: #fff !important;
  border-color: #d7e0ec !important;
  box-shadow: 0 8px 26px rgba(36,55,88,.045) !important;
}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea,
html[data-theme="light"] .top-search {
  background: #fff !important;
  color: #14213a !important;
  border-color: #cbd6e5 !important;
}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder {
  color: #8795ad !important;
  opacity: 1;
}
html[data-theme="light"] .button.ghost,html[data-theme="light"] a.button.ghost,
html[data-theme="light"] .compact {
  color: #243451 !important;
  border-color: #b9c7da !important;
  background: #fff !important;
}
html[data-theme="light"] .traffic-empty strong {
  color: #334563 !important;
}
html[data-theme="light"] .traffic-empty,html[data-theme="light"] .traffic-empty p {
  color: #667897 !important;
}
html[data-theme="light"] .kicker {
  color: #6547e8 !important;
}
html[data-theme="light"] .badge,html[data-theme="light"] .nav-badge {
  color: #5138c9 !important;
}
/* Light theme, profile and SMTP refinements */
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="light"] body {
  background: #f3f6fb !important;
  color: #0f1d33 !important;
}
html[data-theme="light"] .page-title,html[data-theme="light"] .page-title h1,
html[data-theme="light"] .content h1,html[data-theme="light"] .content h2,
html[data-theme="light"] .content h3,html[data-theme="light"] .content strong {
  color: #0f1d33 !important;
}
html[data-theme="light"] .muted,html[data-theme="light"] p.muted,
html[data-theme="light"] .content p,html[data-theme="light"] .content small {
  color: #526582 !important;
}
html[data-theme="light"] label {
  color: #253955 !important;
}
html[data-theme="light"] .alert:not(.error) {
  color: inherit !important;
}
html[data-theme="light"] .topbar {
  background: rgba(255,255,255,.96) !important;
  border-color: #dbe3ee !important;
}
html[data-theme="light"] .top-search,html[data-theme="light"] .top-search input {
  background: #fff !important;
  color: #17253d !important;
}
html[data-theme="light"] .top-search input::placeholder {
  color: #6d7e98 !important;
}
html[data-theme="light"] .lang-switch,html[data-theme="light"] .theme-toggle {
  background: #fff !important;
  color: #17253d !important;
  border-color: #cbd6e5 !important;
}
/* In light mode the profile trigger follows the toolbar surface. */
html[data-theme="light"] .profile-menu>button,html[data-theme="light"] .profile-trigger {
  background: #fff !important;
  color: #17253d !important;
  border: 1px solid #cbd6e5 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .profile-menu>button:hover,html[data-theme="light"] .profile-trigger:hover {
  background: #f6f8fc !important;
}
.profile-caret {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin: -3px 2px 0 4px;
  opacity: .8;
}
.profile-menu[open] .profile-caret {
  transform: rotate(225deg);
  margin-top: 3px;
}
html[data-theme="light"] .profile-dropdown {
  background: #fff !important;
  border-color: #d6dfeb !important;
  box-shadow: 0 18px 42px rgba(35,51,78,.16) !important;
}
html[data-theme="light"] .profile-dropdown a {
  color: #253955 !important;
}
html[data-theme="light"] .profile-dropdown a:hover {
  background: #f2f5fa !important;
  color: #17253d !important;
}
html[data-theme="light"] .profile-dropdown .danger {
  color: #d84b5d !important;
}
/* Keep SMTP save and test actions visually independent. */
.smtp-test-form {
  display: grid !important;
  grid-template-columns: minmax(260px,420px) auto !important;
  gap: 12px !important;
  align-items: end !important;
  margin-top: 16px !important;
  max-width: 650px !important;
}
.smtp-test-form label {
  margin: 0 !important;
}
.smtp-test-form input {
  height: 42px !important;
  margin: 6px 0 0 !important;
  width: 100% !important;
}
.smtp-test-form button {
  height: 42px !important;
  width: auto !important;
  min-width: 150px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  white-space: nowrap !important;
}
@media (max-width:650px) {
  .smtp-test-form {
    grid-template-columns: 1fr !important;
  }
  .smtp-test-form button {
    width: 100% !important;
  }
}
/* Monitoring table sizing */
.profile-chevron {
  display: none !important;
}
.monitoring-layout {
  grid-template-columns: minmax(0,1fr) 330px !important;
}
.monitor-checks-card {
  overflow: hidden !important;
}
.monitor-table-wrap {
  overflow: visible !important;
  border: 0 !important;
}
.monitor-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}
.monitor-table th:nth-child(1) {
  width: 23%;
}
.monitor-table th:nth-child(2) {
  width: 8%;
}
.monitor-table th:nth-child(3) {
  width: 7%;
}
.monitor-table th:nth-child(4) {
  width: 8%;
}
.monitor-table th:nth-child(5) {
  width: 11%;
}
.monitor-table th:nth-child(6) {
  width: 29%;
}
.monitor-table th:nth-child(7) {
  width: 14%;
}
.monitor-table td {
  overflow-wrap: anywhere !important;
}
.monitor-table td:first-child .small {
  word-break: break-word !important;
}
.monitor-table .monitor-recipient-form {
  min-width: 0 !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 6px !important;
}
.monitor-table .monitor-recipient-form .monitor-save {
  width: 100% !important;
}
.monitor-table td.nowrap {
  white-space: normal !important;
}
.monitor-table td.nowrap .inline {
  display: inline-block !important;
  margin: 2px !important;
}
.template-system {
  border-color: rgba(82,211,153,.35) !important;
  color: #52d399 !important;
  background: rgba(82,211,153,.08) !important;
}
@media (max-width:1250px) {
  .monitoring-layout {
    grid-template-columns: 1fr !important;
  }
  .monitor-table thead {
    display: none !important;
  }
  .monitor-table,.monitor-table tbody,.monitor-table tr,.monitor-table td {
    display: block !important;
    width: 100% !important;
  }
  .monitor-table tr {
    display: grid !important;
    grid-template-columns: 1.6fr .7fr .7fr .8fr 1fr 1.7fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }
  .monitor-table td {
    border: 0 !important;
    padding: 4px !important;
    min-width: 0 !important;
  }
}
@media (max-width:850px) {
  .monitor-table tr {
    grid-template-columns: 1fr 1fr !important;
  }
  .monitor-table td:first-child,.monitor-table td:nth-child(6),.monitor-table td:nth-child(7) {
    grid-column: 1/-1 !important;
  }
}
/* Shared light-theme surfaces and monitoring adjustments */
.sidebar .brand-logo,.sidebar .brand img,.brand-logo {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  object-fit: contain !important;
}
.sidebar .brand {
  gap: 14px !important;
}
/* Explicit light surfaces prevent dark component backgrounds from leaking through. */
html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .dashboard-stat,
html[data-theme="light"] .traffic-card,
html[data-theme="light"] .domain-panel,
html[data-theme="light"] .monitor-checks-card,
html[data-theme="light"] .monitoring-layout>.card,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .domain-row,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .profile-card {
  background: #fff !important;
  color: #14213a !important;
  border-color: #d5dfec !important;
}
html[data-theme="light"] .card:before,
html[data-theme="light"] .stat-card:before,
html[data-theme="light"] .dashboard-stat:before {
  opacity: .035 !important;
}
html[data-theme="light"] table,
html[data-theme="light"] tbody,
html[data-theme="light"] tr {
  background: transparent !important;
  color: #14213a !important;
}
html[data-theme="light"] thead,
html[data-theme="light"] th {
  background: #f3f6fa !important;
  color: #435777 !important;
  border-color: #d9e2ee !important;
}
html[data-theme="light"] td {
  color: #172640 !important;
  border-color: #e1e7f0 !important;
}
html[data-theme="light"] .monitor-table tr {
  background: #fff !important;
}
html[data-theme="light"] .monitor-table input,
html[data-theme="light"] .monitoring-layout input,
html[data-theme="light"] .monitoring-layout select,
html[data-theme="light"] .monitoring-layout textarea {
  background: #fff !important;
  color: #172640 !important;
  border-color: #bdcadc !important;
}
html[data-theme="light"] .monitoring-layout input::placeholder,
html[data-theme="light"] .monitoring-layout textarea::placeholder {
  color: #7586a1 !important;
}
html[data-theme="light"] .monitoring-layout .link-button {
  color: #5139d4 !important;
}
html[data-theme="light"] .monitoring-layout .link-button.danger {
  color: #c7354d !important;
}
html[data-theme="light"] .monitor-save {
  background: #6548e8 !important;
  color: #fff !important;
  border-color: #6548e8 !important;
}
html[data-theme="light"] .monitor-save:hover {
  background: #573bd8 !important;
  color: #fff !important;
}
/* Traffic range controls need explicit contrast in light mode. */
html[data-theme="light"] .traffic-card .button,
html[data-theme="light"] .traffic-card button,
html[data-theme="light"] .traffic-range,
html[data-theme="light"] .traffic-period {
  background: #fff !important;
  color: #263956 !important;
  border-color: #9eafc6 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .traffic-card .button *,
html[data-theme="light"] .traffic-card button * {
  color: inherit !important;
  opacity: 1 !important;
}
/* General form controls keep a visible border and text contrast in light mode. */
html[data-theme="light"] .button.secondary,
html[data-theme="light"] button.secondary,
html[data-theme="light"] .button.ghost {
  background: #fff !important;
  color: #243752 !important;
  border-color: #b7c5d8 !important;
}
html[data-theme="light"] button:not(.primary):not(.danger):not(.monitor-save) {
  color: #243752;
}
html[data-theme="light"] code {
  background: #eef3f9 !important;
  color: #334966 !important;
}
/* DNS template scope selector */
.template-system {
  font-weight: 700 !important;
}
/* Shared control palette */
:root {
  --muted: #8ea6ca;
  --line: #243b59;
  --panel: #0d1b2d;
  --panel2: #101f33;
  --field: #09182a;
}
label,.field-label,.muted,.field-hint,.small {
  color: #8ea6ca !important;
}
input,select,textarea {
  background: #09182a !important;
  color: #eef5ff !important;
  border-color: #294667 !important;
}
input::placeholder,textarea::placeholder {
  color: #6f88ad !important;
}
input:focus,select:focus,textarea:focus {
  border-color: #7258ff !important;
  box-shadow: 0 0 0 3px rgba(114,88,255,.13) !important;
}
.monitor-table tbody tr {
  background: #0d1b2d !important;
}
.monitor-table tbody tr:hover {
  background: #10233a !important;
}
.monitor-table th {
  color: #8fa8d0 !important;
}
.monitoring-layout>.card,.monitor-checks-card {
  background: #0d1b2d !important;
}
.monitor-recipient-form input {
  background: #09182a !important;
}
.monitoring-layout .link-button {
  color: #9a86ff !important;
}
.monitoring-layout .link-button.danger {
  color: #ff6f82 !important;
}
.status-up,.status-chip.good {
  background: rgba(38,211,142,.12) !important;
  color: #42e6a3 !important;
  border-color: rgba(66,230,163,.3) !important;
}
.status-down,.status-chip.bad {
  background: rgba(255,89,111,.12) !important;
  color: #ff7387 !important;
  border-color: rgba(255,115,135,.3) !important;
}
.stat:after {
  background: rgba(114,88,255,.08) !important;
}
.template-record-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(9,24,42,.45);
  margin-bottom: 10px;
}
.check-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}
.check-row .check {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0 !important;
}
html[data-theme="light"] {
  --muted: #536b8f;
  --line: #d4dfed;
  --panel: #fff;
  --panel2: #f8faff;
  --field: #fff;
}
html[data-theme="light"] label,
html[data-theme="light"] .field-label,
html[data-theme="light"] .muted,
html[data-theme="light"] .field-hint,
html[data-theme="light"] .small {
  color: #536b8f !important;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #fff !important;
  color: #14243e !important;
  border-color: #b9c9dd !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #7387a5 !important;
}
html[data-theme="light"] .monitor-table tbody tr {
  background: #fff !important;
}
html[data-theme="light"] .monitor-table tbody tr:hover {
  background: #f6f9fd !important;
}
html[data-theme="light"] .monitoring-layout>.card,
html[data-theme="light"] .monitor-checks-card {
  background: #fff !important;
}
html[data-theme="light"] .monitor-table th {
  color: #435b7e !important;
}
html[data-theme="light"] .template-record-row {
  background: #f8faff !important;
}
/* Monitoring, profile and card surfaces */
/* Center the profile avatar independently from popover layout. */
.profile-menu>.top-profile {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  justify-content: center !important;
  border: 1px solid #263d5d !important;
  background: #0b1a2d !important;
  border-radius: 11px !important;
}
.profile-menu>.top-profile .top-avatar {
  margin: 0 !important;
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
}
/* Dark content surfaces use the same navy family throughout the application. */
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .stat,
html:not([data-theme="light"]) .traffic-card,
html:not([data-theme="light"]) .domains-panel,
html:not([data-theme="light"]) .monitor-checks-card,
html:not([data-theme="light"]) .monitoring-layout>.card {
  background: linear-gradient(145deg,#0c1b2e 0%,#0a1728 100%) !important;
  border-color: #263e5d !important;
  color: #eef5ff !important;
}
html:not([data-theme="light"]) .stat:after {
  background: rgba(105,78,255,.12) !important;
}
html:not([data-theme="light"]) .stat span {
  color: #91a9ce !important;
}
html:not([data-theme="light"]) .stat strong {
  color: #f6f9ff !important;
}
/* Monitoring currently renders nine columns and needs explicit width management. */
.monitoring-layout {
  grid-template-columns: minmax(0,1fr) 330px !important;
  gap: 18px !important;
}
.monitor-checks-card {
  min-width: 0 !important;
  overflow: hidden !important;
}
.monitor-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.monitor-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}
.monitor-table th,.monitor-table td {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}
.monitor-table th:nth-child(1) {
  width: 18% !important;
}
.monitor-table th:nth-child(2) {
  width: 7% !important;
}
.monitor-table th:nth-child(3) {
  width: 6% !important;
}
.monitor-table th:nth-child(4) {
  width: 8% !important;
}
.monitor-table th:nth-child(5) {
  width: 9% !important;
}
.monitor-table th:nth-child(6) {
  width: 9% !important;
}
.monitor-table th:nth-child(7) {
  width: 12% !important;
}
.monitor-table th:nth-child(8) {
  width: 18% !important;
}
.monitor-table th:nth-child(9) {
  width: 13% !important;
}
.monitor-table td:first-child strong,.monitor-table td:first-child .small {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.monitor-table td:nth-child(2),.monitor-table td:nth-child(3),.monitor-table td:nth-child(4),.monitor-table td:nth-child(5),.monitor-table td:nth-child(6),.monitor-table td:nth-child(7) {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.monitor-table .monitor-recipient-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.monitor-table .monitor-recipient-form input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.monitor-table .monitor-recipient-form .monitor-save {
  width: 100% !important;
  min-width: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.monitor-table td.nowrap {
  white-space: normal !important;
  overflow: visible !important;
}
.monitor-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 7px !important;
}
.monitor-actions .inline {
  margin: 0 !important;
}
.monitor-actions .link-button {
  padding: 2px 0 !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
/* Reserve enough width for the check table before responsive stacking begins. */
@media (max-width:1500px) {
  .monitoring-layout {
    grid-template-columns: 1fr !important;
  }
  .monitoring-layout>section:last-child {
    max-width: none !important;
  }
}
@media (max-width:1050px) {
  .monitor-table thead {
    display: none !important;
  }
  .monitor-table,.monitor-table tbody {
    display: block !important;
    width: 100% !important;
  }
  .monitor-table tr {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px 14px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    border: 1px solid #263e5d !important;
    border-radius: 11px !important;
    background: #0c1b2e !important;
  }
  .monitor-table td {
    display: block !important;
    width: auto !important;
    border: 0 !important;
    padding: 3px !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .monitor-table td:first-child,.monitor-table td:nth-child(8),.monitor-table td:nth-child(9) {
    grid-column: 1/-1 !important;
  }
  .monitor-table td:before {
    display: block;
    color: #7894bd;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
  }
  .monitor-table td:nth-child(1):before {
    content: "Domain / URL";
  }
  .monitor-table td:nth-child(2):before {
    content: "Status";
  }
  .monitor-table td:nth-child(3):before {
    content: "HTTP";
  }
  .monitor-table td:nth-child(4):before {
    content: "Latenz";
  }
  .monitor-table td:nth-child(5):before {
    content: "30T Uptime";
  }
  .monitor-table td:nth-child(6):before {
    content: "Ø Latenz";
  }
  .monitor-table td:nth-child(7):before {
    content: "Zuletzt";
  }
  .monitor-table td:nth-child(8):before {
    content: "Alert-Empfänger";
  }
  .monitor-table td:nth-child(9):before {
    content: "Aktionen";
  }
}
html[data-theme="light"] .profile-menu>.top-profile {
  background: #fff !important;
  border-color: #cbd8e8 !important;
}
html[data-theme="light"] .stat {
  background: linear-gradient(145deg,#fff,#f8fbff) !important;
  border-color: #d4dfed !important;
}
html[data-theme="light"] .stat:after {
  background: rgba(105,78,255,.07) !important;
}
html[data-theme="light"] .monitor-table tr {
  background: #fff !important;
}
/* Monitoring and account layout */
/* Keep monitoring one-column; the check table and create form should not compete for width. */
.monitoring-layout {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 18px !important;
}
.monitoring-layout>section {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
.monitor-checks-card {
  overflow: visible !important;
}
.monitor-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: 2px;
}
.monitor-table {
  width: 100% !important;
  min-width: 1120px !important;
  table-layout: auto !important;
}
.monitor-table th,.monitor-table td {
  overflow: visible !important;
  text-overflow: clip !important;
}
.monitor-table th:nth-child(1) {
  width: 190px !important;
}
.monitor-table th:nth-child(2) {
  width: 70px !important;
}
.monitor-table th:nth-child(3) {
  width: 65px !important;
}
.monitor-table th:nth-child(4) {
  width: 80px !important;
}
.monitor-table th:nth-child(5) {
  width: 95px !important;
}
.monitor-table th:nth-child(6) {
  width: 90px !important;
}
.monitor-table th:nth-child(7) {
  width: 150px !important;
}
.monitor-table th:nth-child(8) {
  width: 220px !important;
}
.monitor-table th:nth-child(9) {
  width: 190px !important;
}
.monitor-table td:first-child strong,.monitor-table td:first-child .small {
  max-width: 180px !important;
}
.monitor-table .monitor-recipient-form {
  display: grid !important;
  grid-template-columns: minmax(150px,1fr) auto !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 210px !important;
}
.monitor-table .monitor-recipient-form .monitor-save {
  width: auto !important;
  min-width: 86px !important;
  white-space: nowrap !important;
}
.monitor-table td.nowrap {
  white-space: nowrap !important;
  min-width: 180px !important;
}
.monitor-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}
.monitor-actions .inline {
  display: inline-flex !important;
  margin: 0 !important;
}
.monitor-actions .link-button {
  font-size: 11px !important;
  padding: 5px 0 !important;
  white-space: nowrap !important;
}
.monitor-create-card {
  padding-bottom: 20px !important;
}
@media (max-width:700px) {
  .monitor-table {
    min-width: 0 !important;
  }
  .monitor-table thead {
    display: none !important;
  }
  .monitor-table,.monitor-table tbody {
    display: block !important;
  }
  .monitor-table tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .monitor-table td:first-child,.monitor-table td:nth-child(7),.monitor-table td:nth-child(8),.monitor-table td:nth-child(9) {
    grid-column: 1/-1 !important;
  }
  .monitor-table .monitor-recipient-form {
    grid-template-columns: 1fr !important;
  }
  .monitor-table .monitor-recipient-form .monitor-save {
    width: 100% !important;
  }
  .monitor-actions {
    flex-wrap: wrap !important;
  }
}
/* Account rows use the shared navy surface. */
html:not([data-theme="light"]) .account-row,html:not([data-theme="light"]) .share-row {
  background: linear-gradient(145deg,#0c1b2e,#0a1728) !important;
  border-color: #263e5d !important;
}
html:not([data-theme="light"]) .account-row:hover,html:not([data-theme="light"]) .share-row:hover {
  background: #10233a !important;
  border-color: #315178 !important;
}
html:not([data-theme="light"]) .account-badge {
  background: rgba(111,82,255,.15) !important;
  color: #a792ff !important;
}
html[data-theme="light"] .account-row,html[data-theme="light"] .share-row {
  background: #fff !important;
  border-color: #d4dfed !important;
}
/* User and system-log surfaces */
.user-row-v44,
.user-list .user-row-v44,
.audit-table tbody tr,
.log-table tbody tr,
.system-log-row,
.audit-log-row {
  background: #0b1a2c !important;
  border-color: #213b5a !important;
  color: #eef5ff !important;
}
.user-row-v44:hover,
.audit-table tbody tr:hover,
.log-table tbody tr:hover,
.system-log-row:hover,
.audit-log-row:hover {
  background: #0e2239 !important;
}
.user-avatar {
  background: linear-gradient(145deg,#263d68,#7258ff) !important;
  color: #fff !important;
}
.user-primary-text strong,
.audit-table td,
.log-table td {
  color: #eef5ff !important;
}
.user-primary-text span,
.meta-label {
  color: #89a4cb !important;
}
.users-card,.audit-card,.logs-card {
  background: #0d1b2d !important;
  border-color: #294667 !important;
}
.audit-table thead th,.log-table thead th {
  background: #10233a !important;
  color: #91add7 !important;
  border-color: #294667 !important;
}
.audit-table code,.log-table code {
  background: #09182a !important;
  color: #a9c5ef !important;
  border: 1px solid #294667 !important;
}
html[data-theme="light"] .user-row-v44,
html[data-theme="light"] .user-list .user-row-v44,
html[data-theme="light"] .audit-table tbody tr,
html[data-theme="light"] .log-table tbody tr,
html[data-theme="light"] .system-log-row,
html[data-theme="light"] .audit-log-row {
  background: #f8faff !important;
  border-color: #d4dfed !important;
  color: #14243e !important;
}
html[data-theme="light"] .user-row-v44:hover,
html[data-theme="light"] .audit-table tbody tr:hover,
html[data-theme="light"] .log-table tbody tr:hover {
  background: #f1f6fc !important;
}
html[data-theme="light"] .user-primary-text strong,
html[data-theme="light"] .audit-table td,
html[data-theme="light"] .log-table td {
  color: #14243e !important;
}
html[data-theme="light"] .users-card,
html[data-theme="light"] .audit-card,
html[data-theme="light"] .logs-card {
  background: #fff !important;
  border-color: #d4dfed !important;
}
html[data-theme="light"] .audit-table thead th,
html[data-theme="light"] .log-table thead th {
  background: #f1f6fc !important;
  color: #435b7e !important;
  border-color: #d4dfed !important;
}
/* Monitoring form and audit-table selectors */
/* The creation form is a full-width block below the check table. */
.monitoring-layout {
  display: block !important;
}
.monitoring-layout>.monitor-checks-card {
  width: 100% !important;
  margin: 0 !important;
}
.monitor-create-card {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}
.monitor-create-form-v2 {
  display: block !important;
  width: 100% !important;
}
.monitor-create-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(170px,1fr)) !important;
  gap: 14px 16px !important;
  align-items: start !important;
  width: 100% !important;
}
.monitor-create-grid-v2>label {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.monitor-create-grid-v2 input,.monitor-create-grid-v2 select,.monitor-create-grid-v2 textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.monitor-create-grid-v2 textarea {
  min-height: 96px !important;
  resize: vertical !important;
}
.monitor-url-field {
  grid-column: span 2 !important;
}
.monitor-recipient-create {
  grid-column: span 2 !important;
}
.monitor-notification-events {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 16px 0 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #294667 !important;
  border-radius: 10px !important;
  background: #09182a !important;
}
.monitor-notification-events legend {
  padding: 0 7px !important;
  color: #8ea6ca !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.monitor-notification-events .check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
}
.monitor-notification-events input {
  width: auto !important;
}
.monitor-create-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}
.monitor-create-actions button {
  width: auto !important;
  min-width: 150px !important;
  margin: 0 !important;
}
/* Preserve readable action labels when the checks table is narrow. */
.monitor-table-wrap {
  overflow-x: auto !important;
}
.monitor-table {
  min-width: 1180px !important;
}
.monitor-table th,.monitor-table td {
  white-space: nowrap !important;
}
.monitor-table td:first-child {
  white-space: normal !important;
}
.monitor-table td:nth-child(8) {
  min-width: 250px !important;
}
.monitor-table td:nth-child(9) {
  min-width: 190px !important;
}
.monitor-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
.monitor-actions .link-button {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Audit tables use explicit component selectors instead of generic table colors. */
html:not([data-theme="light"]) .audit-card,
html:not([data-theme="light"]) .logs-card,
html:not([data-theme="light"]) .audit-table-wrap {
  background: #0d1b2d !important;
  border-color: #294667 !important;
}
html:not([data-theme="light"]) .audit-table {
  background: #0d1b2d !important;
}
html:not([data-theme="light"]) .audit-table thead,
html:not([data-theme="light"]) .audit-table thead tr,
html:not([data-theme="light"]) .audit-table th {
  background: #10233a !important;
  color: #91add7 !important;
  border-color: #294667 !important;
}
html:not([data-theme="light"]) .audit-table tbody,
html:not([data-theme="light"]) .audit-table tbody tr,
html:not([data-theme="light"]) .audit-table td {
  background: #0b1a2c !important;
  color: #eef5ff !important;
  border-color: #213b5a !important;
}
html:not([data-theme="light"]) .audit-table tbody tr:hover,
html:not([data-theme="light"]) .audit-table tbody tr:hover td {
  background: #0e2239 !important;
}
html:not([data-theme="light"]) .audit-detail {
  background: #09182a !important;
  color: #b8cdef !important;
  border-color: #294667 !important;
}
/* User rows use component-specific surfaces to avoid inherited neutral grays. */
html:not([data-theme="light"]) .users-layout .users-card {
  background: #0d1b2d !important;
  border-color: #294667 !important;
}
html:not([data-theme="light"]) .users-layout .user-list {
  background: transparent !important;
}
html:not([data-theme="light"]) .users-layout .user-row-v44 {
  background: #0b1a2c !important;
  border: 1px solid #213b5a !important;
}
html:not([data-theme="light"]) .users-layout .user-row-v44:hover {
  background: #0e2239 !important;
  border-color: #315178 !important;
}
html:not([data-theme="light"]) .users-layout select {
  background: #09182a !important;
  border-color: #294667 !important;
  color: #eef5ff !important;
}
/* Light-theme counterparts */
html[data-theme="light"] .monitor-notification-events {
  background: #f8faff !important;
  border-color: #d4dfed !important;
}
html[data-theme="light"] .monitor-notification-events legend {
  color: #536b8f !important;
}
html[data-theme="light"] .audit-card,
html[data-theme="light"] .logs-card,
html[data-theme="light"] .audit-table-wrap,
html[data-theme="light"] .audit-table {
  background: #fff !important;
  border-color: #d4dfed !important;
}
html[data-theme="light"] .audit-table thead,
html[data-theme="light"] .audit-table thead tr,
html[data-theme="light"] .audit-table th {
  background: #f1f6fc !important;
  color: #435b7e !important;
  border-color: #d4dfed !important;
}
html[data-theme="light"] .audit-table tbody,
html[data-theme="light"] .audit-table tbody tr,
html[data-theme="light"] .audit-table td {
  background: #fff !important;
  color: #14243e !important;
  border-color: #e0e7f0 !important;
}
html[data-theme="light"] .audit-table tbody tr:hover,
html[data-theme="light"] .audit-table tbody tr:hover td {
  background: #f6f9fd !important;
}
@media (max-width:1150px) {
  .monitor-create-grid-v2 {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .monitor-url-field,.monitor-recipient-create {
    grid-column: span 2 !important;
  }
}
@media (max-width:650px) {
  .monitor-create-grid-v2 {
    grid-template-columns: 1fr !important;
  }
  .monitor-url-field,.monitor-recipient-create {
    grid-column: auto !important;
  }
  .monitor-notification-events {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}
/* System Health and Backup/Restore surfaces */
html:not([data-theme="light"]) .health-card,
html:not([data-theme="light"]) .backup-card,
html:not([data-theme="light"]) .health-table-wrap,
html:not([data-theme="light"]) .backup-table-wrap {
  background: #0d1b2d !important;
  border-color: #294667 !important;
  color: #eef5ff !important;
}
html:not([data-theme="light"]) .health-table,
html:not([data-theme="light"]) .backup-table {
  background: #0d1b2d !important;
  color: #eef5ff !important;
}
html:not([data-theme="light"]) .health-table thead,
html:not([data-theme="light"]) .health-table thead tr,
html:not([data-theme="light"]) .health-table th,
html:not([data-theme="light"]) .backup-table thead,
html:not([data-theme="light"]) .backup-table thead tr,
html:not([data-theme="light"]) .backup-table th {
  background: #10233a !important;
  color: #91add7 !important;
  border-color: #294667 !important;
}
html:not([data-theme="light"]) .health-table tbody,
html:not([data-theme="light"]) .health-table tbody tr,
html:not([data-theme="light"]) .health-table td,
html:not([data-theme="light"]) .backup-table tbody,
html:not([data-theme="light"]) .backup-table tbody tr,
html:not([data-theme="light"]) .backup-table td {
  background: #0b1a2c !important;
  color: #eef5ff !important;
  border-color: #213b5a !important;
}
html:not([data-theme="light"]) .health-table tbody tr:hover,
html:not([data-theme="light"]) .health-table tbody tr:hover td,
html:not([data-theme="light"]) .backup-table tbody tr:hover,
html:not([data-theme="light"]) .backup-table tbody tr:hover td {
  background: #0e2239 !important;
}
html:not([data-theme="light"]) .backup-card .card-heading,
html:not([data-theme="light"]) .health-card .card-heading {
  background: transparent !important;
  color: #eef5ff !important;
}
html:not([data-theme="light"]) .backup-card .muted,
html:not([data-theme="light"]) .health-card .muted {
  color: #8ea6ca !important;
}
/* Light-theme counterparts */
html[data-theme="light"] .health-card,
html[data-theme="light"] .backup-card,
html[data-theme="light"] .health-table-wrap,
html[data-theme="light"] .backup-table-wrap,
html[data-theme="light"] .health-table,
html[data-theme="light"] .backup-table {
  background: #fff !important;
  border-color: #d4dfed !important;
  color: #14243e !important;
}
html[data-theme="light"] .health-table thead,
html[data-theme="light"] .health-table thead tr,
html[data-theme="light"] .health-table th,
html[data-theme="light"] .backup-table thead,
html[data-theme="light"] .backup-table thead tr,
html[data-theme="light"] .backup-table th {
  background: #f1f6fc !important;
  color: #435b7e !important;
  border-color: #d4dfed !important;
}
html[data-theme="light"] .health-table tbody,
html[data-theme="light"] .health-table tbody tr,
html[data-theme="light"] .health-table td,
html[data-theme="light"] .backup-table tbody,
html[data-theme="light"] .backup-table tbody tr,
html[data-theme="light"] .backup-table td {
  background: #fff !important;
  color: #14243e !important;
  border-color: #e0e7f0 !important;
}