/* /cryptogram/css/index.css */
:root{
  --bg:#f6f7fb; --card:#fff; --text:#0f172a; --muted:#475569;
  --border:#87888a; --btn:#0f172a; --btnText:#fff; --chip:#f1f5f9;
}
.theme-dark{
  --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8;
  --border:#7a7b7d; --btn:#fbbf24; --btnText:#111827; --chip:#111827;
}
body{ background:var(--bg); color:var(--text); }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; }
.muted{ color:var(--muted); }
.btnSolid{ background:var(--btn); color:var(--btnText); border-radius:12px; padding:.6rem .95rem; font-weight:900; }
.btnGhost{ border:1px solid var(--border); background:var(--card); border-radius:12px; padding:.6rem .95rem; font-weight:900; }
.stickyHead{ position:sticky; top:0; z-index:30; backdrop-filter:saturate(180%) blur(8px); }
.toggleWrap{
  border:1px solid var(--border); background:var(--card);
  border-radius:12px; padding:.45rem .7rem; display:flex; align-items:center; gap:.5rem;
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Cryptogram preview styling */
.cgCipher{
  font-weight:900;
  letter-spacing:.14em;
  line-height:1.6;
  word-wrap:break-word;
  text-align:center;
  font-size:18px;
}
.cgAnswer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.cgBox{
  width:44px; height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  background: color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.cgPeek{
  white-space:pre-wrap;
  font-weight:800;
  font-size:13px;
  line-height:1.4;
}