/* Screens: editor, caption, preview, share, sheets, toast */
/* ---------- step 2: edit (Instagram-style: photo on top, Filter / Edit tabs under it) ---------- */
.edtop{display:flex;align-items:center;gap:8px;padding-top:12px;min-height:56px}
.estrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1;padding:2px;overscroll-behavior-x:contain}
.et{all:unset;cursor:pointer;position:relative;flex:0 0 auto}
.et .pth{width:44px;height:44px;border-radius:10px;border:2px solid transparent}
.et.on .pth{border-color:var(--brand)}
.et:focus-visible .pth{outline:2px solid var(--brand);outline-offset:2px}
.et .en{position:absolute;bottom:3px;left:3px;font:600 12px/1.2 var(--mono);background:rgba(0,0,0,.66);color:#fff;padding:0 4px;border-radius:5px}
.edbtns{display:flex;gap:8px;margin-left:auto;flex:0 0 auto}
#compareBtn[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.stage{--ar:.8;position:relative;overflow:hidden;border-radius:var(--r-lg);background:#000;width:min(100%,calc(clamp(220px,calc(100svh - 470px),56svh) * var(--ar)));aspect-ratio:var(--ar);max-width:100%;margin:6px auto 0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
@supports not (height:1svh){.stage{width:min(100%,calc(clamp(220px,calc(100vh - 470px),56vh) * var(--ar)))}}
.stage img{display:block;width:100%;height:100%;object-fit:cover}
.stage.cropping{cursor:grab;outline:2px solid var(--brand);outline-offset:2px}
.stage.cropping::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#fff6,#fff6),linear-gradient(#fff6,#fff6),linear-gradient(#fff6,#fff6),linear-gradient(#fff6,#fff6);background-size:1px 100%,1px 100%,100% 1px,100% 1px;background-position:33.33% 0,66.66% 0,0 33.33%,0 66.66%;background-repeat:no-repeat}
.fx-tint,.fx-vig{position:absolute;inset:0;pointer-events:none}
.wm{position:absolute;width:18%;height:auto!important;opacity:.85;pointer-events:none;filter:drop-shadow(0 1px 3px #0008)}
.wm.br{right:4%;bottom:4%}.wm.bl{left:4%;bottom:4%}.wm.tr{right:4%;top:4%}.wm.tl{left:4%;top:4%}
.orig-tag{position:absolute;top:10px;left:10px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.72);color:#fff;padding:3px 8px;border-radius:6px}
.tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;border-bottom:1px solid var(--line)}
.tabs button{all:unset;cursor:pointer;text-align:center;padding:13px 0;font:600 15px var(--body);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 150ms ease,border-color 150ms ease}
.tabs button[aria-selected=true]{color:var(--fg);border-color:var(--fg)}
.tabs button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.presets{display:flex;gap:10px;overflow-x:auto;padding:12px 8px 6px 0;scrollbar-width:none;overscroll-behavior-x:contain}
.preset{all:unset;cursor:pointer;flex:0 0 76px;display:flex;flex-direction:column;gap:6px;font:600 12px/1.25 var(--body);text-align:center;color:var(--muted)}
.preset.on{color:var(--fg)}
.pth{position:relative;display:block;width:76px;height:76px;border-radius:14px;overflow:hidden;border:2px solid transparent;background:var(--raised);transition:transform 160ms var(--ease-out),border-color 150ms ease}
.pth img{width:100%;height:100%;object-fit:cover}
.preset.on .pth{border-color:var(--brand)}
.preset:active .pth{transform:scale(0.94)}
.preset:focus-visible .pth{outline:2px solid var(--brand);outline-offset:2px}
.plabel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;max-width:76px}
.preset.add .ph{width:76px;height:76px;border-radius:14px;border:1.5px dashed var(--line-strong);display:grid;place-items:center;color:var(--brand);font:400 28px var(--body)}
@media (hover:hover) and (pointer:fine){.preset.add:hover .ph{border-color:var(--brand)}}
.psep{flex:0 0 1px;background:var(--line);margin:4px 2px 24px}
.pwrap{position:relative;flex:0 0 76px;display:flex}
.pwrap .preset{flex:1}
.pdel{all:unset;cursor:pointer;position:absolute;top:-8px;right:-8px;width:28px;height:28px;display:grid;place-items:center}
.pdel span{width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);color:var(--fg);display:grid;place-items:center;font:600 14px/1 var(--body)}
.pdel::after{content:"";position:absolute;inset:-8px}
.pdel:focus-visible span{outline:2px solid var(--brand)}
.inline-form{display:flex;gap:8px;margin-top:10px}
.inline-form .input{flex:1;min-width:0}
.tools{display:flex;gap:6px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.tool{all:unset;cursor:pointer;flex:0 0 72px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.tool .ti{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-strong);color:var(--fg);transition:transform 160ms var(--ease-out),border-color 150ms ease,color 150ms ease}
.tool .ti svg{width:22px;height:22px}
.tool:active .ti{transform:scale(0.94)}
.tool .tl{font:600 12px var(--body)}
.tool .tv{font:600 12px var(--mono);min-height:15px;color:var(--brand)}
.tool.on .ti{border-color:var(--brand);color:var(--brand)}
.tool:focus-visible .ti{outline:2px solid var(--brand);outline-offset:2px}
.toolpanel{padding:8px 2px 4px}
.toolpanel:not([hidden]),.tools:not([hidden]){transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
@starting-style{.toolpanel:not([hidden]),.tools:not([hidden]){opacity:0;transform:translateY(6px)}}
.tp-head{display:flex;justify-content:space-between;align-items:center}
.tp-btn{all:unset;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 6px;font:600 15px var(--body);color:var(--muted)}
.tp-btn.strong{color:var(--fg)}
.tp-btn:focus-visible{outline:2px solid var(--brand)}
.tp-title{text-align:center;font:600 15px var(--body)}
.tp-title output{font:600 14px var(--mono);color:var(--brand);margin-left:6px;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:36px;accent-color:var(--brand)}
.crop-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;margin-top:4px}
.nudge{display:flex;gap:6px}
.nudge button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);display:grid;place-items:center}
.nudge button:focus-visible{outline:2px solid var(--brand)}
.nudge svg{width:18px;height:18px}
#cropRatios .chip{padding:0 12px}

/* ---------- step 3: caption ---------- */
.detect{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start;margin-top:16px}
.detect .mini{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:var(--ar,.8);background:#000;position:relative}
.detect .mini img{width:100%;height:100%;object-fit:cover}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.badge{font:600 12px/1.3 var(--mono);letter-spacing:.02em;padding:5px 9px;border-radius:7px;background:var(--brand-soft);color:var(--brand);overflow-wrap:anywhere}
.caps{display:grid;gap:8px}
.cap{all:unset;cursor:pointer;display:block;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);transition:transform 160ms var(--ease-out),border-color 150ms ease,box-shadow 150ms ease}
.cap:active{transform:scale(0.98)}
.cap b{display:block;font:600 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.cap span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;overflow-wrap:anywhere}
.cap[aria-pressed=true]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.cap[aria-pressed=true] b{color:var(--brand)}
.cap:focus-visible{outline:2px solid var(--brand)}
textarea.input{min-height:120px;resize:vertical;line-height:1.5;margin-top:10px}
.picked{font:600 12px var(--mono);color:var(--brand);margin-left:8px;letter-spacing:.04em}
.hgroup{margin-top:14px}
.hgroup h4{font:600 14px var(--body);margin:0 0 8px;display:flex;gap:8px;align-items:baseline}
.hgroup h4 small{font:500 12px var(--mono);color:var(--muted)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:0 14px;border-radius:99px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);font:500 15px var(--body);cursor:pointer;text-align:left;overflow-wrap:anywhere;
  transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease,color 150ms ease}
.pill:active{transform:scale(0.97)}
.pill[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.pill.full{opacity:.42}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tagsum{font-size:14px;color:var(--muted);margin:12px 0 0;overflow-wrap:anywhere}
.tagsum b{color:var(--fg);font-weight:600}
.ai-note{font-size:13px;color:var(--muted);margin:10px 0 0;display:flex;gap:8px;align-items:flex-start}
.ai-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px}
.ai-note.on{color:var(--ok)}
.thinking{display:flex;align-items:center;gap:10px;color:var(--muted);padding:22px 0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:p 900ms var(--ease-in-out) infinite alternate}
.dot:nth-child(2){animation-delay:150ms}.dot:nth-child(3){animation-delay:300ms}
@keyframes p{to{opacity:.25;transform:translateY(-3px)}}

/* ---------- step 4: preview ---------- */
.ig{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.ig-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ig-av{width:32px;height:32px;border-radius:50%;background:var(--raised);overflow:hidden;display:grid;place-items:center;flex:0 0 auto}
.ig-av img{width:100%;height:100%;object-fit:contain}
.ig-av svg{width:18px;height:18px}
.ig-name{font:600 14px var(--body);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;background:#000}
.carousel::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;position:relative;overflow:hidden}
.slide img{width:100%;height:100%;object-fit:cover}
.slide .n{position:absolute;top:10px;right:10px;font:600 12px var(--mono);background:rgba(0,0,0,.66);color:#fff;padding:2px 8px;border-radius:99px;white-space:nowrap}
.dots{display:flex;justify-content:center;gap:6px;padding:10px 0 2px}
.dots span{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:background-color 150ms ease}
.dots span.on{background:var(--brand)}
.ig-text{padding:6px 12px 14px;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.ig-text .who{font-weight:700;margin-right:6px}
.pvmeta{display:flex;justify-content:space-between;gap:12px;font:500 12px var(--mono);color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
.pvmeta .warn{color:var(--warn)}

/* ---------- step 5: share ---------- */
.plats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.plat{all:unset;cursor:pointer;position:relative;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:12px;min-height:44px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);
  transition:transform 160ms var(--ease-out),border-color 150ms ease,background-color 150ms ease}
.plat:active{transform:scale(0.97)}
.plat .pl{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--raised);font:800 13px var(--display);font-stretch:118%}
.plat strong{display:block;font:600 15px var(--body)}
.plat small{display:block;font-size:13px;color:var(--muted)}
.plat[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft)}
.plat[aria-pressed=true] .pl{background:var(--brand);color:var(--brand-ink)}
.plat:focus-visible{outline:2px solid var(--brand)}
.note{font-size:14px;color:var(--muted);margin:10px 0 0;overflow-wrap:anywhere}
.note.warn{color:var(--warn)}

.prep{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);background:var(--raised);font-size:14px;color:var(--muted)}
.prep svg{width:18px;height:18px;flex:0 0 auto}
.prep.ready{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--fg)}
.prep.ready svg{color:var(--ok)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--brand);animation:spin 700ms linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.shares{display:grid;gap:8px;margin-top:14px}
.share-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;width:100%;min-height:64px;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;
  transition:transform 160ms var(--ease-out),border-color 150ms ease,background-color 150ms ease}
.share-row:active{transform:scale(0.98)}
.share-row .pl{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--raised);font:800 14px var(--display);font-stretch:118%}
.share-row .pl svg{width:22px;height:22px}
.share-row strong{display:block;font:600 16px var(--body)}
.share-row small{display:block;font-size:13px;color:var(--muted)}
.share-row .st{display:flex;align-items:center;gap:6px;font:600 13px var(--body);color:var(--muted)}
.share-row .st svg{width:18px;height:18px}
.share-row.done{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.share-row.done .st{color:var(--ok)}
.share-row.done .pl{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.share-row[aria-disabled=true]{opacity:.5}
@media (hover:hover) and (pointer:fine){.share-row:hover{border-color:var(--line-strong)}}
.share-hero{width:64px;height:64px;border-radius:18px;margin:6px auto 12px;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);font:800 20px var(--display);font-stretch:118%}
.howto{margin:16px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.howto li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:15px}
.howto li::before{content:counter(s);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font:700 14px var(--body)}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}.share-row:active{transform:none}}
/* ---------- sheets (bottom, drag to dismiss) ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:var(--scrim);transition:opacity 300ms var(--ease-out)}
.sheet{position:relative;width:100%;max-width:520px;max-height:92svh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;
  padding:8px max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  transition:transform 420ms var(--ease-drawer)}
@starting-style{.sheet-wrap:not([hidden]) .scrim{opacity:0}.sheet-wrap:not([hidden]) .sheet{transform:translateY(100%)}}
.sheet-wrap.closing .scrim{opacity:0;transition-duration:220ms}
.sheet-wrap.closing .sheet{transform:translateY(100%);transition:transform 240ms var(--ease-out)}
.grabber{display:block;width:100%;height:36px;border:0;background:none;cursor:grab;touch-action:none;position:relative}
.grabber::before{content:"";position:absolute;left:50%;top:12px;width:40px;height:5px;margin-left:-20px;border-radius:99px;background:var(--line-strong)}
.sheet h2{margin-top:2px}
.sheet .sub{color:var(--muted);margin:8px 0 0}
.sheet .close-x{position:absolute;top:10px;right:10px}

.plans{display:grid;gap:10px;margin-top:18px}
.plan{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:grid;gap:10px}
.plan.pro{border:2px solid var(--brand);background:var(--brand-soft)}
.plan .ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.plan .ph b{font:800 20px var(--display);font-stretch:118%;letter-spacing:-0.02em}
.plan .price{font:800 24px var(--display);font-stretch:112%;font-variant-numeric:tabular-nums}
.plan .price small{font:500 14px var(--body);color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start}
.plan li svg{width:18px;height:18px;margin-top:3px;color:var(--brand)}
.plan .tag{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.fine{font-size:13px;color:var(--muted);text-align:center;margin:12px 0 0}

.setlist{display:grid;gap:0;margin-top:6px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 14px;background:var(--surface);border:0;border-bottom:1px solid var(--line);width:100%;text-align:left;font:15px var(--body);color:var(--fg)}
.setrow:last-child{border-bottom:0}
button.setrow{cursor:pointer}
.setrow .v{color:var(--muted);font-size:14px;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.setrow.danger{color:var(--danger)}

.done-ico{width:64px;height:64px;border-radius:50%;margin:8px auto 14px;display:grid;place-items:center;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.done-ico svg{width:30px;height:30px}
.center{text-align:center}
.stack{display:grid;gap:10px;margin-top:20px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);
  padding:10px 10px 10px 16px;border-radius:99px;background:var(--fg);color:var(--bg);font:600 14px var(--body);box-shadow:0 8px 30px rgba(0,0,0,.28);
  transition:opacity 400ms ease,transform 400ms ease}
@starting-style{.toast:not([hidden]){opacity:0;transform:translate(-50%,100%)}}
.toast.leaving{opacity:0;transform:translate(-50%,60%);transition-duration:200ms;transition-timing-function:var(--ease-out)}
.toast span{overflow-wrap:anywhere}
.toast.top{bottom:auto;top:calc(16px + env(safe-area-inset-top,0px))}
@starting-style{.toast.top:not([hidden]){transform:translate(-50%,-100%)}}
.toast.top.leaving{transform:translate(-50%,-60%)}
.toast button{border:0;cursor:pointer;min-height:36px;padding:0 14px;border-radius:99px;font:700 14px var(--body);color:var(--brand);background:color-mix(in srgb,var(--bg) 90%,transparent);position:relative}
.toast button::after{content:"";position:absolute;inset:-4px}

@media (prefers-reduced-motion:reduce){
  .dot{animation:none;opacity:.6}
  .btn:active,.chip:active,.pill:active,.plat:active,.cap:active,.drop:active,.newpost:active,.post:active,.preset:active .pth,.tool:active .ti,.ibtn:active{transform:none}
  @starting-style{.view:not([hidden]),.flow[data-dir] .flowstep:not([hidden]),.toolpanel:not([hidden]),.tools:not([hidden]){transform:none}
    .sheet-wrap:not([hidden]) .sheet{transform:none;opacity:0}.toast:not([hidden]){transform:translateX(-50%)}}
  .sheet-wrap.closing .sheet{transform:none;opacity:0}.toast.leaving{transform:translateX(-50%)}
  .meter i{transition:none}
  .sheet{transition:opacity 200ms ease}
}