/* vCon Summit-inspired palette: deep purple + navy, with teal/green accents and a rainbow waveform. */
:root {
  --bg:#fff; --fg:#0b0b2e; --muted:#5b5b78; --card:#f6f3fb; --line:#e3dcf0;
  --accent:#4b0fa0; --accent-fg:#fff; --purple:#450690; --teal:#0e8f9a; --green:#59a90c;
  --ok:#15803d; --err:#b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0c0b1f; --fg:#f1eefb; --muted:#a39fc0; --card:#171533; --line:#2d2a52;
    --accent:#a78bfa; --accent-fg:#0c0b1f; --purple:#c4b0ff; --teal:#3cc4cf; --green:#8ad13f;
    --ok:#4ade80; --err:#f87171;
  }
}
body { font-family: "Inter", "Segoe UI", system-ui, sans-serif; }

.brand { margin:0 0 20px; }
.brand-row { display:flex; align-items:center; gap:14px; }
.brand-logo { height:60px; width:auto; background:#fff; border-radius:10px; padding:6px 8px; box-shadow:0 0 0 1px var(--line); }
.brand-eyebrow { color:var(--teal); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.brand h1 { font-size:1.9rem; line-height:1.1; margin:2px 0 0; font-weight:800; letter-spacing:-.01em; color:var(--fg); }
.brand h1 span { color:var(--purple); }
.brand-link { margin-left:auto; align-self:flex-start; }
.brand-tag { margin:12px 0 0; color:var(--muted); font-weight:600; font-size:.95rem; }
.brand-tag b { color:var(--purple); } .brand-tag i { color:var(--teal); font-style:normal; font-weight:700; }
.wave { display:block; width:100%; height:44px; margin-top:12px; opacity:.95; }

.card { border-left:4px solid var(--accent); box-shadow:0 1px 2px rgba(40,10,90,.06); }
.card > .meta:first-child { color:var(--teal); font-weight:700; letter-spacing:.03em; }
.card h2 { color:var(--fg); font-weight:700; }
button, .btn { background:var(--accent); color:var(--accent-fg); }
button.ghost, .btn.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.mod { border-color:var(--accent); color:var(--accent); }
textarea:focus, input:focus { outline:2px solid var(--accent); outline-offset:1px; }
a { color:var(--accent); }
@media (max-width:480px) { .brand h1 { font-size:1.55rem; } .brand-logo { height:50px; } }