/* ===========================================================================
   PUBLIC PAGES (pubpages.css) — theme-aware content styles for the guest/CMS
   pages now rendered INSIDE the active theme's app shell (cmspage, blog,
   blogpost, platform-services, affiliate-program, smm-api, status). Everything
   is expressed with --nv-* variables so it adapts to NeumorphicPro (dark) and
   Lumen (light/dark) automatically. Loaded per-page via the header page_head slot.
   =========================================================================== */
.pubx{max-width:920px;margin:0 auto;padding:4px 0 34px}
.pubx-wide{max-width:1140px}
.pubx-crumb{font-size:12.5px;color:var(--nv-muted);margin-bottom:12px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pubx-crumb a{color:var(--nv-muted);text-decoration:none}
.pubx-crumb a:hover{color:var(--nv-accent)}
.pubx-crumb i{font-size:9px;opacity:.6}
.pubx-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--nv-accent);background:color-mix(in srgb,var(--nv-accent) 12%,transparent);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.pubx-title{font-size:clamp(26px,5vw,34px);font-weight:800;letter-spacing:-.025em;color:var(--nv-text);margin:0 0 10px;line-height:1.14}
.pubx-title .g{color:var(--nv-accent)}
.pubx-lead{font-size:16px;color:var(--nv-muted);margin:0 0 20px;line-height:1.6;max-width:780px}
.pubx-card{background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:var(--nv-r,16px);padding:24px 26px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
/* CTA buttons */
.pubx-cta{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.pubx-btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:12px;font-weight:800;font-size:14.5px;text-decoration:none;border:0;cursor:pointer;background:var(--nv-accent);color:#fff;transition:filter .15s,transform .12s;white-space:nowrap}
.pubx-btn:hover{filter:brightness(1.06);color:#fff}
.pubx-btn:active{transform:translateY(1px)}
.pubx-btn.ghost{background:transparent;border:1.5px solid var(--nv-border,#e5e7eb);color:var(--nv-text)}
.pubx-btn.ghost:hover{border-color:var(--nv-accent);color:var(--nv-accent)}
/* prose (cms + article body) */
.pubx-prose{font-size:15.5px;line-height:1.8;color:var(--nv-text-soft,var(--nv-text))}
.pubx-prose>*:first-child{margin-top:0}
.pubx-prose h1,.pubx-prose h2{font-size:22px;font-weight:800;margin:28px 0 12px;color:var(--nv-text);letter-spacing:-.01em}
.pubx-prose h3{font-size:18px;font-weight:700;margin:22px 0 10px;color:var(--nv-text)}
.pubx-prose h4{font-size:16px;font-weight:700;margin:18px 0 8px;color:var(--nv-text)}
.pubx-prose p{margin:0 0 15px}
.pubx-prose ul,.pubx-prose ol{margin:0 0 16px;padding-left:22px}
.pubx-prose li{margin:7px 0}
.pubx-prose a{color:var(--nv-accent);font-weight:600}
.pubx-prose img{max-width:100%;height:auto;border-radius:12px;margin:8px 0}
.pubx-prose table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.pubx-prose th,.pubx-prose td{border:1px solid var(--nv-border,#e5e7eb);padding:9px 12px;text-align:left}
.pubx-prose th{background:var(--nv-surface-2,rgba(0,0,0,.03));font-weight:700;color:var(--nv-text)}
.pubx-prose blockquote{border-left:3px solid var(--nv-accent);margin:0 0 16px;padding:6px 16px;color:var(--nv-muted)}
.pubx-prose code{background:var(--nv-surface-2,rgba(0,0,0,.05));padding:2px 6px;border-radius:6px;font-size:13px}
.pubx-prose pre{background:var(--nv-surface-2,rgba(0,0,0,.05));border:1px solid var(--nv-border,#e5e7eb);border-radius:10px;padding:14px;overflow:auto;margin:0 0 16px}
.pubx-prose pre code{background:none;padding:0}
/* section heading */
.pubx-sec{margin-top:34px}
.pubx-eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--nv-accent);display:block;margin-bottom:5px}
.pubx-h2{font-size:23px;font-weight:800;color:var(--nv-text);letter-spacing:-.02em;margin:0 0 16px}
.pubx-sub{color:var(--nv-muted);font-size:14.5px;margin:-8px 0 16px}
/* grids */
.pubx-grid{display:grid;gap:14px}
.pubx-g3{grid-template-columns:repeat(3,1fr)}
.pubx-g4{grid-template-columns:repeat(4,1fr)}
.pubx-autofit{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pubx-svcfit{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:760px){.pubx-g3,.pubx-g4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.pubx-g3,.pubx-g4,.pubx-autofit{grid-template-columns:1fr}}
/* stat tiles */
.pubx-stat{background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:14px;padding:18px;text-align:center}
.pubx-stat .n{font-size:26px;font-weight:800;color:var(--nv-accent);line-height:1}
.pubx-stat .l{font-size:12.5px;color:var(--nv-muted);margin-top:6px}
/* feature + step cards */
.pubx-feat{background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:14px;padding:20px}
.pubx-feat .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--nv-accent);background:color-mix(in srgb,var(--nv-accent) 12%,transparent);margin-bottom:12px}
.pubx-feat h3{font-size:16px;font-weight:700;color:var(--nv-text);margin:0 0 6px}
.pubx-feat p{font-size:13.5px;color:var(--nv-muted);margin:0;line-height:1.6}
.pubx-step{background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:14px;padding:18px}
.pubx-step .num{width:30px;height:30px;border-radius:9px;background:var(--nv-accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:10px}
.pubx-step h3{font-size:15px;font-weight:700;color:var(--nv-text);margin:0 0 5px}
.pubx-step p{font-size:13px;color:var(--nv-muted);margin:0;line-height:1.55}
/* blog cards */
.pubx-blogcard{display:flex;flex-direction:column;background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .16s,box-shadow .16s}
.pubx-blogcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,0,0,.4)}
.pubx-blogcard .img{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--nv-surface-2,#e5e7eb)}
.pubx-blogcard .img.ph{display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--nv-muted)}
.pubx-blogcard .bd{padding:15px 16px}
.pubx-blogcard .dt{font-size:11.5px;color:var(--nv-muted);margin-bottom:5px}
.pubx-blogcard h3{font-size:16px;font-weight:700;color:var(--nv-text);margin:0 0 7px;line-height:1.3}
.pubx-blogcard p{font-size:13px;color:var(--nv-muted);margin:0 0 10px;line-height:1.55}
.pubx-blogcard .rd{font-size:12.5px;font-weight:700;color:var(--nv-accent)}
/* platform service cards */
.pubx-svc{background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:13px;padding:15px;display:flex;flex-direction:column}
.pubx-svc .nm{font-weight:700;color:var(--nv-text);font-size:13.5px;margin-bottom:8px;line-height:1.35}
.pubx-svc .pr{font-weight:800;color:var(--nv-accent);font-size:15px}
.pubx-svc .pr small{font-weight:600;color:var(--nv-muted);font-size:11px}
.pubx-svc .mm{font-size:11.5px;color:var(--nv-muted);margin:6px 0 12px}
.pubx-svc .pubx-btn{height:40px;font-size:13px;justify-content:center;margin-top:auto}
.pubx-grp{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;color:var(--nv-text);margin:24px 0 13px}
.pubx-grp .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex:none}
/* article image + share */
.pubx-feat-img{width:100%;max-height:420px;object-fit:cover;border-radius:16px;margin-bottom:20px}
.pubx-share{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--nv-border,#e5e7eb)}
.pubx-share a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--nv-border,#e5e7eb);color:var(--nv-text);text-decoration:none;font-size:13px;font-weight:600}
.pubx-share a:hover{border-color:var(--nv-accent);color:var(--nv-accent)}
/* related internal links */
.pubx-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pubx-rel{display:flex;align-items:center;gap:11px;background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:12px;padding:13px 15px;text-decoration:none;transition:border-color .15s}
.pubx-rel:hover{border-color:var(--nv-accent)}
.pubx-rel .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex:none}
.pubx-rel .nm{font-weight:700;color:var(--nv-text);font-size:13.5px}
.pubx-rel .ds{font-size:11.5px;color:var(--nv-muted)}
/* FAQ accordion */
.pubx-faq .item{background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:12px;margin-bottom:10px;overflow:hidden}
.pubx-faq .q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;cursor:pointer;font-weight:700;font-size:14.5px;color:var(--nv-text)}
.pubx-faq .q i{color:var(--nv-accent);transition:transform .2s;font-size:13px;flex:none}
.pubx-faq .item.open .q i{transform:rotate(45deg)}
.pubx-faq .a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.pubx-faq .item.open .a{max-height:400px}
.pubx-faq .a div{padding:0 17px 15px;color:var(--nv-muted);font-size:14px;line-height:1.7}
/* CTA band */
.pubx-band{margin-top:34px;border-radius:18px;padding:32px 28px;text-align:center;background:linear-gradient(135deg,var(--nv-accent),color-mix(in srgb,var(--nv-accent) 62%,#000 6%));color:#fff}
.pubx-band h2{font-size:22px;font-weight:800;margin:0 0 8px;color:#fff}
.pubx-band p{font-size:14.5px;margin:0 0 16px;color:rgba(255,255,255,.9)}
.pubx-band .pubx-btn{background:#fff;color:var(--nv-accent)}
.pubx-band .pubx-btn:hover{color:var(--nv-accent);filter:brightness(1)}
/* API docs */
.pubx-ep{background:var(--nv-surface,#fff);border:1px solid var(--nv-border,#e5e7eb);border-radius:12px;overflow:hidden;margin-bottom:14px}
.pubx-ep .h{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--nv-border,#e5e7eb);font-weight:700;color:var(--nv-text)}
.pubx-ep .m{font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px;background:color-mix(in srgb,var(--nv-accent) 14%,transparent);color:var(--nv-accent)}
.pubx-ep pre{margin:0;padding:14px 15px;overflow:auto;font-size:12.5px;line-height:1.6;color:var(--nv-text-soft,var(--nv-text));background:var(--nv-surface-2,rgba(0,0,0,.03))}
.pubx-ep table{width:100%;border-collapse:collapse;margin:0;font-size:13px}
.pubx-ep th,.pubx-ep td{border-bottom:1px solid var(--nv-border,#e5e7eb);padding:8px 15px;text-align:left;color:var(--nv-text-soft,var(--nv-text))}
.pubx-ep th{background:var(--nv-surface-2,rgba(0,0,0,.03));color:var(--nv-muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em}
.pubx-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 16px}
.pubx-table th,.pubx-table td{border:1px solid var(--nv-border,#e5e7eb);padding:9px 13px;text-align:left;color:var(--nv-text-soft,var(--nv-text))}
.pubx-table th{background:var(--nv-surface-2,rgba(0,0,0,.03));color:var(--nv-muted);font-weight:700}
/* v2 — the active theme sets `.nv a{color:var(--nv-accent)}` on body.nv, which repaints
   the filled buttons' text to the accent (invisible on the accent background). Force
   button text colours explicitly. Higher-specificity variants win inside the !important tier. */
.pubx-btn,.pubx-btn:visited{color:#fff!important}
.pubx-btn:hover{color:#fff!important}
.pubx-btn.ghost{color:var(--nv-text)!important}
.pubx-btn.ghost:hover{color:var(--nv-accent)!important}
.pubx-band .pubx-btn{color:var(--nv-accent)!important}
.pubx-band .pubx-btn:hover{color:var(--nv-accent)!important}