:root {
  --bg: #050505;
  --panel: #10100f;
  --line: #58431c;
  --text: #f7f3e9;
  --muted: #b8ad99;
  --accent: #f3ad24;
  --accent-bright: #ffd36a;
  --danger: #ff6b6b;
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(235, 156, 25, .22), transparent 34%),
    radial-gradient(circle at 88% 3%, rgba(255, 211, 106, .09), transparent 27%),
    linear-gradient(180deg, #070707, #020202 70%);
}

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

.brand-logo {
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255, 211, 106, .5);
  box-shadow: 0 0 0 4px rgba(243, 173, 36, .08), 0 16px 42px rgba(0, 0, 0, .5);
}

h1, h2, h3 { color: #fffaf0; }
.eyebrow, .key, .friendly-settings h3, .setting-name code { color: var(--accent-bright); }

.card,
.stats article {
  background: linear-gradient(145deg, rgba(23, 20, 15, .97), rgba(9, 9, 9, .98));
  border-color: rgba(208, 150, 41, .34);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 219, 141, .04);
}

input, select, textarea,
.friendly-field,
.monitor-item,
.node-card,
.portal-tabs {
  background-color: rgba(8, 8, 8, .88) !important;
  border-color: rgba(174, 127, 38, .42) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-bright) !important;
  box-shadow: 0 0 0 3px rgba(243, 173, 36, .12);
}

button {
  color: #211300;
  background: linear-gradient(135deg, #ffd36a, #e39314);
  box-shadow: 0 7px 20px rgba(216, 137, 18, .14);
}

button:hover { filter: brightness(1.08); }
.secondary, .portal-link {
  color: var(--accent-bright);
  border-color: rgba(243, 173, 36, .48);
  background: rgba(243, 173, 36, .06);
}
.danger-button {
  color: var(--danger);
  border-color: rgba(255, 107, 107, .5);
  background: rgba(255, 107, 107, .06);
}
.portal-tabs button.active {
  color: #211300;
  background: linear-gradient(135deg, #ffd36a, #e39314);
}
.status span { background: var(--accent-bright); box-shadow: 0 0 14px var(--accent-bright); }
.pill { background: rgba(243, 173, 36, .12); color: var(--accent-bright); }
.created { white-space: pre-line; }

@media (max-width: 760px) {
  .brand-lockup { align-items: flex-start; gap: 14px; }
  .brand-logo { width: 84px; height: 84px; border-radius: 16px; }
  .brand-lockup h1 { font-size: clamp(27px, 9vw, 42px); }
}

@media (max-width: 430px) {
  .brand-lockup { display: block; }
  .brand-logo { margin-bottom: 14px; }
}