/* Phase 11 — PWA/system-state shell, behavior-matched to BeauticiansHub with Crowdfundme identity. */
:root{
  --cf-pwa-green:#12372A;
  --cf-pwa-green-2:#21472D;
  --cf-pwa-lime:#9DE713;
  --cf-pwa-mint:#E8F3EC;
  --cf-pwa-muted:#5F6F65;
  --cf-pwa-border:#DEE7E0;
  --cf-pwa-surface:#FFFFFF;
}
.cf-pwa-state[hidden]{display:none!important}
.cf-pwa-state{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box}
.cf-pwa-state *{box-sizing:border-box}
.cf-pwa-connectivity{
  position:fixed;left:50%;top:14px;z-index:100050;transform:translateX(-50%);
  width:min(760px,calc(100% - 28px));padding:11px 16px;border-radius:13px;
  box-shadow:0 14px 38px rgba(18,55,42,.16);font-size:12.5px;font-weight:750;line-height:1.45;
  display:flex;align-items:center;justify-content:center;gap:9px;text-align:center
}
.admin-bar .cf-pwa-connectivity{top:46px}
.cf-pwa-connectivity--offline{background:var(--cf-pwa-green);color:#FFF;border:1px solid var(--cf-pwa-green)}
.cf-pwa-connectivity--online{background:#F2FBF6;color:#256B4A;border:1px solid #9FD9BE}
.cf-pwa-dot{width:8px;height:8px;border-radius:50%;background:var(--cf-pwa-lime);box-shadow:0 0 0 4px rgba(157,231,19,.18);flex:0 0 auto}
.cf-pwa-connectivity--online .cf-pwa-dot{background:#2D9C6A;box-shadow:0 0 0 4px rgba(45,156,106,.14)}
.cf-pwa-card{
  position:fixed;right:22px;bottom:22px;z-index:100040;width:min(400px,calc(100% - 28px));
  background:var(--cf-pwa-surface);color:var(--cf-pwa-muted);border:1px solid var(--cf-pwa-border);border-radius:20px;
  box-shadow:0 22px 62px rgba(18,55,42,.18);overflow:hidden
}
.cf-pwa-card__accent{height:5px;background:linear-gradient(90deg,#9DE713,#47D195)}
.cf-pwa-card__body{padding:20px}
.cf-pwa-card__top{display:flex;align-items:flex-start;gap:13px}
.cf-pwa-card__icon{width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:var(--cf-pwa-mint);color:var(--cf-pwa-green);display:grid;place-items:center;font-size:20px;font-weight:800}
.cf-pwa-card h2{margin:0;font-family:Sora,Inter,sans-serif;font-size:16.5px;line-height:1.25;color:var(--cf-pwa-green);font-weight:750}
.cf-pwa-card p{margin:6px 0 0;font-size:12.5px;line-height:1.65;color:var(--cf-pwa-muted)}
.cf-pwa-card__actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.cf-pwa-btn{appearance:none;border:0;border-radius:11px;padding:11px 15px;font:750 12px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.cf-pwa-btn:hover{transform:translateY(-1px)}
.cf-pwa-btn:focus-visible{outline:3px solid rgba(157,231,19,.32);outline-offset:2px}
.cf-pwa-btn--primary{background:var(--cf-pwa-lime);color:#15340F;box-shadow:0 8px 18px rgba(157,231,19,.2)}
.cf-pwa-btn--dark{background:var(--cf-pwa-green);color:#FFF}
.cf-pwa-btn--ghost{background:#FFF;color:var(--cf-pwa-green);border:1px solid var(--cf-pwa-border)}
.cf-pwa-close{margin-left:auto;appearance:none;border:0;background:transparent;color:#758178;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:18px;line-height:1}
.cf-pwa-close:hover{background:#F5F8F5;color:var(--cf-pwa-green)}
html.cf-is-offline .cf-pwa-offline-sensitive{opacity:.64;pointer-events:none}
body:has(.cf-support-popup:not([hidden])) .cf-pwa-card{bottom:220px}
@media(max-width:620px){
  .cf-pwa-connectivity{top:8px;width:calc(100% - 16px);border-radius:11px;padding:10px 12px}
  .admin-bar .cf-pwa-connectivity{top:54px}
  .cf-pwa-card{left:10px;right:10px;bottom:10px;width:auto;border-radius:17px}
  body:has(.cf-support-popup:not([hidden])) .cf-pwa-card{bottom:196px}
  .cf-pwa-card__body{padding:17px}
  .cf-pwa-card__actions{display:grid;grid-template-columns:1fr 1fr}
  .cf-pwa-btn{text-align:center}
}
@media(prefers-reduced-motion:reduce){.cf-pwa-state,.cf-pwa-state *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Manual Add to Home Screen guidance when no native install sheet is exposed. */
.cf-pwa-help{position:fixed;inset:0;z-index:100080;display:grid;place-items:center;padding:20px}
.cf-pwa-help__backdrop{position:absolute;inset:0;border:0;background:rgba(10,36,27,.6);backdrop-filter:blur(5px);cursor:pointer}
.cf-pwa-help__dialog{position:relative;z-index:1;width:min(520px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;padding:28px;border:1px solid rgba(18,55,42,.13);border-radius:22px;background:#FFF;color:var(--cf-pwa-muted);box-shadow:0 30px 90px rgba(10,36,27,.32)}
.cf-pwa-help__close{position:absolute;top:16px;right:16px;margin:0}
.cf-pwa-help__icon{width:50px;height:50px;border-radius:16px;background:var(--cf-pwa-mint);color:var(--cf-pwa-green);display:grid;place-items:center;font-size:22px;font-weight:800;margin-bottom:16px}
.cf-pwa-help h2{margin:0 42px 8px 0;font-family:Sora,Inter,sans-serif;font-size:22px;line-height:1.25;color:var(--cf-pwa-green);font-weight:750}
.cf-pwa-help p{margin:0;font-size:13px;line-height:1.7;color:var(--cf-pwa-muted)}
.cf-pwa-help__steps{margin:20px 0 0;padding-left:22px;display:grid;gap:12px;color:var(--cf-pwa-green)}
.cf-pwa-help__steps li{padding-left:4px;font-size:13px;line-height:1.6}
.cf-pwa-help__steps li::marker{color:#62A809;font-weight:800}
.cf-pwa-help__actions{display:flex;justify-content:flex-end;margin-top:22px}
html.cf-pwa-help-open{overflow:hidden}
@media(max-width:620px){.cf-pwa-help{padding:12px}.cf-pwa-help__dialog{padding:24px 20px;border-radius:19px;max-height:calc(100vh - 24px)}.cf-pwa-help h2{font-size:19px}.cf-pwa-help__actions .cf-pwa-btn{width:100%}}