/* ============================================================
   Before You Pop — CHECK A MATCH FLOW styles (checkflow.css)
   Full Part 1 experience: choose them → birthdays → how long →
   adaptive test → guess → unlock → contact → reveal → decision →
   high-rank contact → save → PDF → history. Admin Edit Mode.
   ============================================================ */

.checkflow{max-width:680px;margin:0 auto;padding:22px 18px 90px;min-height:100vh;position:relative}
.checkflow .flow-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.checkflow .flow-head .backhat{background:none;color:var(--gpx);font-weight:700;font-size:13px}
.checkflow .flow-head .crumb{color:var(--dim2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;flex:1;text-align:center}
.checkflow .flow-head-right{display:flex;align-items:center;gap:8px}
.checkflow .flow-help{width:26px;height:26px;border-radius:50%;background:var(--pink);color:#000;font-weight:900;display:grid;place-items:center;font-size:14px;animation:softPulse 1.6s infinite}
.checkflow .me-chip{transition:transform .12s,border-color .12s,box-shadow .12s}
.checkflow .me-chip:active,.checkflow .me-chip:hover{transform:scale(1.04);border-color:var(--gpx);box-shadow:0 0 12px rgba(0,255,176,.25)}

/* Result Completion page — action buttons: true-black default, own color on
   hover/pressed (desktop). Contrast kept high. Mobile uses :active feedback. */
.checkflow .cbtn-col{display:grid;gap:10px;margin-top:16px}

/* ---------- Branded BYP result reveal card (on-screen + share image) ---------- */
.checkflow .bc-reveal-stage{width:100%;max-width:440px;margin:4px auto;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.checkflow .bc-reveal-stage .bc-card{position:absolute;top:0;left:0;transform-origin:top left;will-change:transform}
.checkflow .bc-card{position:relative;overflow:hidden;width:1080px;height:1350px;background:linear-gradient(165deg,#120026 0%,#000 55%,#0c0a14 100%);display:flex}
.checkflow .bc-inner{position:relative;z-index:3;box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 54px 44px}
.checkflow .bc-header{width:100%;display:flex;justify-content:center;margin-bottom:10px}
.checkflow .bc-logo-img{max-height:210px;max-width:640px;width:auto;height:auto;object-fit:contain}
.checkflow .bc-mark{font-family:'Archivo';font-size:80px;font-weight:900;line-height:1;color:#fff}
.checkflow .bc-brand-sub{font-size:18px;letter-spacing:.4em;color:rgba(255,255,255,.6)}
.checkflow .bc-info{text-align:center}
.checkflow .bc-marker{font-size:13px;letter-spacing:.4em;color:#ff2ec4;text-transform:uppercase;text-shadow:0 0 12px rgba(255,46,196,.6)}
.checkflow .bc-date{font-size:17px;letter-spacing:.22em;color:rgba(255,255,255,.55);margin-top:4px}
.checkflow .bc-title{font-size:38px;font-weight:800;color:#fff;letter-spacing:.01em}
.checkflow .bc-label{font-size:15px;letter-spacing:.5em;color:rgba(255,255,255,.5);margin-top:30px}
.checkflow .bc-score{font-family:'Consolas',monospace;font-size:92px;font-weight:900;line-height:1.05;color:#ff2ec4;text-shadow:0 0 40px rgba(255,46,196,.95),0 0 14px rgba(255,46,196,.7);letter-spacing:.03em;margin:10px 0 4px;animation:bcPulse 2.4s ease-in-out infinite}
@keyframes bcPulse{0%,100%{text-shadow:0 0 24px rgba(255,46,196,.5),0 0 10px rgba(255,46,196,.4)}50%{text-shadow:0 0 46px rgba(255,46,196,.98),0 0 18px rgba(255,46,196,.8)}}
.checkflow .bc-result{font-family:'Archivo';font-size:42px;font-weight:900;color:#fff;margin-bottom:36px}
.checkflow .bc-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%}
.checkflow .bc-cell{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:26px;padding:24px 12px;text-align:center}
.checkflow .bc-cell-e{font-size:44px;margin-bottom:6px}
.checkflow .bc-cell-n{font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.6);margin-bottom:8px}
.checkflow .bc-cell-v{font-size:42px;font-weight:800;color:#fff}
.checkflow .bc-cell-of{font-size:22px;color:rgba(255,255,255,.4)}
.checkflow .bc-section{width:100%;margin-top:26px;border:1px solid;border-radius:26px;padding:18px 20px;box-sizing:border-box}
.checkflow .bc-sec-label{font-size:13px;letter-spacing:.34em;color:rgba(255,255,255,.6);margin-bottom:8px}
.checkflow .bc-guess{margin-top:26px;border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:16px 18px;background:rgba(255,255,255,.03)}
.checkflow .bc-guess .bc-sec-label{color:rgba(255,255,255,.55)}
.checkflow .bc-guess-rows{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:24px;font-weight:700}
.checkflow .bc-gr i{font-style:normal;color:rgba(255,255,255,.55)}
.checkflow .bc-gr b{color:#fff}
.checkflow .bc-dec-val{font-size:38px;font-weight:900;letter-spacing:.02em}
.checkflow .bc-foot{margin-top:auto;padding-top:22px;font-size:16px;letter-spacing:.14em;color:rgba(255,255,255,.5);text-align:center;width:100%}
.checkflow .bc-aura{position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;pointer-events:none}
.checkflow .bc-aura-p{background:#ff2ec4;width:520px;height:520px;top:-140px;left:-120px}
.checkflow .bc-aura-b{background:#00e5ff;width:560px;height:560px;bottom:-180px;right:-140px}
.checkflow .bc-spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.7;filter:blur(1px)}
.checkflow .bc-spark-1{top:210px;left:120px;box-shadow:0 0 12px #ff2ec4;background:#ff2ec4}
.checkflow .bc-spark-2{top:820px;right:90px;box-shadow:0 0 12px #00e5ff;background:#00e5ff}
.checkflow .bc-spark-3{bottom:150px;left:150px;box-shadow:0 0 12px #a855ff;background:#a855ff}
.checkflow .wow .bc-score{animation:bcPulse 2.4s ease-in-out infinite}
.checkflow .cbtn.action{background:#000;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:14px 18px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:background .15s,border-color .15s,transform .08s,color .15s;width:100%}
.checkflow .cbtn.action:not(:disabled):hover{background:var(--blue);color:#000;border-color:var(--blue);transform:translateY(-1px)}
.checkflow .cbtn.action:not(:disabled):active{transform:scale(.99)}
.checkflow .cbtn.action.share:not(:disabled):hover{background:var(--pink);border-color:var(--pink)}
.checkflow .cbtn.action.image:not(:disabled):hover{background:var(--lime);color:#000;border-color:var(--lime)}
.checkflow .cbtn.action.hist:not(:disabled):hover{background:var(--violet);color:#fff;border-color:var(--violet)}
.checkflow .cbtn.action.other:not(:disabled):hover{background:var(--lime);color:#000;border-color:var(--lime)}
.checkflow .cbtn.action:focus-visible{outline:2px solid var(--gpx);outline-offset:2px}
.checkflow h1{font-family:'Archivo';font-weight:900;font-size:clamp(22px,6vw,34px);line-height:1.05;margin:14px 0 6px}
.checkflow .sub{color:var(--dim);font-size:14px;line-height:1.45;margin-bottom:16px}
.checkflow .sub b{color:#fff}
.checkflow .flow-card{background:#0b0b0b;border:1px solid #222;border-radius:16px;padding:16px;margin-bottom:12px}
.checkflow .flow-card label{display:block;font-size:10px;letter-spacing:.22em;color:var(--dim2);text-transform:uppercase;margin-bottom:6px}
.checkflow input[type=text],.checkflow input[type=date],.checkflow input[type=email],.checkflow input[type=tel],.checkflow input[type=password],.checkflow select{
  width:100%;background:#0f0f0f;border:1px solid #333;border-radius:10px;color:#fff;padding:12px 12px;font-size:15px;font-family:inherit}
.checkflow input:focus,.checkflow select:focus{outline:none;border-color:var(--gpx)}
.checkflow .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.checkflow .cbtn{font-size:13px;font-weight:800;letter-spacing:.08em;border-radius:12px;padding:13px 18px;color:#000;text-transform:uppercase}
.checkflow .cbtn.primary{background:var(--pink)}
.checkflow .cbtn.primary.green{background:var(--gpx);color:#000}
.checkflow .cbtn.ghost{background:transparent;color:var(--dim);border:1px solid #333}
.checkflow .cbtn:disabled{opacity:.4;cursor:not-allowed}
.checkflow .muted{color:var(--dim2);font-size:12.5px;line-height:1.4}

/* step counter */
.checkflow .step-indicator{display:flex;gap:6px;align-items:center;margin:6px 0 14px}
.checkflow .step-indicator .step-seg{height:4px;flex:1;background:#1c1c1c;border-radius:2px}
.checkflow .step-indicator .step-seg.done{background:var(--gpx)}
.checkflow .step-indicator .step-seg.now{background:var(--gpx);box-shadow:0 0 8px var(--gpx)}

/* person chooser */
.pick-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.person-pick{border:1px solid #2a2a2a;border-radius:16px;padding:14px;background:#0b0b0b;cursor:pointer;text-align:center;transition:transform .15s,border-color .2s}
.person-pick:hover{border-color:var(--pink);transform:translateY(-2px)}
.person-pick .avatar{font-size:34px}
.person-pick .ptitle{font-family:'Archivo';font-weight:900;font-size:15px;margin-top:6px}
@media(max-width:460px){.pick-row{grid-template-columns:1fr}}

/* slider / guess */
.likert{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:4px}
.likert button{background:#111;border:1px solid #333;border-radius:12px;padding:14px 0;font-size:20px;font-weight:900;color:#fff}
.likert button.sel{background:var(--pink);color:#000;border-color:var(--pink)}
.likert button:disabled{opacity:.35}
.guess-cat{display:flex;align-items:center;gap:12px;background:#0b0b0b;border:1px solid #222;border-radius:14px;padding:12px 14px;margin-bottom:10px}
.guess-cat .gc-emoji{font-size:26px}
.guess-cat .gc-info{flex:1}
.guess-cat .gc-info .gc-name{font-weight:800;font-size:13px;letter-spacing:.1em}
.guess-cat .gc-info .gc-val{color:var(--dim2);font-size:11px;margin-top:2px}
.harmony-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.harmony-choice button{background:#111;border:1px solid #333;border-radius:12px;padding:12px 0;font-weight:800;color:#fff}
.harmony-choice button.sel{background:var(--violet);color:#000}

/* question */
.question-test .q-big{font-family:'Archivo';font-weight:800;font-size:clamp(17px,4.4vw,22px);line-height:1.25;margin:10px 0 14px}
.answer-btns{display:flex;flex-direction:column;gap:8px}
.answer-btns button{background:#111;border:1px solid #333;border-radius:12px;padding:14px 14px;font-size:13.5px;font-weight:700;color:#fff;text-align:left}
.answer-btns button.sel{background:var(--gpx);color:#000;border-color:var(--gpx)}

/* reveal */
.reveal-stage{text-align:center;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.reveal-stage .r-emoji{font-size:56px;animation:softPulse 1.4s infinite}
.reveal-stage .r-name{font-size:11px;letter-spacing:.3em;color:var(--dim2);text-transform:uppercase}
.reveal-stage .r-val{font-family:'Archivo';font-weight:900;font-size:54px;color:var(--gpx);text-shadow:0 0 26px rgba(0,255,176,.5);animation:popIn .5s cubic-bezier(.2,.9,.3,1.4)}
.reveal-stage .r-val.harmony{color:var(--violet);text-shadow:0 0 26px rgba(168,85,255,.5)}
.reveal-stage .r-val.score{font-size:30px;color:var(--pink);text-shadow:0 0 22px rgba(255,46,196,.5);font-family:Consolas,monospace}

/* guess vs byp */
.vs-row{display:flex;gap:10px;align-items:center;background:#0b0b0b;border:1px solid #222;border-radius:12px;padding:10px 12px;margin-bottom:8px}
.vs-row .vs-emoji{font-size:22px}
.vs-row .vs-which{font-size:9px;letter-spacing:.18em;color:var(--dim2);text-transform:uppercase;flex:1}
.vs-row .vs-g{font-weight:900;color:var(--dim)}
.vs-row .vs-b{font-weight:900;color:var(--gpx);font-size:20px}
.vs-row .vs-arrow{color:var(--dim2)}

/* decision balloon */
.decision-scene{text-align:center;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.balloon-big{font-size:90px;position:relative}
.balloon-big.tense{animation:tenseBalloon .9s ease infinite}
.balloon-big.pop{animation:none}
.balloon-big.floating{animation:floatBalloon 3s ease-in-out infinite}
@keyframes tenseBalloon{0%,100%{transform:scale(1)}50%{transform:scale(1.18,1.05)}}
@keyframes floatBalloon{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.04)}}
.decision-label{font-family:'Archivo';font-weight:900;font-size:clamp(24px,7vw,40px);margin-top:10px;color:#fff}
.decision-label.go{color:var(--pink);text-shadow:0 0 30px rgba(255,46,196,.7)}
.decision-label.pop{color:var(--lime)}
@keyframes glowCycle{0%,100%{text-shadow:0 0 16px rgba(255,46,196,.4)}50%{text-shadow:0 0 34px rgba(255,46,196,.9)}}
.glow-text{animation:glowCycle 2.4s ease-in-out infinite}

/* particles for pop */
.frag{position:fixed;z-index:800;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:flyFrag 1.1s ease-out forwards}
@keyframes flyFrag{to{transform:translate(var(--fx),var(--fy)) rotate(540deg);opacity:0}}
.heart-p{position:fixed;z-index:800;pointer-events:none;font-size:22px;animation:heartFly 2.4s ease-in forwards}
@keyframes heartFly{0%{opacity:1;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-120px) scale(1.4)}}

/* contact / history / admin */
.hist-row{background:#0b0b0b;border:1px solid #222;border-radius:12px;padding:12px;margin-bottom:10px}
.hist-row .h-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hist-row .h-name{font-weight:800}
.hist-row .h-date{color:var(--dim2);font-size:11px}
.hist-row .h-score{font-family:Consolas,monospace;color:var(--gpx);font-size:14px}
.hist-row .h-res{color:#fff;font-size:12px}
.hist-row .h-meta{color:var(--dim2);font-size:11px;margin-top:4px}
.admin-widget{position:fixed;right:14px;bottom:14px;z-index:900;display:flex;gap:8px;align-items:center}
.admin-widget .aw-btn{background:#111;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.08em}
.admin-widget .aw-btn.on{background:var(--gold);color:#000}
.edit-chip{outline:2px dashed var(--gold);outline-offset:-1px;cursor:pointer;transition:outline-color .2s}
.edit-chip:hover{outline-color:var(--pink)}
.pdf-window{position:fixed;left:-9999px;top:0;width:800px;background:#fff;color:#000}
@media print{ body *{visibility:hidden} #printArea,#printArea *{visibility:visible} #printArea{position:absolute;left:0;top:0;width:100%} }
.contact-release-tag{display:inline-block;font-size:10px;letter-spacing:.1em;padding:3px 8px;border-radius:999px;border:1px solid var(--gpx);color:var(--gpx);text-transform:uppercase}
.tag.none{color:var(--dim2);border-color:#333}
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);z-index:910;background:#111;border:1px solid var(--gpx);color:#fff;padding:10px 18px;border-radius:12px;font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:fadeUp .25s ease}
.checkflow .money{font-family:'Archivo';font-weight:900;font-size:22px;color:var(--lime);margin:6px 0}