:root {
  --bg0: #05070b;
  --bg1: rgba(10, 16, 24, 0.75);
  --bg2: rgba(18, 28, 42, 0.55);
  --line: rgba(120, 160, 220, 0.16);
  --line2: rgba(120, 160, 220, 0.10);
  --txt: rgba(240, 246, 255, 0.92);
  --muted: rgba(240, 246, 255, 0.62);
  --muted2: rgba(240, 246, 255, 0.42);
  --accent: #57f2c2;
  --accent2: #2fe1ff;
  --warn: #ffcf5a;
  --danger: #ff4b7d;
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
  --radius: 18px;
  --radius2: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  
  --surface: rgba(10, 16, 24, 0.35);
  --surface2: rgba(10, 16, 24, 0.20);
  --surface3: rgba(18, 28, 42, 0.55);
  --surfaceHover: rgba(10, 16, 24, 0.55);
  --borderSoft: rgba(140, 190, 255, 0.14);
  --borderMed: rgba(140, 190, 255, 0.18);
  --topbarBg: linear-gradient(to bottom, rgba(5, 7, 11, 0.85), rgba(5, 7, 11, 0.55));
  --panelGrad: linear-gradient(180deg, rgba(18, 28, 42, 0.55), rgba(10, 16, 24, 0.35));
  --panelHeadBg: rgba(10, 16, 24, 0.25);
  --inputBg: rgba(10, 16, 24, 0.35);
  --inputBorder: rgba(140, 190, 255, 0.14);
  --inputFocusBorder: rgba(87, 242, 194, 0.45);
  --bodyGrad: radial-gradient(1200px 700px at 70% 0%, rgba(87, 242, 194, 0.18), transparent 45%),
    radial-gradient(1000px 600px at 15% 10%, rgba(47, 225, 255, 0.12), transparent 45%),
    radial-gradient(1200px 900px at 40% 100%, rgba(255, 75, 125, 0.07), transparent 50%),
    var(--bg0);
  --gridOpacity: 0.8;
  --vignetteGrad: radial-gradient(60% 45% at 50% 30%, transparent 0%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.85) 100%);
  --alertDangerBg: rgba(255, 75, 125, 0.08);
  --alertDangerBorder: rgba(255, 75, 125, 0.22);
  --alertDangerColor: rgba(255, 140, 170, 0.95);
  --alertSuccessBg: rgba(87, 242, 194, 0.06);
  --alertSuccessBorder: rgba(87, 242, 194, 0.22);
  --alertSuccessColor: rgba(87, 242, 194, 0.95);
  --footerBorder: rgba(120, 160, 220, 0.10);
  --footerBg: rgba(5, 7, 11, 0.55);
}

[data-theme="light"] {
  --bg0: #f0f2f5;
  --bg1: rgba(255, 255, 255, 0.85);
  --bg2: rgba(240, 243, 248, 0.75);
  --line: rgba(60, 80, 120, 0.14);
  --line2: rgba(60, 80, 120, 0.08);
  --txt: rgba(20, 28, 40, 0.92);
  --muted: rgba(20, 28, 40, 0.55);
  --muted2: rgba(20, 28, 40, 0.38);
  --accent: #0fa87a;
  --accent2: #0891b2;
  --warn: #d97706;
  --danger: #e11d48;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  --surface: rgba(255, 255, 255, 0.7);
  --surface2: rgba(255, 255, 255, 0.5);
  --surface3: rgba(240, 243, 248, 0.85);
  --surfaceHover: rgba(255, 255, 255, 0.9);
  --borderSoft: rgba(60, 80, 120, 0.12);
  --borderMed: rgba(60, 80, 120, 0.18);
  --topbarBg: linear-gradient(to bottom, #ffffff, #f8fafce6);
  --panelGrad: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.85));
  --panelHeadBg: rgba(245, 247, 250, 0.8);
  --inputBg: rgba(255, 255, 255, 0.8);
  --inputBorder: rgba(60, 80, 120, 0.18);
  --inputFocusBorder: rgba(15, 168, 122, 0.5);
  --bodyGrad: radial-gradient(1200px 700px at 70% 0%, rgba(15, 168, 122, 0.08), transparent 45%),
    radial-gradient(1000px 600px at 15% 10%, rgba(8, 145, 178, 0.06), transparent 45%),
    radial-gradient(1200px 900px at 40% 100%, rgba(225, 29, 72, 0.03), transparent 50%),
    var(--bg0);
  --gridOpacity: 0.3;
  --vignetteGrad: radial-gradient(60% 45% at 50% 30%, transparent 0%, rgba(255, 255, 255, 0.2) 65%, rgba(240, 242, 245, 0.5) 100%);
  --alertDangerBg: rgba(225, 29, 72, 0.06);
  --alertDangerBorder: rgba(225, 29, 72, 0.18);
  --alertDangerColor: #be123c;
  --alertSuccessBg: rgba(15, 168, 122, 0.06);
  --alertSuccessBorder: rgba(15, 168, 122, 0.18);
  --alertSuccessColor: #047857;
  --footerBorder: rgba(60, 80, 120, 0.12);
  --footerBg: linear-gradient(to top, #f0f2f5, rgba(248, 250, 252, 0.95));
}

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vtFadeOut 150ms ease-out;
}

::view-transition-new(root) {
  animation: vtFadeIn 200ms ease-in;
}

@keyframes vtFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vtFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shellFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

html,
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--txt);
  background: var(--bodyGrad);
  font-family: var(--sans);
}

a {
  color: inherit;
  text-decoration: none;
}

.bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--borderSoft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--borderSoft) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(65% 55% at 50% 35%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.1) 65%, transparent 85%);
  opacity: var(--gridOpacity);
}

.vignette {
  position: absolute;
  inset: -10%;
  background: var(--vignetteGrad);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--line2);
  background: var(--topbarBg);
  backdrop-filter: blur(16px) saturate(1.4);
}

.topbarInner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 56px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brandMark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(87, 242, 194, 0.20), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(47, 225, 255, 0.14), transparent 55%),
    rgba(8, 14, 22, 0.6);
  border: 1px solid rgba(87, 242, 194, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3) inset,
    0 2px 8px rgba(0, 0, 0, 0.3);
}

.brandMark svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.brandName {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;
}

.brandTag {
  font-size: 10px;
  color: var(--muted2);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.brandSep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}

.brandStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.brandStatusDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: statusPulse 2.5s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--accent); }
  50% { opacity: 0.5; box-shadow: 0 0 2px var(--accent); }
}

.topnav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.topbarRight {
  display: flex;
  align-items: center;
  gap: 6px;
}

.navSep {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}

.navLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.navIcn {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.navLink:hover {
  color: var(--txt);
  background: var(--surface);
  border-color: var(--borderSoft);
}

.navLink:hover .navIcn {
  opacity: 1;
}

.navActive {
  color: var(--accent);
  background: rgba(15, 168, 122, 0.08);
  border-color: rgba(15, 168, 122, 0.2);
}

.navActive .navIcn {
  opacity: 1;
}

.navDanger {
  color: var(--muted2);
}

.navDanger:hover {
  color: var(--danger);
  background: rgba(255, 75, 125, 0.06);
  border-color: rgba(255, 75, 125, 0.14);
}

.navLink.muted {
  color: var(--muted2);
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px 22px 48px;
  flex: 1;
  width: 100%;
  animation: shellFadeIn 250ms ease-out;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: start;
}

.heroPanel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panelGrad);
  box-shadow: var(--shadow);
  padding: 26px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--borderSoft);
  background: var(--surface);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.title {
  margin: 14px 0 8px;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.subtitle {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.ctaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  appearance: none;
  border: 1px solid var(--borderMed);
  background: var(--surface);
  color: var(--txt);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn:hover {
  border-color: var(--accent);
  background: var(--surfaceHover);
}

.btn.primary {
  border-color: rgba(87, 242, 194, 0.35);
  background: linear-gradient(135deg, rgba(87, 242, 194, 0.16), rgba(47, 225, 255, 0.10));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.btn.primary:hover {
  border-color: rgba(87, 242, 194, 0.55);
}

.btn.ghost {
  background: transparent;
}

.statusRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--borderSoft);
  background: var(--surface2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.pillValue {
  color: var(--txt);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(240, 246, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.dot.ok {
  background: rgba(87, 242, 194, 0.85);
}

.dot.warn {
  background: rgba(255, 207, 90, 0.85);
}

.dot.idle {
  background: rgba(170, 190, 220, 0.55);
}

.rightRail {
  display: grid;
  gap: 14px;
}

.panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panelGrad);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panelHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line2);
  background: var(--panelHeadBg);
}

.panelTitle {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.panelMeta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.panelBody {
  padding: 10px 12px 14px;
}

.row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: var(--surface2);
}

.row + .row {
  margin-top: 10px;
}

.row.dim {
  opacity: 0.7;
}

.sig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.sigDot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 75, 125, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.sigDot.ok {
  background: rgba(87, 242, 194, 0.9);
}

.sigDot.warn {
  background: rgba(255, 207, 90, 0.9);
}

.sigDot.idle {
  background: rgba(170, 190, 220, 0.65);
}

.rowText {
  color: var(--txt);
  font-size: 14px;
}

.rowTime {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
}

.bars {
  display: grid;
  gap: 12px;
}

.barRow {
  display: grid;
  grid-template-columns: 64px 1fr 56px;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: var(--surface2);
}

.barLabel {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.barTrack {
  height: 10px;
  border-radius: 99px;
  background: var(--line);
  border: 1px solid var(--line2);
  overflow: hidden;
}

.barFill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.barFill.warn {
  background: linear-gradient(90deg, var(--warn), var(--danger));
}

.barValue {
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.authWrap {
  display: grid;
  place-items: center;
  padding: 10px 0 30px;
  flex: 1;
}

.authPanel {
  width: min(520px, 100%);
}

.form {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
}

.label {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}

.input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--inputBorder);
  background: var(--inputBg);
  color: var(--txt);
  outline: none;
}

.input::placeholder {
  color: var(--muted2);
}

.input:focus {
  border-color: var(--inputFocusBorder);
  box-shadow: 0 0 0 3px rgba(15, 168, 122, 0.12);
}

.inputMasked {
  -webkit-text-security: disc;
  text-security: disc;
}

.formRow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.fineprint {
  margin-top: 6px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.55;
}

.alert {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 6px;
}

.alertDanger {
  border: 1px solid var(--alertDangerBorder);
  background: var(--alertDangerBg);
  color: var(--alertDangerColor);
}

.alertSuccess {
  border: 1px solid var(--alertSuccessBorder);
  background: var(--alertSuccessBg);
  color: var(--alertSuccessColor);
}

.dashWrap {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding: 10px 0 30px;
}

.dashPanel {
  width: min(580px, 100%);
}

.dashContent {
  display: grid;
  gap: 18px;
  padding: 8px 0;
}

.dashMessage {
  text-align: center;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.dashIcon {
  color: var(--accent);
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 16px rgba(87, 242, 194, 0.25));
}

.dashTitle {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dashSub {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.dashSub.muted {
  color: var(--muted2);
  font-size: 13px;
}

.dashActions {
  justify-content: center;
}

.navLink.active {
  border-color: rgba(87, 242, 194, 0.30);
  color: var(--txt);
}

.navLink.danger {
  border-color: rgba(255, 75, 125, 0.22);
  color: var(--danger);
}

.navLink.danger:hover {
  border-color: rgba(255, 75, 125, 0.45);
  background: rgba(255, 75, 125, 0.08);
}

.logoutForm {
  display: inline;
  margin: 0;
  padding: 0;
}

.logoutBtn {
  font: inherit;
}

.dashLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.akiaFormPanel {
  position: sticky;
  top: 100px;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  padding-right: 38px;
  cursor: pointer;
}

.select option {
  background: var(--bg0);
  color: var(--txt);
}

.akiaList {
  display: grid;
  gap: 10px;
}

.akiaCard {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--borderSoft);
  background: var(--surface2);
  display: grid;
  gap: 8px;
}

.akiaCardTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.akiaRegion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--txt);
}

.akiaKey {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  word-break: break-all;
}

.akiaDate {
  font-size: 11px;
  color: var(--muted2);
  font-family: var(--mono);
}

.akiaDeleteForm {
  margin: 0;
  padding: 0;
}

.btnSmall {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
}

.btn.danger {
  border-color: rgba(255, 75, 125, 0.25);
  color: var(--danger);
  background: rgba(255, 75, 125, 0.06);
}

.btn.danger:hover {
  border-color: rgba(255, 75, 125, 0.50);
  background: rgba(255, 75, 125, 0.12);
}

.emptyState {
  text-align: center;
  padding: 24px 12px;
  display: grid;
  gap: 6px;
  justify-items: center;
}

.emptyIcon {
  color: var(--muted2);
  margin-bottom: 4px;
}

.emptyText {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.emptyHint {
  margin: 0;
  font-size: 12px;
  color: var(--muted2);
}

.akiaCardBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.statsHeader {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.statsHeaderInfo {
  display: grid;
  gap: 2px;
}

.statsTitle {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.statsAkia {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.statsAlert {
  margin-bottom: 18px;
}

.errorList {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
  font-size: 12px;
  line-height: 1.6;
}

.statsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.statsPanel {
  min-width: 0;
}

.statsPanelWide {
  grid-column: 1 / -1;
}

.statRows {
  display: grid;
  gap: 8px;
}

.statRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--surface2);
}

.statLabel {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.statValue {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt);
}

.statPercent {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  min-width: 36px;
  text-align: right;
}

.barTrackWide {
  width: 120px;
  height: 8px;
  border-radius: 99px;
  background: var(--line);
  border: 1px solid var(--line2);
  overflow: hidden;
}

.identityList {
  display: grid;
  gap: 8px;
}

.identityCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--borderSoft);
  background: var(--surface2);
}

.identityTop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.identityName {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identityStatus {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.identityOk {
  background: rgba(87, 242, 194, 0.10);
  color: rgba(87, 242, 194, 0.90);
  border: 1px solid rgba(87, 242, 194, 0.20);
}

.identityWarn {
  background: rgba(255, 207, 90, 0.10);
  color: rgba(255, 207, 90, 0.90);
  border: 1px solid rgba(255, 207, 90, 0.20);
}

.sendTable {
  display: grid;
  gap: 4px;
}

.sendTableHead {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line2);
}

.sendTh {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sendTableRow {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface2);
}

.sendTd {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--txt);
}

.sendWarn {
  color: var(--warn);
}

.sendDanger {
  color: var(--danger);
}

.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  cursor: help;
  color: var(--muted2);
}

.tooltip:hover {
  color: var(--accent);
}

.tooltipIcon {
  display: block;
}

.tipBox {
  position: fixed;
  width: 300px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--borderMed);
  background: rgba(10, 16, 24, 0.97);
  backdrop-filter: blur(14px);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

.tipBox.visible {
  opacity: 1;
}

.captcha {
  margin-top: 2px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--borderSoft);
  background: var(--surface2);
}

.captchaTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.captchaBtn {
  padding: 10px 12px;
  border-radius: 12px;
}

.captchaRow {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 12px;
  align-items: stretch;
}

.captchaArt {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--borderMed);
  background: var(--surface3);
  overflow: hidden;
  min-height: 78px;
  display: grid;
  place-items: center;
}

.captchaNoise {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(87, 242, 194, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47, 225, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(255, 207, 90, 0.12), transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(255, 75, 125, 0.12), transparent 40%);
  background-size: 22px 22px, 18px 18px, auto, auto;
  opacity: 0.95;
  filter: blur(0.2px);
}

.captchaCode {
  position: relative;
  font-family: var(--mono);
  letter-spacing: 0.28em;
  font-weight: 600;
  font-size: 18px;
  color: var(--txt);
  transform: rotate(-3deg);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 10px 28px rgba(0, 0, 0, 0.55);
  user-select: none;
}

.captchaField {
  margin: 0;
}

.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--footerBorder);
  padding: 18px 22px;
  color: var(--muted);
}

.footerInner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
}

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .dashLayout {
    grid-template-columns: 1fr;
  }

  .akiaFormPanel {
    position: static;
  }

  .statsGrid {
    grid-template-columns: 1fr;
  }

  .statsPanelWide {
    grid-column: auto;
  }

  .title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .shell {
    padding: 24px 16px 36px;
  }

  .statsHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .statsTitle {
    font-size: 20px;
  }

  .sendTableHead,
  .sendTableRow {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    font-size: 10px;
    gap: 4px;
    padding: 6px 8px;
  }

  .sendTh,
  .sendTd {
    font-size: 10px;
  }

  .idCard {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }

  .idCardLeft {
    min-width: 0;
    width: 100%;
  }

  .idCardInfo {
    flex: 1;
    min-width: 0;
  }

  .idCardName {
    white-space: normal;
    word-break: break-all;
    flex-wrap: wrap;
  }

  .idCardActions {
    display: flex;
    gap: 6px;
    width: 100%;
    flex-shrink: unset;
  }

  .idCardActions > a.btn,
  .idCardActions > .idDeleteForm {
    flex: 1;
    min-width: 0;
  }

  .idCardActions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    padding: 7px 10px;
  }

  .identityCard {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .idCard .formRow,
  .identityCard .formRow {
    width: 100%;
  }

  .akiaCardBottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .akiaCardBottom .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .infoTableRow {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .infoTableHead {
    display: none;
  }

  .infoTableCell:first-child {
    font-weight: 600;
    font-size: 12px;
  }

  .infoPanel .panelBody {
    padding: 14px 16px 18px;
  }

  .panelBody {
    padding: 10px 10px 14px;
  }

  .panelHead {
    padding: 12px 12px 10px;
  }
}

@media (max-width: 640px) {
  .topbarInner {
    padding: 0 14px;
    gap: 8px;
  }

  .brandName {
    font-size: 14px;
  }

  .brandTag {
    display: none;
  }

  .brandStatus {
    display: none;
  }

  .brandSep {
    display: none;
  }

  .navLink {
    padding: 6px 8px;
    font-size: 10px;
    gap: 4px;
  }

  .navIcn {
    width: 12px;
    height: 12px;
  }

  .navSep {
    display: none;
  }

  .sendTableHead,
  .sendTableRow {
    grid-template-columns: 1.8fr 1fr 1fr;
    font-size: 10px;
  }

  .sendTableHead > :nth-child(4),
  .sendTableHead > :nth-child(5),
  .sendTableRow > :nth-child(4),
  .sendTableRow > :nth-child(5) {
    display: none;
  }

  .formRow {
    flex-direction: column;
  }

  .formRow .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .captchaRow {
    grid-template-columns: 1fr;
  }

  .authPanel {
    width: 100%;
  }

  .cfPage {
    max-width: 100%;
  }

  .dnsRecordRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .dnsRecordName,
  .dnsRecordValue {
    white-space: normal;
    word-break: break-all;
  }

  .dkimRecord {
    word-break: break-all;
  }

  .dkimFrom,
  .dkimTo {
    font-size: 11px;
  }

  .domainCardTop {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .domainCardTop .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .domainName {
    font-size: 12px;
  }

  .domainMeta {
    flex-direction: column;
    gap: 4px;
  }

  .dnsResultActions {
    flex-direction: column;
  }

  .dnsResultActions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .modalCard {
    width: calc(100vw - 32px);
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .topbarInner {
    padding: 0 10px;
    gap: 6px;
    height: 48px;
  }

  .brandMark svg {
    width: 28px;
    height: 28px;
  }

  .brandName {
    font-size: 13px;
  }

  .brandText {
    gap: 0;
  }

  .navLink {
    padding: 5px 6px;
    font-size: 0;
    gap: 0;
  }

  .navIcn {
    width: 16px;
    height: 16px;
  }

  .logoutBtn {
    font-size: 0;
  }

  .shell {
    padding: 18px 12px 28px;
  }

  .title {
    font-size: 28px;
  }

  .statsTitle {
    font-size: 18px;
  }

  .statsAkia {
    font-size: 11px;
  }

  .btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  .input {
    padding: 10px 10px;
    font-size: 13px;
  }

  .akiaCardTop {
    flex-wrap: wrap;
  }

  .sendTableHead,
  .sendTableRow {
    grid-template-columns: 1fr 1fr;
  }

  .sendTableHead > :nth-child(3),
  .sendTableRow > :nth-child(3) {
    display: none;
  }

  .statRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .footerInner {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .idCardName {
    font-size: 11px;
  }

  .idCardActions .btn {
    font-size: 11px;
    padding: 7px 8px;
  }

  .btnSmall {
    padding: 6px 8px;
    font-size: 11px;
  }

  .infoText {
    font-size: 13px;
  }

  .infoList li {
    font-size: 13px;
  }

  .infoCode {
    font-size: 11px;
    padding: 8px 10px;
  }
}

.panelActions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btnDomain {
  gap: 8px;
}

.btnDomain svg {
  flex-shrink: 0;
}

.cfPage {
  max-width: 740px;
  margin: 0 auto;
}

.cfCard {
  overflow: visible;
}

.cfHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--borderSoft);
  background:
    radial-gradient(ellipse 50% 120% at 0% 50%, rgba(246, 130, 31, 0.06), transparent),
    var(--panelHeadBg);
}

.cfHeroLeft {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cfLogo {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 35% 30%, rgba(246, 130, 31, 0.18), transparent 60%),
    radial-gradient(circle at 65% 70%, rgba(249, 168, 37, 0.12), transparent 60%),
    var(--surface3);
  border: 1px solid rgba(246, 130, 31, 0.20);
  box-shadow: var(--shadow);
}

.cfHeroText {
  min-width: 0;
}

.cfHeroTitle {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--txt);
}

.cfHeroSub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}

.cfBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.cfBadgeDot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
}

.cfBadgeOk {
  background: rgba(87, 242, 194, 0.08);
  border: 1px solid rgba(87, 242, 194, 0.20);
  color: rgba(87, 242, 194, 0.90);
}

.cfBadgeOk .cfBadgeDot {
  background: rgba(87, 242, 194, 0.85);
  box-shadow: 0 0 6px rgba(87, 242, 194, 0.35);
}

.cfBadgeOff {
  background: rgba(255, 207, 90, 0.07);
  border: 1px solid rgba(255, 207, 90, 0.18);
  color: rgba(255, 207, 90, 0.85);
}

.cfBadgeOff .cfBadgeDot {
  background: rgba(255, 207, 90, 0.80);
  box-shadow: 0 0 6px rgba(255, 207, 90, 0.30);
}

.cfBody {
  padding: 20px 22px 24px;
  display: grid;
  gap: 18px;
}

.cfInfoBar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--borderSoft);
  background: var(--surface2);
  overflow: hidden;
}

.cfInfoItem {
  flex: 1;
  padding: 12px 16px;
  min-width: 0;
}

.cfInfoAction {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 10px 14px;
}

.cfInfoSep {
  width: 1px;
  align-self: stretch;
  background: var(--borderSoft);
  flex-shrink: 0;
}

.cfInfoLabel {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted2);
  margin-bottom: 3px;
}

.cfInfoValue {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfInfoMask {
  color: var(--muted);
  letter-spacing: 0.04em;
}

.cfFormSection {
  display: grid;
  gap: 14px;
}

.cfFormTitle {
  font-weight: 600;
  font-size: 14px;
  color: var(--txt);
  letter-spacing: 0.01em;
}

.cfFormDesc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted2);
  margin-top: -6px;
}

.cfForm {
  gap: 0;
}

.cfFormGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cfFormFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.cfHelp {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted2);
  flex: 1;
  min-width: 0;
}

.cfHelp strong {
  color: var(--muted);
}

.cfHelp svg {
  flex-shrink: 0;
  color: var(--muted2);
}

.cfSubmitBtn {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 12px 20px;
}

@media (max-width: 640px) {
  .cfHero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .cfBody {
    padding: 16px;
  }

  .cfLogo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .cfLogo svg {
    width: 34px;
    height: 34px;
  }

  .cfHeroTitle {
    font-size: 14px;
  }

  .cfHeroSub {
    font-size: 11px;
  }

  .cfFormGrid {
    grid-template-columns: 1fr;
  }

  .cfFormFoot {
    flex-direction: column;
    align-items: stretch;
  }

  .cfSubmitBtn {
    justify-content: center;
  }

  .cfInfoBar {
    flex-direction: column;
  }

  .cfInfoSep {
    width: auto;
    height: 1px;
    align-self: auto;
  }

  .cfInfoAction {
    padding: 10px 16px;
  }

  .cfInfoAction .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.domainLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.domainFormPanel {
  position: sticky;
  top: 100px;
}

.domainList {
  display: grid;
  gap: 10px;
}

.domainCard {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--borderSoft);
  background: var(--surface2);
  display: grid;
  gap: 8px;
}

.domainCardTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.domainName {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--txt);
  font-weight: 500;
  min-width: 0;
  word-break: break-all;
}

.domainMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.domainBadge {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.dkimRecords {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line2);
}

.dkimRecord {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  margin-bottom: 6px;
}

.dkimFrom {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

.dkimTo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  word-break: break-all;
  margin-top: 2px;
}

@media (max-width: 980px) {
  .domainLayout {
    grid-template-columns: 1fr;
  }

  .domainFormPanel {
    position: static;
  }
}

.stepper {
  display: grid;
  gap: 0;
}

.stepperHeader {
  margin-bottom: 18px;
}

.stepperTitle {
  font-weight: 600;
  font-size: 15px;
  color: var(--txt);
}

.stepperTitle span {
  color: var(--accent);
  font-family: var(--mono);
}

.stepperSub {
  font-size: 12px;
  color: var(--muted2);
  font-family: var(--mono);
  margin-top: 3px;
}

.stepperList {
  display: grid;
  gap: 0;
  position: relative;
}

.stepItem {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  position: relative;
}

.stepIndicator {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}

.stepItem:not(:last-child) .stepIndicator::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 8px);
  background: var(--line2);
  z-index: 0;
}

.stepDot {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.stepContent {
  padding-top: 4px;
  min-width: 0;
}

.stepLabel {
  font-size: 13px;
  color: var(--muted);
  transition: color 0.3s ease;
}

.stepDetail {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--danger);
  margin-top: 2px;
}

.stepPending .stepDot {
  background: var(--line);
  border: 2px solid var(--line2);
}

.stepPending .stepLabel {
  color: var(--muted2);
}

.stepRunning .stepDot {
  background: rgba(47, 225, 255, 0.25);
  border: 2px solid rgba(47, 225, 255, 0.50);
  box-shadow: 0 0 8px rgba(47, 225, 255, 0.30);
  animation: stepPulse 1.2s ease-in-out infinite;
}

.stepRunning .stepLabel {
  color: rgba(47, 225, 255, 0.90);
  font-weight: 500;
}

.stepOk .stepDot {
  background: rgba(87, 242, 194, 0.85);
  border: 2px solid rgba(87, 242, 194, 0.40);
  box-shadow: 0 0 6px rgba(87, 242, 194, 0.25);
}

.stepOk .stepLabel {
  color: var(--txt);
}

.stepOk .stepIndicator::after {
  background: rgba(87, 242, 194, 0.25);
}

.stepWarn .stepDot {
  background: rgba(255, 207, 90, 0.80);
  border: 2px solid rgba(255, 207, 90, 0.35);
  box-shadow: 0 0 6px rgba(255, 207, 90, 0.20);
}

.stepWarn .stepLabel {
  color: rgba(255, 207, 90, 0.85);
}

.stepError .stepDot {
  background: rgba(255, 75, 125, 0.80);
  border: 2px solid rgba(255, 75, 125, 0.35);
  box-shadow: 0 0 6px rgba(255, 75, 125, 0.25);
}

.stepError .stepLabel {
  color: var(--danger);
}

@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(47, 225, 255, 0.20); }
  50% { box-shadow: 0 0 14px rgba(47, 225, 255, 0.50); }
}

.dnsResult {
  display: grid;
  gap: 16px;
}

.dnsResultHeader {
  text-align: center;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line2);
}

.dnsResultIcon {
  width: 48px;
  height: 48px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: rgba(87, 242, 194, 0.10);
  border: 1px solid rgba(87, 242, 194, 0.22);
  color: var(--accent);
  margin-bottom: 4px;
}

.dnsResultTitle {
  font-weight: 600;
  font-size: 16px;
  color: var(--txt);
}

.dnsResultDomain {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.dnsRecordsList {
  display: grid;
  gap: 6px;
}

.dnsRecordRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--surface2);
}

.dnsRecordType {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(87, 242, 194, 0.08);
  border: 1px solid rgba(87, 242, 194, 0.16);
  color: var(--accent);
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}

.dnsRecordInfo {
  flex: 1;
  min-width: 0;
}

.dnsRecordName {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dnsRecordValue {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.dnsRecordCheck {
  color: var(--accent);
  flex-shrink: 0;
}

.dnsResultNote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted2);
}

.dnsResultNote svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--muted2);
}

.dnsResultNote strong {
  color: var(--muted);
}

.dnsResultActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.domainCardNew {
  animation: cardSlideIn 0.4s ease;
}

@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.idCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--borderSoft);
  background: var(--surface2);
  transition: border-color 0.2s ease;
}

.idCard:hover {
  border-color: var(--borderMed);
}

.idCardLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.idCardInfo {
  min-width: 0;
}

.idCardName {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}

.idCfBadge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.80;
  cursor: help;
  transition: opacity 0.2s ease;
}

.idCfBadge:hover {
  opacity: 1;
}

.idCardStatus {
  margin-top: 2px;
}

.idCardActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.idDeleteForm {
  margin: 0;
  padding: 0;
}

.dsControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.dsPeriodGroup {
  display: flex;
  gap: 0;
  border-radius: 10px;
  border: 1px solid var(--borderSoft);
  overflow: hidden;
  background: var(--surface2);
}

.dsPeriodBtn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted2);
  font-family: var(--mono);
  font-size: 11px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.03em;
  border-right: 1px solid var(--line2);
}

.dsPeriodBtn:last-child {
  border-right: none;
}

.dsPeriodBtn:hover {
  color: var(--txt);
  background: var(--surfaceHover);
}

.dsPeriodBtn.dsActive {
  color: var(--accent);
  background: rgba(87, 242, 194, 0.08);
}

.dsRefresh {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--borderSoft);
  background: var(--surface2);
  color: var(--muted2);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dsRefresh:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dsLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
}

.dsSpinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(87, 242, 194, 0.20);
  border-top-color: rgba(87, 242, 194, 0.80);
  border-radius: 50%;
  animation: dsSpin 0.8s linear infinite;
}

@keyframes dsSpin {
  to { transform: rotate(360deg); }
}

.dsTableHead {
  display: grid;
  grid-template-columns: 1.8fr 0.8fr 0.8fr 0.8fr 0.8fr 1.4fr;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 6px;
}

.dsTh {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted2);
}

.dsThNum {
  text-align: right;
}

.dsRow {
  display: grid;
  grid-template-columns: 1.8fr 0.8fr 0.8fr 0.8fr 0.8fr 1.4fr;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  margin-bottom: 4px;
  align-items: center;
  transition: border-color 0.2s ease;
}

.dsRow:hover {
  border-color: var(--borderSoft);
}

.dsDomain {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dsDomainName {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dsNum {
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
  color: var(--muted);
  font-weight: 500;
}

.dsNumSend {
  color: var(--txt);
}

.dsNumOk {
  color: var(--accent);
}

.dsNumWarn {
  color: var(--warn);
}

.dsNumDanger {
  color: var(--danger);
}

.dsBarCell {
  display: flex;
  align-items: center;
}

.dsBarTrack {
  width: 100%;
  height: 8px;
  border-radius: 99px;
  display: flex;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line2);
}

.dsBarDeliv {
  height: 100%;
  background: rgba(87, 242, 194, 0.75);
  transition: width 0.4s ease;
}

.dsBarBounce {
  height: 100%;
  background: rgba(255, 207, 90, 0.75);
  transition: width 0.4s ease;
}

.dsBarCompl {
  height: 100%;
  background: rgba(255, 75, 125, 0.75);
  transition: width 0.4s ease;
}

.dsChart {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line2);
}

.dsChartTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
}

.dsChartBars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: 0 2px;
}

.dsChartCol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.dsChartStack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  transition: height 0.4s ease;
  flex: 1;
  align-self: flex-end;
}

.dsChartSeg {
  width: 100%;
  min-height: 1px;
  transition: height 0.4s ease;
}

.dsChartLabel {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted2);
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.dsChartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line2);
}

.dsLegendItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.dsLegendDot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .dsTableHead,
  .dsRow {
    grid-template-columns: 1.5fr 0.6fr 0.6fr 0.6fr 0.6fr 1fr;
    font-size: 10px;
    gap: 4px;
    padding: 8px 8px;
  }

  .dsDomainName {
    font-size: 11px;
  }

  .dsNum {
    font-size: 11px;
  }

  .dsChartBars {
    height: 80px;
  }
}

.dsVdmError {
  display: grid;
  gap: 6px;
}

.dsVdmError strong {
  font-size: 14px;
  color: var(--danger);
}

.dsVdmError p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.dsVdmSteps {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--danger);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 75, 125, 0.06);
  border: 1px solid rgba(255, 75, 125, 0.12);
  margin-top: 2px;
}

.dsVdmSteps strong {
  font-size: 11px;
  color: var(--danger);
}

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, background .25s ease, backdrop-filter .25s ease;
}
.modalOverlay.modalVisible {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
}
.modalCard {
  background: var(--surface3);
  border: 1px solid var(--borderSoft);
  border-radius: 16px;
  padding: 32px 30px 26px;
  width: 420px;
  max-width: 92vw;
  box-shadow: var(--shadow);
  transform: translateY(20px) scale(0.96);
  transition: transform .25s ease;
  text-align: center;
}
.modalOverlay.modalVisible .modalCard {
  transform: translateY(0) scale(1);
}
.modalIcon {
  margin: 0 auto 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 75, 125, 0.1);
  border: 1px solid rgba(255, 75, 125, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b8a;
}
.modalTitle {
  font-size: 17px;
  font-weight: 600;
  color: var(--txt);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.modalBody {
  margin-bottom: 22px;
}
.modalTarget {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent2);
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 10px;
  word-break: break-all;
}
.modalDetail {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.modalWarn {
  font-size: 12px;
  color: var(--danger);
  font-weight: 500;
}
.modalActions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.modalActions .btn {
  min-width: 130px;
  justify-content: center;
  padding: 9px 18px;
  font-size: 13px;
  border-radius: 10px;
}
.modalActions .btn.ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
}
.modalActions .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.modalActions .btn.danger {
  background: rgba(255, 60, 100, 0.15);
  border: 1px solid rgba(255, 60, 100, 0.3);
  color: #ff6b8a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.modalActions .btn.danger:hover {
  background: rgba(255, 60, 100, 0.25);
  color: #ff8da5;
}

.themeToggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 99px;
  border: 1px solid var(--borderSoft);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  appearance: none;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  transition: background .3s ease, border-color .3s ease;
  flex-shrink: 0;
}

.themeToggle:hover {
  border-color: var(--accent);
}

.themeToggleTrack {
  position: relative;
  width: 100%;
  height: 100%;
}

.themeToggleThumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="light"] .themeToggleThumb {
  transform: translateX(20px);
}

.themeToggleThumb svg {
  width: 12px;
  height: 12px;
}

.themeToggleIcnMoon,
.themeToggleIcnSun {
  display: flex;
  align-items: center;
  justify-content: center;
}

.themeToggleIcnSun { display: none; }
.themeToggleIcnMoon { display: flex; }

[data-theme="light"] .themeToggleIcnSun { display: flex; }
[data-theme="light"] .themeToggleIcnMoon { display: none; }

[data-theme="light"] .themeToggle {
  background: #e8ecf0;
  border-color: rgba(60, 80, 120, 0.15);
}
[data-theme="light"] .themeToggle:hover {
  border-color: var(--accent);
  background: #dfe4ea;
}
[data-theme="light"] .themeToggleThumb {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .themeToggleThumb svg {
  color: #d97706;
}

[data-theme="light"] .topbar {
  background: linear-gradient(to bottom, #ffffff, rgba(248, 250, 252, 0.97));
  border-bottom: 1px solid rgba(60, 80, 120, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(12px);
}
[data-theme="light"] .brandMark {
  background:
    radial-gradient(circle at 30% 25%, rgba(15, 168, 122, 0.10), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(8, 145, 178, 0.08), transparent 55%),
    #f0f4f8;
  border-color: rgba(15, 168, 122, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset, 0 2px 6px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .brandMark svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
}
[data-theme="light"] .brandMark svg path[fill] {
  fill: rgba(230, 236, 244, 0.9);
}
[data-theme="light"] .brandName {
  color: rgba(20, 28, 40, 0.9);
}
[data-theme="light"] .brandTag {
  color: rgba(20, 28, 40, 0.4);
}
[data-theme="light"] .brandSep,
[data-theme="light"] .navSep {
  background: rgba(60, 80, 120, 0.1);
}
[data-theme="light"] .brandStatus {
  color: var(--accent);
}
[data-theme="light"] .navLink {
  color: rgba(20, 28, 40, 0.5);
}
[data-theme="light"] .navLink:hover {
  color: rgba(20, 28, 40, 0.85);
  background: rgba(60, 80, 120, 0.05);
  border-color: rgba(60, 80, 120, 0.1);
}
[data-theme="light"] .navActive {
  color: #047857;
  background: rgba(15, 168, 122, 0.07);
  border-color: rgba(15, 168, 122, 0.18);
}
[data-theme="light"] .navDanger:hover {
  color: var(--danger);
  background: rgba(225, 29, 72, 0.04);
  border-color: rgba(225, 29, 72, 0.1);
}

[data-theme="light"] .modalOverlay.modalVisible {
  background: rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .modalCard {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .modalTarget {
  color: var(--accent2);
  background: rgba(8, 145, 178, 0.06);
  border-color: rgba(8, 145, 178, 0.15);
}

[data-theme="light"] .select {
  background-color: var(--inputBg);
  color: var(--txt);
}
[data-theme="light"] .select option {
  background: #fff;
  color: rgba(20, 28, 40, 0.9);
}

[data-theme="light"] .akiaCard,
[data-theme="light"] .statRow,
[data-theme="light"] .identityCard,
[data-theme="light"] .idCard,
[data-theme="light"] .sendTableRow,
[data-theme="light"] .captcha,
[data-theme="light"] .cfInfoBar,
[data-theme="light"] .cfHelp,
[data-theme="light"] .domainCard,
[data-theme="light"] .dkimRecord,
[data-theme="light"] .dnsRecordRow,
[data-theme="light"] .dnsResultNote,
[data-theme="light"] .dsPeriodGroup,
[data-theme="light"] .dsRefresh,
[data-theme="light"] .dsRow {
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--line);
}

[data-theme="light"] .tipBox {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--line);
  color: var(--txt);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .captchaArt {
  background: linear-gradient(180deg, rgba(230, 235, 245, 0.95), rgba(220, 228, 240, 0.85));
  border-color: var(--line);
}

[data-theme="light"] .captchaNoise {
  background-image:
    linear-gradient(to right, rgba(15, 80, 120, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 80, 120, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(180, 100, 20, 0.14), transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(180, 30, 80, 0.12), transparent 40%);
  opacity: 0.8;
}

[data-theme="light"] .captchaCode {
  color: rgba(20, 28, 40, 0.88);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cfLogo {
  background:
    radial-gradient(circle at 35% 30%, rgba(246, 130, 31, 0.12), transparent 60%),
    radial-gradient(circle at 65% 70%, rgba(249, 168, 37, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.8);
  border-color: rgba(246, 130, 31, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .dnsResultIcon {
  background: rgba(15, 168, 122, 0.08);
  border-color: rgba(15, 168, 122, 0.2);
}

[data-theme="light"] .dnsRecordType {
  background: rgba(15, 168, 122, 0.06);
  border-color: rgba(15, 168, 122, 0.16);
}

[data-theme="light"] .cfBadgeOk {
  background: rgba(15, 168, 122, 0.08);
  border-color: rgba(15, 168, 122, 0.2);
  color: #047857;
}
[data-theme="light"] .cfBadgeOk .cfBadgeDot {
  background: #0fa87a;
  box-shadow: 0 0 6px rgba(15, 168, 122, 0.3);
}
[data-theme="light"] .cfBadgeOff {
  background: rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.18);
  color: #92400e;
}
[data-theme="light"] .cfBadgeOff .cfBadgeDot {
  background: #d97706;
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.25);
}

[data-theme="light"] .statLabel {
  color: var(--muted);
}
[data-theme="light"] .statValue {
  color: var(--txt);
}
[data-theme="light"] .sendTd {
  color: var(--txt);
}
[data-theme="light"] .sendWarn {
  color: var(--warn);
}

[data-theme="light"] .sendTableHead {
  background: var(--panelHeadBg);
  border-color: var(--line2);
}

[data-theme="light"] .stepCircle {
  background: var(--surface);
  border-color: var(--line);
}
[data-theme="light"] .stepItem.active .stepCircle {
  border-color: var(--accent);
}
[data-theme="light"] .stepItem.done .stepCircle {
  background: var(--accent);
}
[data-theme="light"] .stepLine {
  background: var(--line);
}
[data-theme="light"] .stepItem.done .stepLine {
  background: var(--accent);
}

[data-theme="light"] .dnsType {
  color: var(--accent2);
}
[data-theme="light"] .dnsName,
[data-theme="light"] .dnsValue {
  color: var(--txt);
}

[data-theme="light"] .brandMark svg stop[stop-color="#57f2c2"] {
  stop-color: #0fa87a;
}
[data-theme="light"] .brandMark svg stop[stop-color="#2fe1ff"] {
  stop-color: #0891b2;
}

[data-theme="light"] .btn.primary {
  border-color: rgba(15, 168, 122, 0.4);
  background: rgba(15, 168, 122, 0.1);
  color: #047857;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
}
[data-theme="light"] .btn.primary:hover {
  border-color: rgba(15, 168, 122, 0.6);
  background: rgba(15, 168, 122, 0.16);
}

[data-theme="light"] .btn.danger {
  border-color: rgba(225, 29, 72, 0.18);
  color: #be123c;
  background: rgba(225, 29, 72, 0.05);
}
[data-theme="light"] .btn.danger:hover {
  border-color: rgba(225, 29, 72, 0.35);
  background: rgba(225, 29, 72, 0.1);
}

[data-theme="light"] .dot.ok,
[data-theme="light"] .sigDot.ok {
  background: #0fa87a;
}
[data-theme="light"] .dot.warn,
[data-theme="light"] .sigDot.warn {
  background: #d97706;
}
[data-theme="light"] .sigDot {
  background: var(--danger);
}

[data-theme="light"] .footer {
  background: linear-gradient(to top, #edf0f4, rgba(248, 250, 252, 0.95));
  border-top: 1px solid rgba(60, 80, 120, 0.10);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.03);
  color: rgba(20, 28, 40, 0.55);
}

[data-theme="light"] .modalActions .btn.danger {
  background: rgba(225, 29, 72, 0.08);
  color: #be123c;
}
[data-theme="light"] .modalActions .btn.danger:hover {
  background: rgba(225, 29, 72, 0.14);
  color: #9f1239;
}

[data-theme="light"] .identityOk {
  background: rgba(15, 168, 122, 0.08);
  color: #047857;
  border-color: rgba(15, 168, 122, 0.2);
}
[data-theme="light"] .identityWarn {
  background: rgba(217, 119, 6, 0.06);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.18);
}

[data-theme="light"] .idCard:hover {
  border-color: rgba(60, 80, 120, 0.22);
}

[data-theme="light"] .domainCard {
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--line);
}

[data-theme="light"] .dkimRecords {
  border-color: var(--line2);
}

[data-theme="light"] .input::placeholder {
  color: var(--muted2);
}

[data-theme="light"] .navLink.muted,
[data-theme="light"] .barLabel,
[data-theme="light"] .barValue,
[data-theme="light"] .dashSub,
[data-theme="light"] .akiaKey,
[data-theme="light"] .akiaRegion,
[data-theme="light"] .emptyText,
[data-theme="light"] .identityName,
[data-theme="light"] .idCardName,
[data-theme="light"] .captchaCode,
[data-theme="light"] .stepLabel,
[data-theme="light"] .stepOk .stepLabel,
[data-theme="light"] .dnsName,
[data-theme="light"] .dnsValue,
[data-theme="light"] .dnsResultNote strong,
[data-theme="light"] .cfInfoMask,
[data-theme="light"] .cfFormLabel,
[data-theme="light"] .cfHelp strong,
[data-theme="light"] .domainName,
[data-theme="light"] .dkimFrom,
[data-theme="light"] .dkimTo,
[data-theme="light"] .dsNumSend,
[data-theme="light"] .dsNumLabel,
[data-theme="light"] .dsNoData,
[data-theme="light"] .modalTitle,
[data-theme="light"] .modalMsg,
[data-theme="light"] .modalDetail {
  color: var(--txt);
}

[data-theme="light"] .dashSub.muted,
[data-theme="light"] .akiaDate,
[data-theme="light"] .emptyHint,
[data-theme="light"] .emptyIcon,
[data-theme="light"] .formHint,
[data-theme="light"] .cfHeroSub,
[data-theme="light"] .cfInfoLabel,
[data-theme="light"] .cfFormHint,
[data-theme="light"] .cfHelp,
[data-theme="light"] .cfHelpIcon,
[data-theme="light"] .dnsResultNote,
[data-theme="light"] .stepPending .stepLabel,
[data-theme="light"] .dsEmptyText,
[data-theme="light"] .dsColLabel,
[data-theme="light"] .dsBarLabel,
[data-theme="light"] .dsBarTick,
[data-theme="light"] .iIcon,
[data-theme="light"] .dsPeriodBtn,
[data-theme="light"] .sendTh,
[data-theme="light"] .identityStatus,
[data-theme="light"] .domainStatus {
  color: var(--muted);
}

[data-theme="light"] .akiaCardActions .btn {
  background: var(--surface);
}

[data-theme="light"] select.input {
  background: var(--inputBg);
  color: var(--txt);
}

html[data-theme] body,
html[data-theme] .topbar,
html[data-theme] .brandMark,
html[data-theme] .panel,
html[data-theme] .heroPanel,
html[data-theme] .footer,
html[data-theme] .navLink,
html[data-theme] .btn,
html[data-theme] .input,
html[data-theme] .akiaCard,
html[data-theme] .statRow,
html[data-theme] .identityCard,
html[data-theme] .idCard,
html[data-theme] .domainCard,
html[data-theme] .dkimRecord,
html[data-theme] .dnsRecordRow,
html[data-theme] .themeToggle,
html[data-theme] .tipBox,
html[data-theme] .modalCard {
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.infoLayout {
  display: grid;
  gap: 18px;
}

.infoPanel .panelBody {
  padding: 18px 20px 22px;
}

.infoText {
  font-size: 14px;
  line-height: 1.75;
  color: var(--txt);
}

.infoText p {
  margin: 0 0 12px;
}

.infoText p:last-child {
  margin-bottom: 0;
}

.infoText strong {
  font-weight: 600;
}

.infoText code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface3);
  border: 1px solid var(--borderSoft);
}

.infoCode {
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface3);
  border: 1px solid var(--borderSoft);
  color: var(--muted);
  word-break: break-all;
  margin: 10px 0 14px;
  letter-spacing: 0.02em;
}

.infoTable {
  margin-top: 16px;
}

.infoTableRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
}

.infoTableRow:nth-child(even) {
  background: var(--surface2);
}

.infoTableHead {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borderSoft);
  border-radius: 0;
}

.infoTableCell {
  font-size: 13px;
}

.infoBadge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.infoBadgeOk {
  background: rgba(15, 168, 122, 0.12);
  color: #0fa87a;
  border: 1px solid rgba(15, 168, 122, 0.2);
}

.infoList {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}

.infoList li {
  position: relative;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.65;
}

.infoList li::before {
  content: "·";
  position: absolute;
  left: -14px;
  color: var(--muted);
  font-weight: 700;
}

[data-theme="light"] .infoBadgeOk {
  background: rgba(15, 168, 122, 0.08);
  color: #047857;
  border-color: rgba(15, 168, 122, 0.2);
}

[data-theme="light"] .infoCode {
  background: rgba(240, 243, 248, 0.9);
  color: var(--muted);
}

.notFoundWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  min-height: 55vh;
  gap: 0;
}

.notFoundGlitch {
  margin-bottom: 20px;
  animation: nfPulse 4s ease-in-out infinite;
}

.notFoundIcon {
  filter: drop-shadow(0 0 18px rgba(87, 242, 194, 0.15));
}

@keyframes nfPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.notFoundCode {
  font-family: var(--mono);
  font-size: 80px;
  font-weight: 800;
  letter-spacing: 6px;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: none;
}

.notFoundLabel {
  font-size: 18px;
  font-weight: 600;
  color: var(--txt);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.notFoundDesc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 24px;
}

.notFoundMeta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 32px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted2);
  letter-spacing: 0.03em;
}

.notFoundMetaItem {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notFoundMetaSep {
  width: 1px;
  height: 14px;
  background: var(--line);
}

.notFoundDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.notFoundDotRed {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.notFoundDotAmber {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.notFoundActions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

@media (max-width: 480px) {
  .notFoundCode {
    font-size: 56px;
    letter-spacing: 3px;
  }
  .notFoundLabel {
    font-size: 15px;
  }
  .notFoundDesc {
    font-size: 13px;
  }
  .notFoundGlitch svg {
    width: 90px;
    height: 90px;
  }
  .notFoundMeta {
    flex-direction: column;
    gap: 6px;
  }
  .notFoundMetaSep {
    display: none;
  }
}

.accountLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.accountPanel {
  width: 100%;
}

.accountNotice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius2);
  background: var(--surface);
  border: 1px solid var(--borderSoft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 18px;
}

.accountNotice svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.dangerZone {
  border: 1px solid rgba(255, 75, 125, 0.25);
}

.dangerZoneHead {
  background: rgba(255, 75, 125, 0.06);
}

.dangerZoneHead .panelTitle {
  color: var(--danger);
}

.dangerZoneDesc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.dangerZoneDesc p {
  margin: 0;
}

.dangerDeleteBtn {
  width: 100%;
  justify-content: center;
}

.dangerConfirmForm {
  margin-top: 4px;
}

.dangerConfirmForm .formRow {
  gap: 10px;
}

[data-theme="light"] .dangerZone {
  border-color: rgba(220, 38, 38, 0.25);
}

[data-theme="light"] .dangerZoneHead {
  background: rgba(220, 38, 38, 0.05);
}

[data-theme="light"] .dangerZoneHead .panelTitle {
  color: #dc2626;
}

[data-theme="light"] .accountNotice {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
  .accountLayout {
    gap: 18px;
  }
}