/* Flip shared styles: same tokens as the home page */
:root{
  --bg:#f4f2ee; --card:#ffffff; --ink:#1b1830; --muted:#625d78; --line:#e2ded6;
  --indigo:#3b2bb5; --indigo-soft:#e8e5fb; --flip:#ff6b3d; --flip-soft:#ffe6dc; --mint:#15937a; --mint-soft:#dcf3ed; --bad:#c9384f; --bad-soft:#fde3e7;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#13111c; --card:#1d1a2a; --ink:#f1eff8; --muted:#a7a2bd; --line:#2e2a40;
  --indigo:#9d90ff; --indigo-soft:#262143; --flip:#ff8a62; --flip-soft:#3a2219; --mint:#4fd1b4; --mint-soft:#15332d; --bad:#ff8096; --bad-soft:#3d1f26; color-scheme:dark}}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body)}
img,svg,canvas{max-width:100%}
[hidden]{display:none!important}
.in{max-width:820px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));padding-bottom:60px}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,6vw,3.4rem);font-weight:800;letter-spacing:-.015em}
h2{font-size:1.6rem;font-weight:800}
h3{font-size:1.2rem}
p{margin:0}
a{color:inherit}
.eyebrow{font:700 .75rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--flip)}
.muted{color:var(--muted)}
nav.top{padding-block:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font:800 1.6rem var(--display);text-decoration:none}
.logo i{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--indigo);color:#fff;font-style:normal;transform:rotate(-8deg)}
.navlinks{display:flex;gap:8px;flex-wrap:wrap}
.navlink{font-weight:700;text-decoration:none;border:1px solid var(--line);background:var(--card);padding:7px 14px;border-radius:99px;font-size:.92rem}
.navlink.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px}
.btn{font:700 1rem var(--body);border:0;border-radius:12px;padding:12px 20px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--indigo);color:#fff}
.btn.alt{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.hot{background:var(--flip);color:#1b1830}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--flip);outline-offset:2px}
/* forms */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font:700 .8rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font:500 1rem var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 12px;width:100%}
.field textarea{min-height:84px;resize:vertical}
.hint{font-size:.85rem;color:var(--muted)}
.drop{border:2px dashed var(--line);border-radius:16px;padding:22px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;cursor:pointer;background:var(--bg)}
.drop.over{border-color:var(--indigo);background:var(--indigo-soft)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.thumb{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--card);display:grid;place-items:center;font-weight:700;font-size:.8rem;text-align:center;padding:4px}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-weight:800;cursor:pointer}
.error{background:var(--bad-soft);color:var(--ink);border-radius:12px;padding:10px 14px}
.privacy{background:var(--flip-soft);border-radius:12px;padding:10px 14px;font-size:.92rem}
/* progress */
.steps-live{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps-live li{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600}
.steps-live li::before{content:"";width:22px;height:22px;border-radius:50%;border:3px solid var(--line);flex:none}
.steps-live li.now{color:var(--ink)}
.steps-live li.now::before{border-color:var(--indigo);border-top-color:transparent;animation:spin .8s linear infinite}
.steps-live li.done{color:var(--ink)}
.steps-live li.done::before{background:var(--mint);border-color:var(--mint)}
@keyframes spin{to{transform:rotate(360deg)}}
/* share box */
.share{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.qr{background:#fff;border-radius:14px;padding:8px;border:1px solid var(--line)}
.qr svg{display:block;width:100%;height:auto}
.code{font:800 1.6rem var(--display);letter-spacing:.1em;background:var(--flip-soft);border-radius:10px;padding:2px 12px;display:inline-block}
.linkbox{font-size:.9rem;word-break:break-all;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);font-weight:700;padding:10px 18px;border-radius:99px;z-index:50}
@media (max-width:560px){.fields{grid-template-columns:1fr}.share{grid-template-columns:1fr}.share .qr{max-width:180px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* credits + packs */
.balance{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:0}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.pack{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px}
.pack.feat{border:2px solid var(--indigo)}
.pack h3{font-size:1.2rem}
.ptag{position:absolute;top:-11px;left:16px;background:var(--flip);color:#1b1830;font:800 .72rem var(--body);letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:3px 10px}
.price{font:800 2.2rem/1 var(--display)}
.pc{font-size:1.05rem}
.pl{color:var(--muted);font-size:.9rem;margin-bottom:8px}
.pack .btn{margin-top:auto}
.big{font:800 3rem/1 var(--display);color:var(--indigo)}
.tabs2{display:flex;gap:6px;background:var(--bg);border-radius:12px;padding:4px;align-self:flex-start}
.tabs2 button{font:700 .95rem var(--body);border:0;border-radius:9px;padding:8px 14px;background:none;color:var(--muted);cursor:pointer}
.tabs2 button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.check input{margin-top:4px;width:18px;height:18px}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.list li:first-child{border-top:0}
.list small{color:var(--muted)}
.plus{color:var(--mint);font-weight:800}.minus{color:var(--muted);font-weight:700}
.faq{display:flex;flex-direction:column;gap:12px}
.faq h3{font-size:1.05rem}

.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.review{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}