:root {
  --modelgate-bg: #07111f;
  --modelgate-panel: #101b2e;
  --modelgate-panel-2: #142338;
  --modelgate-border: rgba(125, 211, 252, 0.2);
  --modelgate-text: #e6f2ff;
  --modelgate-muted: #9aa9bb;
  --modelgate-accent: #20e3c2;
  --modelgate-accent-2: #38bdf8;
}

html body {
  background:
    radial-gradient(circle at 18% 12%, rgba(32, 227, 194, 0.12), transparent 28rem),
    radial-gradient(circle at 90% 8%, rgba(59, 130, 246, 0.11), transparent 24rem),
    var(--modelgate-bg) !important;
}

body,
.ant-layout,
.n-layout,
[class*="layout"],
[class*="Layout"] {
  color: var(--modelgate-text);
}

aside,
nav,
[class*="sidebar"],
[class*="Sidebar"],
[class*="sider"],
[class*="Sider"] {
  background: linear-gradient(180deg, #081122 0%, #0d1728 100%) !important;
  border-color: var(--modelgate-border) !important;
}

header,
[class*="header"],
[class*="Header"] {
  background: rgba(13, 24, 39, 0.88) !important;
  border-color: var(--modelgate-border) !important;
  backdrop-filter: blur(18px);
}

.modelgate-brand-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin: 14px 16px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(32, 227, 194, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(32, 227, 194, 0.12), rgba(56, 189, 248, 0.08));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.modelgate-brand-badge img {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.modelgate-brand-badge strong {
  display: block;
  color: #eefcff;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

.modelgate-brand-badge span {
  display: block;
  margin-top: 4px;
  color: var(--modelgate-muted);
  font-size: 12px;
  line-height: 1.2;
}

button,
[role="button"],
.ant-btn,
.n-button {
  border-radius: 8px !important;
}

.ant-btn-primary,
.n-button--primary,
button[type="submit"] {
  background: linear-gradient(135deg, var(--modelgate-accent), var(--modelgate-accent-2)) !important;
  border-color: transparent !important;
  color: #04111d !important;
  font-weight: 700;
}

a,
.active,
[class*="active"],
[class*="selected"] {
  color: var(--modelgate-accent) !important;
}

.ant-card,
.n-card,
[class*="card"],
[class*="Card"] {
  background: rgba(16, 27, 46, 0.82) !important;
  border-color: var(--modelgate-border) !important;
  border-radius: 8px !important;
}

input,
textarea,
select,
.ant-input,
.n-input,
[class*="input"] {
  border-radius: 8px !important;
}