.cfpwa *{box-sizing:border-box}

.cfpwa-fab{
  position:fixed; right:18px; bottom:18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:12px 16px;
  background: linear-gradient(180deg, var(--cfpwa-accent) 0%, #000 160%);
  color:var(--cfpwa-accentText);
  cursor:pointer; display:none; z-index:99998;
  font: 800 14px/1.05 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  box-shadow: 0 16px 50px rgba(0,0,0,.30);
}
.cfpwa-fab--show{display:block}
.cfpwa-fab:hover{opacity:.94}

.cfpwa-modal{position:fixed; inset:0; display:none; z-index:99999}
.cfpwa-modal[aria-hidden="false"]{display:block}
.cfpwa-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.64)}
.cfpwa-panel{
  position:relative; max-width:580px; margin:10vh auto;
  background:var(--cfpwa-surface); color:var(--cfpwa-surfaceText);
  border-radius:18px; padding:18px;
  box-shadow:0 30px 120px rgba(0,0,0,.45);
  border:1px solid var(--cfpwa-border);
  font: 500 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
.cfpwa-header{display:flex; justify-content:space-between; align-items:center; gap:12px}
.cfpwa-brandline{display:flex; align-items:center; gap:10px}
.cfpwa-pill{
  display:inline-flex; align-items:center;
  font-size:12px; padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--cfpwa-border);
  color:var(--cfpwa-surfaceText);
  background:rgba(0,0,0,.02);
  font-weight:900;
}
.cfpwa-pill--ghost{opacity:.75}
.cfpwa-dot{width:6px;height:6px;border-radius:50%;background:var(--cfpwa-accent)}
.cfpwa-x{
  border:1px solid var(--cfpwa-border);
  background:transparent;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  color:var(--cfpwa-muted);
  font-weight:900;
}
.cfpwa-x:hover{opacity:.9}

.cfpwa-title{margin:14px 0 0 0; font-size:22px; line-height:1.15; letter-spacing:-0.01em}
.cfpwa-subtitle{margin:10px 0 0 0; color:var(--cfpwa-muted); font-size:14px}

.cfpwa-steps{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.cfpwa-step{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--cfpwa-border);
  border-radius:14px; padding:12px;
  background:rgba(0,0,0,.01);
}
.cfpwa-stepnum{
  width:30px; height:30px; border-radius:12px;
  border:1px solid var(--cfpwa-border);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  color:var(--cfpwa-surfaceText);
  background:#fff;
}
.cfpwa-steptitle{font-weight:900}
.cfpwa-stepdesc{color:var(--cfpwa-muted); margin-top:3px}
.cfpwa-stepdesc strong{font-weight:900; color:var(--cfpwa-surfaceText)}

.cfpwa-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px}
.cfpwa-btn{
  border:1px solid var(--cfpwa-border);
  border-radius:12px; padding:10px 12px;
  background:transparent; cursor:pointer;
  color:var(--cfpwa-surfaceText);
  font-weight:900;
}
.cfpwa-btn:hover{opacity:.92}
.cfpwa-primary{
  border-color: transparent;
  background:var(--cfpwa-accent);
  color:var(--cfpwa-accentText);
}
.cfpwa-primary:disabled{opacity:.55; cursor:not-allowed}

.cfpwa-chicche{margin-top:10px; display:flex; gap:14px; align-items:center}
.cfpwa-link{
  display:inline-flex; align-items:center; gap:8px;
  border:none; background:transparent;
  color:var(--cfpwa-accent);
  font-weight:900;
  cursor:pointer;
  padding:6px 0;
}
.cfpwa-link:hover{opacity:.88}

.cfpwa-optout{display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--cfpwa-muted); font-size:13px}

.cfpwa-debugbox{
  margin-top:12px;
  background:#0b1020;
  color:#e5e7eb;
  border-radius:14px;
  padding:12px;
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
}

body.cfpwa-open{overflow:hidden}

@media (max-width: 640px){
  .cfpwa-panel{margin:8vh 12px}
}