/* Edge Vault CTF — shared styles
   Palette: indigo ink, edge orange (the Cloudflare edge), teal = DLP, violet = Guardrails */
:root {
  color-scheme: light;
  --ink: #1c1838;
  --ink-soft: #4a4766;
  --muted: #6d6a88;
  --paper: #f4f4f9;
  --surface: #ffffff;
  --line: #dddbe8;
  --edge: #f6821f;
  --edge-ink: #8a3f00;
  --dlp: #13879a;
  --guard: #6b5bd6;
  --ok: #1e9e6a;
  --bad: #c9403a;
  --radius-lg: 18px;
  --radius-sm: 8px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #eceaf8;
    --ink-soft: #c3c0dc;
    --muted: #9a97b6;
    --paper: #131127;
    --surface: #1d1a36;
    --line: #34305a;
    --edge: #ff9a3d;
    --edge-ink: #ffcf9e;
    --dlp: #3cc3d6;
    --guard: #9d90ff;
    --ok: #47c98f;
    --bad: #ff6f68;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--edge); outline-offset: 2px; }
.hidden { display: none !important; }

.btn {
  border: 0; border-radius: var(--radius-sm); padding: 0.7rem 1.1rem;
  background: var(--ink); color: var(--paper); font-weight: 600;
}
.btn.edge { background: var(--edge); color: #1c1000; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.field {
  width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
}
.mono { font-family: var(--mono); letter-spacing: 0.02em; }

.toast {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.95rem; max-width: 92vw; z-index: 20;
}

@media (prefers-reduced-motion: no-preference) {
  .pop { animation: pop 260ms ease-out; }
  @keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}