:root {
  --bg: #0a0b0e;
  --panel: #10131a;
  --gold: #caa65a;
  --emerald: #23c38a;
  --text: #e7ebee;
  --muted: #8d99ae;
  --accent: #41b0ff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, #0d1b2a 0%, var(--bg) 55%);
}

.gold { color: var(--gold); }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }

.btn {
  background: linear-gradient(135deg, var(--gold), #e1c58c);
  color: #0b0b0b;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 650;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(202,166,90,.25);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
.btn.tiny { padding: 8px 12px; border-radius: 8px; font-size: 12px; }

.input {
  width: 100%;
  background: #0c0f15;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 12px;
  outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(65,176,255,.15); }

.card {
  width: min(440px, 92vw);
  margin: 8vh auto;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  text-align: center;
}
.gate .grain::before, .gate .grain::after {
  content:''; position: fixed; inset: 0; pointer-events: none;
}
.grain::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".05"/></svg>');
}

.crest {
  width: 100px; height: 100px; margin: 0 auto 10px; position: relative;
}
.halo {
  position:absolute; inset:-6px; border-radius:50%;
  background: radial-gradient(40% 40% at 50% 50%, rgba(35,195,138,.9), transparent 60%);
  filter: blur(12px); opacity:.6; animation: pulse 3s ease-in-out infinite;
}
.crest-inner {
  width:100%; height:100%; border-radius:50%;
  background: linear-gradient(160deg, #0b1220, #111828);
  display:grid; place-items:center; font-weight:800; letter-spacing:1px;
  border:1px solid rgba(255,255,255,.08);
}
.orbit { animation: orbit 10s linear infinite; transform-style: preserve-3d; }
@keyframes orbit { 0%{ transform: rotateY(0) } 100%{ transform: rotateY(360deg) } }
@keyframes pulse { 0%,100%{ opacity:.5 } 50%{ opacity: .9 } }

.gate-form { display:grid; gap:12px; margin-top:18px; }
.feedback { min-height: 20px; margin-top: 6px; color:#ff7272; font-size: 12px; }

.foot {
  position: fixed; left: 0; right: 0; bottom: 10px; display:flex; gap:10px;
  justify-content: space-between; align-items: center; padding: 0 12px;
}
.owner-dot {
  position: fixed; right: 8px; bottom: 8px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--emerald); opacity:.15; border:none;
}
.owner-dot:focus { outline: 2px solid var(--accent); }

.admin-dialog::backdrop { background: rgba(0,0,0,.6); }
.admin-card {
  min-width: 320px; background: #0f141f; color: var(--text);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px;
}
.actions { display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }

.topbar {
  position: sticky; top: 0; z-index: 5; display:flex; justify-content:space-between; align-items:center;
  padding: 12px 16px; background: rgba(8,11,18,.7); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand { display:flex; gap:10px; align-items:center; }
.crest-mini {
  width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background: linear-gradient(160deg, #0b1220, #111828); font-size:12px; border:1px solid rgba(255,255,255,.08);
}
.brand-lines strong { font-size:14px; letter-spacing:.4px; }
.brand-lines small { display:block; line-height:1; }

.wrap { width: min(1100px, 92vw); margin: 18px auto 80px; }
.hero h1 { margin: 0 0 6px; }
.badges { display:flex; gap:8px; flex-wrap: wrap; }
.chip { border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius: 999px; font-size: 12px; color: var(--muted); }

.grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 16px; }
.bot-card {
  display:grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 12px;
}
.bot-avatar {
  width:56px; height:56px; border-radius:12px; background: radial-gradient(45px 45px at 30% 30%, var(--emerald), transparent 70%), linear-gradient(160deg, #0b1220, #111828);
  border:1px solid rgba(255,255,255,.08);
}
.bot-title { margin: 0 0 4px; }
.bot-actions { display:flex; gap:8px; align-items:center; }

.nebula::before {
  content:''; position: fixed; inset: -30%; background: radial-gradient(50% 40% at 70% 0%, rgba(35,195,138,.18), transparent 55%), radial-gradient(60% 40% at 10% 100%, rgba(193,156,81,.22), transparent 60%);
  filter: blur(40px); z-index: -1;
}