/* Imagine Tool – payments UI (.pay-*). Reuses home.css variables; light/dark follow the site theme. */
.pay-hero{padding:34px 0 10px;text-align:center}.pay-hero h1{font-size:clamp(2rem,5.5vw,3.3rem);line-height:1.1;letter-spacing:-.025em;font-weight:850;margin:10px auto 12px;max-width:820px}.pay-hero .lead{color:var(--mu);max-width:640px;margin:0 auto}
.pay-note{margin:14px auto 0;max-width:640px;padding:9px 16px;border-radius:99px;font-weight:600;font-size:.92rem;color:#fff;background:linear-gradient(100deg,var(--ac),#ec4899)}
.pay-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:22px 0}
.pay-seg{display:inline-flex;padding:4px;border-radius:99px;border:1px solid var(--bd);background:var(--gl)}.pay-seg button{min-height:40px;padding:0 18px;border:0;border-radius:99px;background:none;font-weight:600;cursor:pointer;color:var(--mu)}.pay-seg button[aria-pressed=true]{background:linear-gradient(120deg,var(--ac),var(--ac2));color:#fff}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px}
.pay-card{position:relative;padding:24px 22px;display:flex;flex-direction:column;gap:12px;transition:transform .25s,box-shadow .25s}.pay-card:hover{transform:translateY(-4px)}
.pay-card.hot{border:2px solid var(--ac)}.pay-badge{position:absolute;top:-12px;right:18px;padding:4px 12px;border-radius:99px;background:linear-gradient(120deg,var(--ac),#ec4899);color:#fff;font-size:.78rem;font-weight:700}
.pay-card h3{font-size:1.2rem}.pay-price{font-size:2.2rem;font-weight:850;letter-spacing:-.03em}.pay-price small{font-size:.9rem;font-weight:600;color:var(--mu)}
.pay-card ul{list-style:none;padding:0;display:grid;gap:7px;color:var(--mu);font-size:.95rem;flex:1}.pay-card li:before{content:"✓";color:var(--ac2);font-weight:800;margin-right:8px}
.pay-h2{font-size:1.6rem;margin:46px 0 16px;text-align:center}
.pay-sec{padding:6px 0 10px}
.pay-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:14px;border:1px solid var(--bd);background:var(--gl);font-weight:700;cursor:pointer;color:var(--tx);transition:transform .2s}.pay-btn:hover{transform:translateY(-2px)}.pay-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.pay-btn.pri{border:0;color:#fff;background:linear-gradient(120deg,var(--ac),#ec4899)}.pay-btn.sm{min-height:36px;padding:6px 12px;font-size:.88rem;border-radius:10px}.pay-btn.dng{color:#ef4444}
dialog.pay-dlg{width:min(520px,calc(100% - 20px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--bd);border-radius:20px;padding:22px;background:var(--bg);color:var(--tx);box-shadow:var(--sh)}dialog.pay-dlg::backdrop{background:rgba(8,10,25,.6);backdrop-filter:blur(4px)}
.pay-dlg h2{font-size:1.25rem;margin-bottom:4px}.pay-x{position:absolute;top:12px;right:12px}
.pay-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--bd)}.pay-row.tot{font-weight:800;font-size:1.15rem;border-bottom:0}.pay-row.sv{color:#10b981;font-weight:700}
.pay-in{width:100%;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--gl2);color:var(--tx);font:inherit}.pay-in:focus{outline:2px solid var(--ac);outline-offset:1px}
.pay-promo{display:flex;gap:8px;margin:14px 0 6px}.pay-promo .pay-in{text-transform:uppercase;letter-spacing:.04em}
.pay-msg{min-height:22px;font-size:.9rem;margin:2px 0 8px}.pay-msg.err{color:#ef4444}.pay-msg.ok{color:#10b981;font-weight:600}
.pay-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,#10b981 18%,transparent);color:#10b981;font-weight:700;font-size:.85rem;margin:2px 6px 2px 0}.pay-tag button{border:0;background:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1}
.pay-gws{display:grid;gap:8px;margin:12px 0}.pay-gw{display:flex;gap:10px;align-items:center;padding:11px 14px;border:1px solid var(--bd);border-radius:12px;cursor:pointer;background:var(--gl2)}.pay-gw:has(input:checked){border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 30%,transparent)}.pay-gw small{margin-left:auto;color:var(--mu)}
.pay-ok{display:none;place-items:center;margin:8px auto;width:64px;height:64px}.pay-ok.on{display:grid}.pay-ok svg{width:64px;height:64px}.pay-ok circle{fill:none;stroke:#10b981;stroke-width:3;stroke-dasharray:152;stroke-dashoffset:152;animation:payc .6s forwards}.pay-ok path{fill:none;stroke:#10b981;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:payc .4s .5s forwards}@keyframes payc{to{stroke-dashoffset:0}}
.pay-pre{white-space:pre-wrap;padding:12px;border-radius:12px;background:var(--gl2);border:1px solid var(--bd);font-size:.92rem;margin:10px 0}
.pay-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}.pay-tabs button{flex:none;min-height:42px;padding:0 18px;border-radius:99px;border:1px solid var(--bd);background:var(--gl);font-weight:600;cursor:pointer;color:var(--tx)}.pay-tabs button[aria-selected=true]{background:linear-gradient(120deg,var(--ac),var(--ac2));color:#fff;border:0}
.pay-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}.pay-kpi{padding:16px}.pay-kpi b{display:block;font-size:1.6rem;letter-spacing:-.02em}.pay-kpi span{color:var(--mu);font-size:.85rem}
.pay-panel{padding:18px;margin-bottom:16px}.pay-panel h2{font-size:1.1rem;margin-bottom:10px}
.pay-tw{overflow-x:auto}.pay-t{width:100%;border-collapse:collapse;font-size:.92rem}.pay-t th,.pay-t td{padding:9px 8px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap}.pay-t th{color:var(--mu);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.pay-st{padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--gl2);border:1px solid var(--bd)}.pay-st.paid,.pay-st.active{color:#10b981}.pay-st.failed,.pay-st.suspended,.pay-st.expired{color:#ef4444}.pay-st.awaiting,.pay-st.pending{color:#f59e0b}
.pay-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.pay-form label{display:grid;gap:5px;font-size:.85rem;font-weight:600;color:var(--mu)}.pay-form label.w{grid-column:1/-1}.pay-form label.ck{display:flex;align-items:center;gap:8px;color:var(--tx)}.pay-form textarea.pay-in{min-height:90px}
.pay-bars{display:flex;align-items:flex-end;gap:6px;height:130px;margin-top:8px}.pay-bars div{flex:1;min-width:14px;border-radius:6px 6px 0 0;background:linear-gradient(var(--ac),var(--ac2));position:relative}.pay-bars div i{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:.65rem;font-style:normal;color:var(--mu);white-space:nowrap}
.pay-auth{max-width:420px;margin:30px auto;padding:24px}.pay-auth h1{font-size:1.6rem;margin-bottom:12px}.pay-auth form{display:grid;gap:12px}.pay-auth a.l{color:var(--ac);cursor:pointer;font-weight:600}
.pay-faq details{padding:14px 18px;margin-bottom:10px}.pay-faq summary{cursor:pointer;font-weight:700}.pay-faq p{color:var(--mu);margin-top:8px}
.pay-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0));transform:translate(-50%,20px);padding:10px 18px;border-radius:99px;background:var(--tx);color:var(--bg);font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:.3s;z-index:200}.pay-toast.on{opacity:1;transform:translate(-50%,0)}
.pay-sw{position:relative;width:46px;height:26px;display:inline-block}.pay-sw input{opacity:0;position:absolute;inset:0;cursor:pointer;z-index:1}.pay-sw i{position:absolute;inset:0;border-radius:99px;background:var(--bd);transition:.2s}.pay-sw i:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}.pay-sw input:checked+i{background:var(--ac)}.pay-sw input:checked+i:after{left:23px}
.pay-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.pay-bar2{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.pay-bar2 .pay-in{max-width:260px}
@media(max-width:560px){.pay-promo{flex-direction:column}.pay-t{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){.pay-card,.pay-btn{transition:none}.pay-ok circle,.pay-ok path{animation:none;stroke-dashoffset:0}}