/* Carbonivore: shared minimal theme. */
:root {
  --bg: #0f1115;
  --card: #1a1d24;
  --line: #2c313b;
  --fg: #eef0f4;
  --muted: #9aa1ad;
  --accent: #4f8cff;
  --error: #ffb4a8;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nastaliq: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
  --naskh: 'Noto Naskh Arabic', 'Noto Nastaliq Urdu', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 15px/1.45 var(--body); }
:lang(ur), :lang(pa) { font-family: var(--nastaliq); line-height: 2.1; }
:lang(sd), :lang(ps), :lang(bal), :lang(skr) { font-family: var(--naskh); line-height: 1.8; }
.latin { font-family: var(--body) !important; line-height: 1.2 !important; }

.masthead { display: grid; gap: 2px; text-align: center; }
.wordmark { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: .01em; }
.subtitle { color: var(--muted); font-size: 15px; }

.lang-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lang-picker button { min-height: 34px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 8px; background: none;
  color: var(--fg); font-size: 14px; cursor: pointer; }
.lang-picker button:lang(en) { font-family: var(--body); }
.lang-picker button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }

.card { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--card); text-align: start; }
.card h2 { margin: 0; font-size: 17px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card p { margin: 0; color: var(--muted); }
.tag { font-size: 12px; font-weight: 500; color: #bcd0ff; background: #24324f; padding: 2px 8px; border-radius: 20px; }

.btn { display: block; width: 100%; padding: 14px; border: 0; border-radius: 10px; background: var(--accent); color: #fff;
  font: 600 16px/1.2 inherit; text-align: center; text-decoration: none; cursor: pointer; }
.btn.secondary { background: #262a33; }
.btn:disabled { opacity: .7; }

.target { display: block; width: 100%; height: auto; border-radius: 10px; }
.glass { background: #1a1d24d9; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; }
.error { color: var(--error); }
a.quiet { color: #8fb3ff; }