/* CatZep shared theme + navigation chrome.
   Loaded after each page's own <style>, so it restyles every page from one file.
   Page content is untouched; only colors, spacing and navigation change. */

:root{
  --bg:#fffaf6; --fg:#2a2140; --muted:#6f6680; --accent:#6d4aff;
  --border:#f0e2d9; --code-bg:#fbf6f2; --th-bg:#f8eee8; --row:#fffcfa;
  --dot:#ff7a59;
  --bp-brand:#ff7a59; --bp-brand-soft:#fff0ea; --bp-brand-deep:#e0492a;
  --bp-ink:#2a2140; --bp-surface:#ffffff; --bp-accent-soft:#f1ecff;
  --bp-shadow:0 1px 2px rgba(42,33,64,.04),0 4px 14px rgba(42,33,64,.06);
  --bp-shadow-lg:0 12px 40px rgba(42,33,64,.16);
  --bp-radius:14px;
  --bp-round:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --bp-bar-h:60px;
}
html{scroll-padding-top:calc(var(--bp-bar-h) + 16px)}
body{background:var(--bg); color:var(--fg);
     font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:var(--bp-round); color:var(--bp-ink)}
h1{letter-spacing:-.02em}
a{color:var(--accent)}
::selection{background:#ffd6c9}

/* ---------- content pages: gentle polish ---------- */
.wrap h2{border-bottom-color:var(--border)}
.wrap pre{border-radius:12px}
.wrap table{border-radius:10px; overflow:hidden}
.toc{background:var(--bp-surface)!important; border:1px solid var(--border)!important;
     border-radius:var(--bp-radius)!important; box-shadow:var(--bp-shadow)}
.note{border-radius:10px}
figure img{border-radius:12px}

/* ---------- top bar ---------- */
.bp-bar{position:sticky; top:0; z-index:900; height:var(--bp-bar-h);
        background:rgba(255,250,246,.86); backdrop-filter:saturate(1.4) blur(10px);
        -webkit-backdrop-filter:saturate(1.4) blur(10px);
        border-bottom:1px solid var(--border);
        font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.3}
.bp-bar-in{max-width:1200px; height:100%; margin:0 auto; padding:0 20px;
           display:flex; align-items:center; gap:14px}
.bp-logo{display:flex; align-items:center; gap:9px; text-decoration:none!important;
         font-family:var(--bp-round); font-weight:800; font-size:19px; color:var(--bp-ink)!important;
         letter-spacing:-.01em; flex:none}
.bp-logo svg{width:30px; height:30px; flex:none}
.bp-logo b{color:var(--bp-brand-deep)}
.bp-nav{display:flex; align-items:center; gap:2px; margin-left:10px; flex:1; min-width:0}
.bp-nav-item{position:relative}
.bp-nav-link{display:flex; align-items:center; gap:4px; padding:8px 11px; border-radius:10px;
             color:#4a4060!important; text-decoration:none!important; font-weight:600;
             background:none; border:0; font:inherit; font-weight:600; cursor:pointer; white-space:nowrap}
.bp-nav-link:hover,.bp-nav-item.open>.bp-nav-link{background:var(--bp-brand-soft); color:var(--bp-ink)!important}
.bp-nav-link.active{color:var(--bp-brand-deep)!important}
.bp-nav-link.active::after{content:""; position:absolute; left:12px; right:12px; bottom:-11px;
                           height:3px; border-radius:3px; background:var(--bp-brand)}
.bp-caret{width:10px; height:10px; opacity:.55; transition:transform .15s}
.bp-nav-item.open .bp-caret{transform:rotate(180deg)}
.bp-menu{position:absolute; top:calc(100% + 8px); left:0; min-width:280px; max-width:360px;
         background:var(--bp-surface); border:1px solid var(--border); border-radius:var(--bp-radius);
         box-shadow:var(--bp-shadow-lg); padding:8px; display:none}
.bp-nav-item.open .bp-menu{display:block; animation:bp-pop .12s ease-out}
/* invisible bridge over the 8px gap so the pointer can reach the menu */
.bp-menu::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
.bp-menu a{display:flex; justify-content:space-between; gap:12px; padding:9px 12px; border-radius:9px;
           color:var(--bp-ink)!important; text-decoration:none!important; font-weight:500}
.bp-menu a:hover{background:var(--bp-brand-soft)}
.bp-menu a small{color:var(--muted); font-weight:500; white-space:nowrap}
.bp-menu .bp-menu-all{margin-top:4px; border-top:1px solid var(--border); border-radius:0 0 9px 9px;
                      color:var(--accent)!important; font-weight:600}
@keyframes bp-pop{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

.bp-search-btn{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none;
               background:var(--bp-surface); border:1px solid var(--border); border-radius:999px;
               padding:7px 10px 7px 13px; color:var(--muted); font:inherit; cursor:pointer;
               box-shadow:var(--bp-shadow); min-width:190px}
.bp-search-btn:hover{border-color:#eccbbd; color:var(--bp-ink)}
.bp-search-btn svg{width:16px; height:16px}
.bp-search-btn kbd,.bp-kbd{margin-left:auto; font:600 11px/1 system-ui,sans-serif; color:var(--muted);
               background:#f7ece6; border:1px solid var(--border); border-radius:6px; padding:4px 6px}
.bp-burger{display:none; background:none; border:0; padding:8px; border-radius:10px; cursor:pointer; color:var(--bp-ink)}
.bp-burger:hover{background:var(--bp-brand-soft)}
.bp-burger svg{width:24px; height:24px}
.bp-progress{position:absolute; left:0; bottom:-1px; height:2px; width:0;
             background:linear-gradient(90deg,var(--bp-brand),#b98cff)}

/* ---------- mobile drawer ---------- */
.bp-drawer{position:fixed; inset:var(--bp-bar-h) 0 0 0; z-index:899; background:var(--bg);
           overflow-y:auto; padding:12px 18px 40px; display:none;
           font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px}
.bp-drawer.open{display:block}
.bp-drawer details{border-bottom:1px solid var(--border)}
.bp-drawer summary{list-style:none; cursor:pointer; padding:14px 4px; font-weight:700; font-family:var(--bp-round);
                   display:flex; justify-content:space-between; color:var(--bp-ink)}
.bp-drawer summary::-webkit-details-marker{display:none}
.bp-drawer summary::after{content:"+"; color:var(--muted)}
.bp-drawer details[open] summary::after{content:"\2212"}
.bp-drawer a{display:block; padding:9px 12px; color:var(--bp-ink)!important; border-radius:9px; text-decoration:none!important}
.bp-drawer a:hover{background:var(--bp-brand-soft)}
.bp-drawer .bp-drawer-top{font-weight:700; font-family:var(--bp-round); padding:14px 4px; border-bottom:1px solid var(--border); border-radius:0}

@media (max-width:1020px){
  .bp-nav{display:none}
  .bp-burger{display:block}
  .bp-search-btn{min-width:0}
  .bp-search-btn .bp-search-label,.bp-search-btn kbd{display:none}
}

/* ---------- breadcrumb ---------- */
.backlink{font-size:.88rem!important; margin:0 0 1.4em!important; color:var(--muted)}
.bp-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.bp-crumbs a{color:var(--muted)!important; text-decoration:none!important; padding:3px 8px; border-radius:7px;
             background:transparent; transition:background .12s}
.bp-crumbs a:hover{background:var(--bp-brand-soft); color:var(--bp-ink)!important}
.bp-crumbs .bp-sep{opacity:.45}
.bp-crumbs a.bp-home{display:inline-flex; align-items:center; gap:5px}
.bp-crumbs a.bp-home svg{width:14px; height:14px}

/* ---------- prev / next ---------- */
.bp-pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:3.2em 0 1em;
          font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.bp-pager a{display:block; padding:14px 18px; background:var(--bp-surface); border:1px solid var(--border);
            border-radius:var(--bp-radius); text-decoration:none!important; box-shadow:var(--bp-shadow);
            transition:transform .12s,border-color .12s,box-shadow .12s}
.bp-pager a:hover{transform:translateY(-2px); border-color:var(--bp-brand); box-shadow:0 8px 24px rgba(255,122,89,.18)}
.bp-pager small{display:block; color:var(--muted); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em}
.bp-pager span{display:block; color:var(--bp-ink); font-weight:700; font-family:var(--bp-round); margin-top:3px; line-height:1.35}
.bp-pager .bp-next{text-align:right; grid-column:2}
.bp-pager .bp-up{grid-column:1 / -1; text-align:center; padding:10px}
.bp-pager .bp-up span{font-size:.95rem}
@media (max-width:640px){ .bp-pager{grid-template-columns:1fr} .bp-pager .bp-next{grid-column:1} }

/* ---------- floating buttons (existing .floatnav + ours) ---------- */
.floatnav,.bp-float{position:fixed; right:18px; bottom:18px; z-index:800; display:flex; flex-direction:column; gap:8px}
.floatnav button,.floatnav a,.bp-float button{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--bp-surface)!important; color:var(--bp-ink)!important; border:1px solid var(--border)!important;
  box-shadow:var(--bp-shadow); font-size:18px; cursor:pointer; text-decoration:none!important}
.floatnav button:hover,.floatnav a:hover,.bp-float button:hover{background:var(--bp-brand-soft)!important}

/* ---------- search palette ---------- */
.bp-search{position:fixed; inset:0; z-index:1000; background:rgba(42,33,64,.35); backdrop-filter:blur(3px);
           display:none; align-items:flex-start; justify-content:center; padding:10vh 16px 16px;
           font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.bp-search.open{display:flex}
.bp-search-box{width:100%; max-width:640px; background:var(--bp-surface); border-radius:18px;
               box-shadow:var(--bp-shadow-lg); overflow:hidden; border:1px solid var(--border)}
.bp-search-in{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border)}
.bp-search-in svg{width:20px; height:20px; color:var(--muted); flex:none}
.bp-search-in input{flex:1; border:0; outline:0; font:500 18px/1.3 system-ui,sans-serif; background:none; color:var(--bp-ink)}
.bp-results{max-height:60vh; overflow-y:auto; padding:6px; margin:0; list-style:none}
.bp-results li a{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:10px;
                 text-decoration:none!important; color:var(--bp-ink)!important}
.bp-results li a small{color:var(--muted); font-size:.8rem}
.bp-results li a mark{background:#ffd6c9; color:inherit; border-radius:3px; padding:0 1px}
.bp-results li.sel a{background:var(--bp-brand-soft)}
.bp-results .bp-empty{padding:26px; text-align:center; color:var(--muted)}
.bp-search-foot{display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--border);
                color:var(--muted); font-size:.78rem; background:#fff8f4}

/* ---------- hub / index pages (pages with .btnlist) ---------- */
body:has(.btnlist) .wrap{max-width:1040px}
body:has(.btnlist) h1{font-size:2.5rem; margin-top:.2em}
body:has(.btnlist) .lead{font-size:1.1rem; font-style:normal; max-width:720px}
.btnlist{display:grid!important; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px!important; max-width:none!important}
a.btn{background:var(--bp-surface)!important; border:1px solid var(--border)!important; border-radius:var(--bp-radius)!important;
      padding:14px 16px!important; color:var(--bp-ink)!important; font-weight:600!important; line-height:1.35;
      box-shadow:var(--bp-shadow); min-height:58px}
a.btn:hover{border-color:var(--bp-brand)!important; box-shadow:0 8px 24px rgba(255,122,89,.18)!important; transform:translateY(-2px)}
a.btn .dot{background:var(--bp-brand)!important; box-shadow:0 0 0 4px var(--bp-brand-soft)!important}
a.btn .num{color:var(--bp-brand-deep)!important; font-weight:800}
a.btn .count,a.btn .tag,a.btn .soon-tag{margin-left:auto; font-size:.7rem!important; font-weight:700; color:var(--muted);
      background:#f8ece6; border-radius:999px; padding:3px 9px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
a.btn.soon{opacity:.6}
h2.section,h2.part{font-family:var(--bp-round)!important; text-transform:none!important; letter-spacing:-.01em!important;
      font-size:1.3rem!important; color:var(--bp-ink)!important; border:0!important; margin:2.2em 0 .8em!important; padding:0!important}
.grouphdr{max-width:none!important; color:var(--bp-brand-deep)!important; border-bottom:2px solid var(--border)!important;
      font-size:.8rem!important; margin:3.4em 0 .4em!important}
h2.section a::after,.grouphdr a::after{content:" \2192"}

/* ---------- home page ---------- */
.bp-home .wrap{max-width:1120px; padding-top:28px}
.bp-hero{position:relative; overflow:hidden; border-radius:28px; padding:56px 48px 48px; margin:8px 0 40px;
         background:radial-gradient(900px 380px at 100% 0%,#ffdccf 0%,transparent 60%),
                    radial-gradient(700px 360px at 0% 100%,#ebe4ff 0%,transparent 60%),#fff7f2;
         border:1px solid var(--border)}
.bp-hero h1{font-size:3rem; line-height:1.08; margin:0 0 .25em}
.bp-hero h1 span{color:var(--bp-brand-deep)}
.bp-hero .lead{font-size:1.2rem; font-style:normal; color:#5a5070; max-width:620px; margin:0 0 1.4em}
.bp-hero-search{display:flex; align-items:center; gap:12px; max-width:560px; width:100%; cursor:text;
                background:#fff; border:1px solid #efd5c9; border-radius:16px; padding:15px 18px;
                box-shadow:0 6px 24px rgba(224,73,42,.10); color:var(--muted); font:500 17px/1.2 system-ui,sans-serif}
.bp-hero-search:hover{border-color:var(--bp-brand)}
.bp-hero-search svg{width:20px; height:20px}
.bp-hero-cat{position:absolute; right:48px; top:40px; width:150px; height:150px; opacity:.95}
.bp-stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.bp-stats span{background:rgba(255,255,255,.75); border:1px solid var(--border); border-radius:999px;
               padding:6px 13px; font-size:.86rem; color:#5a5070; font-weight:600}
@media (max-width:800px){ .bp-hero{padding:36px 22px} .bp-hero h1{font-size:2.2rem} .bp-hero-cat{display:none} }

.bp-areas{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:0 0 20px}
.bp-area{display:flex; flex-direction:column; gap:6px; padding:18px 18px 16px; border-radius:18px; text-decoration:none!important;
         background:var(--bp-surface); border:1px solid var(--border); box-shadow:var(--bp-shadow);
         transition:transform .12s,box-shadow .12s,border-color .12s; color:var(--bp-ink)!important}
.bp-area:hover{transform:translateY(-3px); border-color:var(--bp-brand); box-shadow:0 10px 28px rgba(255,122,89,.18)}
.bp-area .bp-ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:22px; margin-bottom:4px}
.bp-area b{font-family:var(--bp-round); font-size:1.12rem}
.bp-area small{color:var(--muted); font-size:.9rem; line-height:1.4}

.bp-group{margin:56px 0 0; scroll-margin-top:calc(var(--bp-bar-h) + 16px)}
.bp-group-head{display:flex; align-items:center; gap:12px; margin:0 0 6px}
.bp-group-head .bp-ico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:20px}
.bp-group-head h2{margin:0!important; padding:0!important; border:0!important; font-size:1.7rem}
.bp-group > p{color:var(--muted); margin:0 0 18px 50px}
.bp-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; align-items:start}
.bp-card{background:var(--bp-surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--bp-shadow); overflow:hidden}
.bp-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px;
              border-bottom:1px solid var(--border); background:#fff8f4}
.bp-card-head a{font-family:var(--bp-round); font-weight:800; font-size:1.05rem; color:var(--bp-ink)!important; text-decoration:none!important}
.bp-card-head a:hover{color:var(--bp-brand-deep)!important}
.bp-card-head span{font-size:.72rem; font-weight:700; color:var(--muted); background:#f8ece6; border-radius:999px; padding:3px 9px; white-space:nowrap}
.bp-card ol{list-style:none; margin:0; padding:6px 8px 8px; counter-reset:none}
.bp-card li{margin:0}
.bp-card li a{display:flex; gap:10px; align-items:baseline; padding:7px 10px; border-radius:9px; color:#3a3150!important;
              text-decoration:none!important; font-size:.95rem; line-height:1.35}
.bp-card li a:hover{background:var(--bp-brand-soft); color:var(--bp-ink)!important}
.bp-card li a .num{color:var(--bp-brand-deep); font-weight:800; font-size:.8rem; font-variant-numeric:tabular-nums; min-width:1.5em}
.bp-card li.bp-more{display:none}
.bp-card.expanded li.bp-more{display:block}
.bp-card .bp-toggle{display:block; width:calc(100% - 16px); margin:0 8px 10px; padding:8px; border-radius:9px; border:1px dashed #ecd2c6;
              background:none; color:var(--accent); font:600 .88rem system-ui,sans-serif; cursor:pointer}
.bp-card .bp-toggle:hover{background:var(--bp-accent-soft); border-style:solid}
.bp-foot{margin-top:72px; padding-top:22px; border-top:1px solid var(--border); color:var(--muted); font-size:.88rem; text-align:center}

@media print{ .bp-bar,.bp-drawer,.bp-float,.floatnav,.bp-pager,.bp-search{display:none!important} }

/* pages that already have their own sticky toolbar sit under ours */
.bp-has-bar .bar{top:var(--bp-bar-h)!important}
.bp-group-head h2 a{color:inherit!important; text-decoration:none!important}
.bp-group-head h2 a:hover{color:var(--bp-brand-deep)!important}
.bp-group-head h2 a::after{content:" \2192"; opacity:.35; font-weight:400}
.bp-logo small{font-size:.72em; font-weight:700; color:var(--muted); margin-left:1px}
.bp-logo b{color:var(--bp-brand-deep)}