:root {
  --bg: #0b1020;
  --card: #131a33;
  --text: #eef2ff;
  --muted: #aab3d1;
  --border: #2a3563;
  --accent: #6ea8fe;
  --link: #a9ffef;
  --link-visited: #d2b7ff;
  --danger: #ff6b6b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: linear-gradient(180deg, #070a14, var(--bg));
  color: var(--text);
}

a {
  color: var(--link);
  text-decoration: none;
}
a:visited {
  color: var(--link-visited);
}
a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; overflow-wrap: anywhere; }

.card {
  background: rgba(19, 26, 51, 0.9);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
}
.card.subtle { background: rgba(19, 26, 51, 0.6); }

.topbar { display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.topbar-right { display:flex; align-items:center; gap: 8px; }

.grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

label { display:block; margin: 10px 0; }
input, select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0b1230;
  color: var(--text);
}

button, .button {
  display:inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #15204a;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
button.secondary, .button.secondary { background: #0e1635; }
button.danger, .button.danger { background: #3a0f1a; border-color: #7a1b2f; color: #ffd6d6; }
.button.small, button.small { padding: 6px 10px; font-size: 12px; }

table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--border); padding: 10px 8px; text-align: left; }

.error {
  background: #3a0f1a;
  border: 1px solid #7a1b2f;
  color: #ffd6d6;
  padding: 12px;
  border-radius: 10px;
  margin: 12px 0;
}

.browser-frame {
  width: 100%;
  height: 520px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #000;
}