/* Ctrl+AI shared theme — used across all /tools and /games pages */
:root { color-scheme: dark; --accent:#6ee7ff; --accent2:#4ade80; --warn:#fbbf24; --bad:#f87171; --bg:#0b0d10; --panel:#15181c; --border:#22262b; --fg:#e8e8e8; --muted:#a8a8a8; --dim:#777; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; }
header { padding: 3.5rem 1.5rem 2rem; text-align:center; }
header a.back { color:#888; text-decoration:none; font-size:.9rem; }
header a.back:hover { color:var(--accent); }
header h1 { font-size: 2rem; margin:.75rem 0 .5rem; letter-spacing:-0.02em; }
header h1 span.accent { color:var(--accent); }
header p { color:var(--muted); font-size:1.05rem; max-width:560px; margin:0 auto; }
main { max-width: 780px; margin: 0 auto; padding: 0 1.5rem 5rem; }
section { margin-top: 2.5rem; }
h2 { font-size:1.15rem; border-bottom:1px solid var(--border); padding-bottom:.5rem; font-weight:600; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:1.5rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:1rem; margin-top:1rem; }
.grid .card { padding:1.25rem; }
.label { font-size:.8rem; color:#888; text-transform:uppercase; letter-spacing:.04em; }
.value { font-size:1.4rem; font-weight:600; color:var(--accent); }
.value.warn { color:var(--warn); }
.value.bad { color:var(--bad); }
.note { font-size:.85rem; color:#888; margin-top:1rem; }
a { color:var(--accent); }
.case { display:block; text-decoration:none; color:inherit; }
.case:hover .card { border-color:var(--accent); }
footer { text-align:center; color:#666; font-size:.85rem; padding-bottom:3rem; }
.pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent2); margin-right:.4rem; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.tag-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; margin-top:1rem; }

/* form controls, shared by tools */
input[type=text], input[type=number], input[type=search], textarea, select {
  background:#0e1013; border:1px solid var(--border); color:var(--fg); border-radius:6px;
  padding:.6rem .75rem; font-size:.95rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width:100%;
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize:vertical; }
button, .btn {
  background:var(--accent); color:#00232b; border:none; border-radius:6px; padding:.6rem 1.1rem;
  font-size:.95rem; font-weight:600; cursor:pointer; font-family:inherit;
}
button:hover, .btn:hover { filter:brightness(1.08); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.row > * { flex:1 1 auto; }
.row > button, .row > .btn { flex: 0 0 auto; }
pre.output, code.output {
  display:block; background:#0e1013; border:1px solid var(--border); border-radius:8px; padding:1rem;
  overflow:auto; white-space:pre-wrap; word-break:break-word; font-size:.85rem; color:#d6f7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height:60vh;
}
.err { color:var(--bad); }
.ok { color:var(--accent2); }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg); } }
.hint { font-size:.8rem; color:var(--dim); margin-top:.4rem; }
table.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
table.tbl th, table.tbl td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); }
table.tbl th { color:#888; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }