/* BBoink shared theme — matches the landing page exactly (background + header).
   Linked by flasher/ and bridge/ as ../assets/theme.css. */
:root{
  --bg:#0a0e12; --panel:#11161c; --panel2:#161d25; --tile:#e9eef1;
  --ink:#dfe7ec; --muted:#8a97a2; --faint:#5c6772;
  --cyan:#22d3e0; --cyan-dim:#0f8f99;
  --green:#3ddc84; --red:#ff5555; --amber:#ffd166;
  --line:rgba(140,160,175,.14); --line2:rgba(140,160,175,.28);
  --disp:"Chakra Petch",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* Same background as the landing: cyan glow + 46px grid "squares". */
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:
    radial-gradient(1100px 520px at 78% -8%, rgba(34,211,224,.10), transparent 60%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:auto, 46px 46px, 46px 46px;
}
a{color:var(--cyan);text-decoration:none}
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:.3px}
.pig{filter:drop-shadow(0 0 10px rgba(34,211,224,.5))}

/* Header — identical to the landing's nav. */
header.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(9px);
  background:rgba(10,14,18,.72);border-bottom:1px solid var(--line)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.nav .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.5px;display:flex;align-items:center;gap:9px}
.nav nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav nav a{color:var(--muted);font-size:14px;font-weight:500}
.nav nav a:hover{color:var(--ink)}
.btn{font-family:var(--mono);font-weight:600;font-size:13.5px;letter-spacing:.02em;padding:9px 15px;
  border-radius:8px;border:1px solid var(--line2);color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:.18s}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.solid{background:var(--cyan);color:#04181b;border-color:var(--cyan)}

/* Content column (narrower than the full-width header). */
.page{max-width:680px;margin:0 auto;padding:26px 24px 56px}

/* Form controls + buttons for the app pages. */
label,.lbl{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-dim);display:block;margin:12px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel);color:var(--ink);font:15px var(--body)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan)}
button{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.02em;
  padding:11px 15px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;transition:.16s}
button:hover{border-color:var(--cyan);color:var(--cyan)}
button.primary{background:var(--cyan);color:#04181b;border-color:var(--cyan)}
button.primary:hover{background:#5fe4ee;color:#04181b}
button.wide{width:100%;margin-top:10px}
button:disabled{opacity:.45;cursor:default;border-color:var(--line);color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0}
.note{background:rgba(127,127,127,.08);border-radius:11px;padding:14px 16px;font-size:13.5px;color:var(--muted)}
.warn{color:var(--amber)}
.mono{font-family:var(--mono)}