@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');
/* Blackbook shared theme layer — loaded AFTER each page's own styles so the
   dark overrides win the cascade. Theme key: localStorage bb_theme (default
   dark, set by the inline bootstrap snippet before first paint). */

/* ── floating theme toggle (pages without a nav toggle get this FAB) ── */
.bb-theme-fab{position:fixed;right:14px;bottom:14px;z-index:70;width:42px;height:42px;
  border-radius:999px;border:2px solid #1A1A1A;background:#FFFDF8;color:#1A1A1A;
  font-size:17px;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 0 #1A1A1A}
[data-theme="dark"] .bb-theme-fab{background:#23232a;border-color:#45454e;color:#F2EFE6;
  box-shadow:0 3px 0 #000}

/* ── shared faint doodle backdrop (skipped on pages that have their own) ── */
.bb-doodles{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.03}
[data-theme="dark"] .bb-doodles{opacity:.04}
.bb-doodles svg{width:100%;height:100%}
.bb-doodles .g{stroke:#E09A12;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .bb-doodles .g{stroke:#F4B73C}
.bb-doodles text.g{fill:none;stroke-width:1.4;font-weight:800;font-family:Inter,Arial,sans-serif}

/* ════════ DARK THEME for the cream/app-look page family ════════
   Covers both the static legal/marketing pages and the FastAPI auth/commerce
   pages (they share class vocabulary: .card .btn .muted .hr .row .modal …). */

[data-theme="dark"] body{background:#0F0F12;color:#ECE8DD}
[data-theme="dark"] nav{background:rgba(15,15,18,.94)!important;border-color:#2c2c33!important}
[data-theme="dark"] .logo{color:#ECE8DD}
[data-theme="dark"] .nav a.back{color:#A8A294}
[data-theme="dark"] .nav a.back:hover{color:#ECE8DD}
[data-theme="dark"] .glow{display:none}

[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] .brand{color:#ECE8DD}
[data-theme="dark"] p,[data-theme="dark"] li{color:#CFCABD}
[data-theme="dark"] strong{color:#fff}
[data-theme="dark"] a{color:#F2A03D}
[data-theme="dark"] .eyebrow{color:#F4B73C}
[data-theme="dark"] .upd,[data-theme="dark"] .mut,[data-theme="dark"] .muted{color:#A8A294}

[data-theme="dark"] .card{background:#1B1B20;border-color:#45454e;color:#ECE8DD;
  box-shadow:0 4px 0 #000}
[data-theme="dark"] .modal{background:#1B1B20;border-color:#45454e;color:#ECE8DD}
[data-theme="dark"] .row{border-color:#33333a}
[data-theme="dark"] .row b{color:#ECE8DD}
[data-theme="dark"] code{background:#2a2418;color:#E8C878;border-color:#45454e}
[data-theme="dark"] footer{background:#15151a;border-color:#2c2c33}
[data-theme="dark"] .fwrap{color:#7d7a70}
[data-theme="dark"] .fwrap a{color:#A8A294}
[data-theme="dark"] .fwrap a:hover{color:#F2A03D}

[data-theme="dark"] .btn{background:#23232a;border-color:#45454e;color:#ECE8DD;
  box-shadow:0 3px 0 #000}
[data-theme="dark"] .btn-primary{background:#2E9E4D;color:#fff}
[data-theme="dark"] .btn-orange{background:#E8941F;color:#141414}
[data-theme="dark"] .btn[disabled]{box-shadow:none}
[data-theme="dark"] .btn-tall{box-shadow:0 3px 0 #000}
[data-theme="dark"] .plan,[data-theme="dark"] .plans .plan{background:#1B1B20;
  border-color:#45454e;color:#ECE8DD;box-shadow:0 4px 0 #000}
[data-theme="dark"] .plan.sel{border-color:#F2A03D;box-shadow:0 4px 0 #F2A03D}
[data-theme="dark"] .price{color:#ECE8DD}

[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=email],[data-theme="dark"] input[type=password],
[data-theme="dark"] textarea,[data-theme="dark"] select{
  background:#15151a!important;border-color:#45454e!important;color:#ECE8DD!important}
[data-theme="dark"] label.ck{color:#BDB8AB}
[data-theme="dark"] .hr{color:#7d7a70}
[data-theme="dark"] .hr:before,[data-theme="dark"] .hr:after{border-color:#2c2c33}
[data-theme="dark"] .err{color:#FF8D86}
[data-theme="dark"] .ok{color:#5ECB84}
[data-theme="dark"] .linkish{color:#F4B73C}
[data-theme="dark"] .small-link{background:#23232a;border-color:#45454e;color:#ECE8DD;
  box-shadow:0 3px 0 #000}
[data-theme="dark"] .small-link b{color:#F4B73C}
[data-theme="dark"] .resend{color:#A8A294}
[data-theme="dark"] .tag,[data-theme="dark"] .tag a{color:#7d7a70}
[data-theme="dark"] .tag a:hover{color:#ECE8DD}
[data-theme="dark"] .banner{background:#2a2418;border-color:#45454e;color:#ECE8DD}
[data-theme="dark"] .badge.v{background:#163d22;color:#5ECB84}
[data-theme="dark"] .badge.x{background:#42201e;color:#FF8D86}
[data-theme="dark"] .gbig{background:#16263F;border-color:#45454e;box-shadow:0 3px 0 #000}
[data-theme="dark"] .kicker,[data-theme="dark"] .pill{background:#2a2418;color:#F4B73C;
  border-color:#45454e}
[data-theme="dark"] .feat,[data-theme="dark"] .wrow,[data-theme="dark"] .stat,
[data-theme="dark"] .chip,[data-theme="dark"] .schip{background:#1B1B20;
  border-color:#45454e;color:#ECE8DD}

/* ── limited content area on EVERY page (mirrors the homepage stage) ── */
body{background:#F0E7D4}
.bb-stage{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,1296px);background:rgba(250,246,238,.93);
  border-left:1.5px solid #D9CEB2;border-right:1.5px solid #D9CEB2;
  z-index:-2;pointer-events:none}
[data-theme="dark"] body{background:#070709}
[data-theme="dark"] .bb-stage{background:rgba(13,13,16,.93);border-color:#2c2c33}
/* doodles live INSIDE the stage, clipped to its width */
.bb-doodles{left:50%;transform:translateX(-50%);width:min(100%,1296px);
  right:auto;overflow:hidden}
/* subpage footers must not paint across the gutters */
footer{background:transparent!important;border-top:none!important}
[data-theme="dark"] footer{background:transparent!important}


/* ===== shared header + footer (homepage parity) — injected by theme.js ===== */
.bbchrome nav:not(.bbnav){display:none!important}
.bbchrome footer:not(.bbfoot){display:none!important}
.bbchrome .tag{display:none!important}
.bbchrome img.logo{display:none!important}

.bbnav{position:sticky;top:0;z-index:40;background:#FAF6EE;border-bottom:1.5px solid #E8DFC9}
[data-theme="dark"] .bbnav{background:#0F0F12;border-color:#2a2f2c}
.bbnav .in{max-width:1240px;margin:0 auto;padding:0 18px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.bbnav .bblogo{display:flex;align-items:center;gap:9px;font-family:'Carter One',cursive;font-size:20px;color:#1A1A1A;text-decoration:none}
[data-theme="dark"] .bbnav .bblogo{color:#ECE8DD}
.bbnav .bblogo img{width:32px;height:32px;border-radius:8px}
.bbnav .lk{display:flex;align-items:center;gap:22px}
.bbnav .lk a{color:#6f6757;font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap}
.bbnav .lk a:hover{color:#1A1A1A}
[data-theme="dark"] .bbnav .lk a{color:#9aa39c}
[data-theme="dark"] .bbnav .lk a:hover{color:#ECE8DD}
.bbnav .lk a.gold{background:linear-gradient(135deg,#F4B73C,#FF8C1A);color:#1a1407;border-radius:11px;padding:9px 16px;font-weight:800;border:2px solid #1A1A1A;box-shadow:0 3px 0 #1A1A1A}
.bbnav .lk a.gold:hover{color:#1a1407}
.bbnav .lk a.line{border:1.5px solid #1A1A1A;border-radius:11px;padding:8px 15px;color:#1A1A1A}
[data-theme="dark"] .bbnav .lk a.line{border-color:#45454e;color:#ECE8DD}
.bbnav .rt{display:flex;align-items:center;gap:10px}
.bbnav .tg{width:38px;height:38px;border-radius:999px;border:1.5px solid #d9cfbc;background:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center;color:#1A1A1A;flex:none}
[data-theme="dark"] .bbnav .tg{background:#23232a;border-color:#45454e;color:#ECE8DD}
.bbnav .bg{display:none;background:none;border:0;cursor:pointer;color:#1A1A1A;padding:0}
.bbnav .bg svg{width:24px;height:24px}
.bbnav .tg svg{width:19px;height:19px}
.bbnav .lk a svg{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
.bbnav .lk a.line.gfill{background:#2E9E4D;color:#fff;border-color:#2E9E4D}
.bbnav .lk a.line.gfill:hover{background:#34A853;border-color:#34A853;color:#fff}
.propill{display:inline-block;background:#1A1A1A;color:#fff;font-family:'Carter One',cursive;font-weight:400;font-size:13px;border-radius:4px;padding:1px 8px 2px;margin-left:2px;line-height:1}
[data-theme="dark"] .bbnav .bg{color:#ECE8DD}
@media(max-width:860px){
  .bbnav .lk{position:fixed;inset:60px 0 auto 0;flex-direction:column;align-items:stretch;background:#FAF6EE;border-bottom:1.5px solid #E8DFC9;padding:16px 20px;gap:14px;display:none}
  [data-theme="dark"] .bbnav .lk{background:#0F0F12;border-color:#2a2f2c}
  .bbnav .lk.open{display:flex}
  .bbnav .bg{display:block}
}
.bbfoot{margin-top:40px;background:transparent!important;border:0!important;padding:0!important}
.bbfoot .in{max-width:1240px;margin:0 auto;background:#fff;border:1.5px solid #E8DFC9;border-bottom:0;border-radius:26px 26px 0 0;padding:40px 26px 28px}
[data-theme="dark"] .bbfoot .in{background:#15151a;border-color:#2a2f2c}
.bbfoot .ftop{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:20px;align-items:stretch}
.bbfoot .fb,.bbfoot .fc{border:1.5px solid #E8DFC9;border-radius:18px;padding:22px;background:#FAF6EE;box-shadow:0 5px 16px rgba(0,0,0,.04)}
[data-theme="dark"] .bbfoot .fb,[data-theme="dark"] .bbfoot .fc{border-color:#2a2f2c;background:#101013;box-shadow:0 5px 16px rgba(0,0,0,.3)}
.bbfoot .bbl{display:flex;align-items:center;gap:9px;font-family:'Carter One',cursive;font-size:19px;color:#1A1A1A;text-decoration:none}
[data-theme="dark"] .bbfoot .bbl{color:#ECE8DD}
.bbfoot .bbl img{width:30px;height:30px;border-radius:8px}
.bbfoot .fb p{color:#6f6757;font-size:14px;margin-top:11px;max-width:280px}
[data-theme="dark"] .bbfoot .fb p{color:#9aa39c}
.bbfoot h5{color:#B06E10;text-transform:uppercase;letter-spacing:1px;font-size:12px;margin-bottom:11px;font-weight:800}
[data-theme="dark"] .bbfoot h5{color:#E8B94A}
.bbfoot .fc a{display:block;color:#6f6757;font-size:14.5px;margin-bottom:8px;text-decoration:none}
.bbfoot .fc a:hover{color:#1A1A1A}
[data-theme="dark"] .bbfoot .fc a{color:#9aa39c}
[data-theme="dark"] .bbfoot .fc a:hover{color:#ECE8DD}
.bbfoot .cp{color:#8a8171;font-size:13px;margin-top:28px;border-top:1px solid #E8DFC9;padding-top:18px;text-align:center}
[data-theme="dark"] .bbfoot .cp{border-color:#2a2f2c}
.bbnav .cone,.bbfoot .cone{font-family:'Carter One',cursive}
@media(max-width:860px){
  .bbfoot .in{margin:0 12px;padding:24px 14px 14px;border-radius:16px 16px 0 0}
  .bbfoot .ftop{grid-template-columns:repeat(3,1fr);gap:10px}
  .bbfoot .fb,.bbfoot .fc{padding:14px 12px;border-radius:14px}
  .bbfoot .fb{grid-column:1/-1}
  .bbfoot .fb p{max-width:none}
  .bbfoot h5{font-size:10px;margin-bottom:8px}
  .bbfoot .fc a{font-size:11.5px;margin-bottom:6px}
  .bbfoot .cp{font-size:10.5px;white-space:nowrap}
  .bbfoot .cp .cone{font-size:11.5px}
}