/* 99foto.ru v1 — standard look; the beautiful design comes later. */
:root{--bg:#f6f6f4;--card:#fff;--ink:#1d1d1f;--muted:#6b6b70;--line:#e2e2e0;--acc:#2f6fed;--ok:#e8f5ec;--okb:#2e8b57;--err:#fdecec;--errb:#c0392b;--warn:#fff7e0}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--acc)}
main{max-width:1180px;margin:0 auto;padding:16px}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
.logo{font-weight:800;font-size:22px;text-decoration:none;color:var(--ink)}.logo span{color:var(--acc)}
.top nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.top nav a{text-decoration:none}
footer{max-width:1180px;margin:30px auto;padding:0 16px;font-size:13px;color:var(--muted)}
h1{font-size:28px;margin:8px 0 14px}h2{font-size:21px;margin:24px 0 10px}
.muted{color:var(--muted)}.err-text,.danger-text{color:var(--errb)}
.msg{padding:10px 14px;border-radius:8px;border:1px solid var(--line)}
.msg.ok{background:var(--ok);border-color:#bfe3cb}.msg.err{background:var(--err);border-color:#f2c4c4}.msg.warn{background:var(--warn)}
.box,.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin:12px 0}
.narrow{max-width:460px;margin:20px auto}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{display:block;color:inherit;text-decoration:none}.card h3{margin:0 0 6px;font-size:15px;color:var(--muted)}
.num{font-size:26px;font-weight:700;margin:0}
.hero{padding:24px 0}.hero h1{font-size:34px}
label{display:block;margin:8px 0}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid #cfcfcd;border-radius:7px;background:#fff;width:100%;max-width:100%}
label.check{display:flex;gap:8px;align-items:flex-start}label.check input{width:auto;margin-top:5px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.row input,.row select{flex:1 1 180px;width:auto}.row label{flex:1 1 220px}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;border-radius:8px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn.ghost{background:#fff;color:var(--acc);border:1px solid var(--acc)}.btn.danger{background:var(--errb)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
button.link{background:none;border:0;color:var(--acc);cursor:pointer;font:inherit;padding:0}
form.inline{display:inline}
input.small{width:140px;display:inline-block;padding:4px 6px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:14px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}th{background:#fafaf8}
td.plus{color:var(--okb)}td.minus{color:var(--errb)}td.pre{white-space:pre-wrap;max-width:240px}
.list{display:grid;gap:8px}.item{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:inherit}
.item:hover,.card:hover{border-color:var(--acc)}
.crumbs{margin:0;color:var(--muted)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.tabs a{padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;text-decoration:none}.tabs a.on{border-color:var(--acc);background:#eef3fe}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:10px 0}
.ph{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px;font-size:13px;position:relative}
.ph input{position:absolute;top:12px;left:12px;width:20px;height:20px}
.ph img,.gallery img,.style-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;background:#eee}
.ph .cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px}
.gallery figcaption{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;margin-top:6px}
.tag{display:inline-block;font-size:12px;padding:2px 8px;border-radius:10px;background:#eef3fe;color:#24499c}
.style-card{display:block;background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px;font-size:14px}
.style-card p{margin:4px 0;color:var(--muted);font-size:13px}
.style-card.pick{cursor:pointer;position:relative;padding-top:38px}.style-card.pick input{position:absolute;top:9px;left:10px;width:22px;height:22px}
.style-card.pick:has(input:checked){border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.noimg{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:#f0f0ee;border-radius:6px;color:var(--muted);font-size:13px}
details{margin:8px 0}summary{cursor:pointer;font-weight:600;padding:6px 0}
.search{margin:10px 0}
.strip{display:flex;gap:6px;overflow-x:auto}.strip img{height:90px;border-radius:6px}
@media (min-width:700px){.sticky{position:sticky;top:0;z-index:5}}.total{font-size:20px;font-weight:700}
.upload .drop{border:2px dashed #c8c8c6;border-radius:10px;padding:26px;text-align:center;color:var(--muted);margin:10px 0}
.upload .drop.over{border-color:var(--acc);background:#eef3fe}
input.copy{font-family:monospace}
code.big{font-size:18px;letter-spacing:1px}
.hidden{display:none!important}
@media (max-width:600px){h1{font-size:23px}.hero h1{font-size:26px}.grid{grid-template-columns:repeat(2,1fr)}table{font-size:13px}}
.row label.check input,.row input[type=checkbox]{flex:none;width:auto}
.navgroup{display:inline-flex;gap:10px;align-items:center;padding:3px 10px;border:1px solid var(--line);border-radius:18px}
.navgroup b{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.row.tight{gap:6px;margin-top:4px}.row.tight input.small{flex:0 1 110px}
form.stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.bar{height:10px;background:#eee;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--acc)}
.ph[draggable=true]{cursor:grab}.ph.dragging{opacity:.4;outline:2px dashed var(--acc)}
.chart{width:100%;height:auto;margin-top:8px}.chart rect{fill:var(--acc)}.chart text{font-size:11px;fill:#444}.chart .lab{fill:#888;font-size:10px}
.tabbtn{padding:4px 12px;border:1px solid var(--line);border-radius:16px;text-decoration:none;font-size:14px}.tabbtn.on{border-color:var(--acc);background:#eef3fe}
@media (min-width:900px){.cards3.four{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.cards3.four{grid-template-columns:repeat(5,1fr)}}
.a-photo{max-width:420px;max-height:420px;border-radius:8px;display:block;margin:8px 0;background:#eee}
.complain{font-size:12px;color:var(--muted)}.a-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;display:block;margin-bottom:4px}
.captcha{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}.captcha img{border-radius:6px;border:1px solid var(--line)}
.order-bar{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;justify-content:flex-end;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:14px;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.pick-photo{display:inline-flex;gap:6px;align-items:center;font-weight:600;cursor:pointer}.pick-photo input{width:20px;height:20px}
.gallery figure:has(.pick-photo input:checked){outline:3px solid var(--acc)}.gallery figure.have{outline:2px solid var(--okb)}
.ok-tag{background:var(--ok);color:var(--okb)}.badge{background:var(--errb);color:#fff;border-radius:10px;padding:0 6px;font-size:12px}.strip.small img{height:56px}
.inst-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.card.inst{display:flex;flex-direction:column;gap:4px}.card.inst b{font-size:18px}
.kicker{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a0522d;font-weight:700}
.inline-filters{margin-left:auto}.inline-filters select{min-width:160px}

/* ---- v2 (owner 21.10): Генерация · Стили · Галерея ---- */
.top.v3{position:sticky;top:0;z-index:10;gap:18px;padding:10px 20px;box-shadow:0 1px 0 var(--line)}
.top.v3 .tabs{display:flex;gap:6px;flex:1;justify-content:center}
.top.v3 .tabs a{padding:9px 18px;border-radius:999px;font-weight:600;color:var(--ink);text-decoration:none}
.top.v3 .tabs a:hover{background:#f0f0ee}
.top.v3 .tabs a.on{background:var(--acc);color:#fff}
.top.v3 .me{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:14px}
.top.v3 .me a{text-decoration:none}
.top.v3 .wallet{background:#f3f6ff;border:1px solid #dbe5ff;border-radius:999px;padding:5px 12px;color:var(--ink)}
.btn.big{font-size:18px;padding:13px 26px;border-radius:10px}
.style-card{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.style-card:hover{border-color:var(--acc);box-shadow:0 2px 10px rgba(47,111,237,.12)}
.style-card img,.pickstyle img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}

/* Генерация */
.gen .step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:14px 0}
.gen .step h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:20px}
.gen .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;font-size:15px}
.gen .drop.big{padding:22px;background:#fafafe}
.gen .drop.big .btn{margin:6px 4px}
.gen .drop.over{border-color:var(--acc);background:#eef3fe}
.gen .thumbs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.gen .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.gen .thumbs .more{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:6px;background:#f0f0ee;color:var(--muted);font-weight:600}
.stylegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0;max-height:640px;overflow:auto;padding:2px}
.pickstyle{position:relative;display:block;margin:0;background:#fff;border:2px solid var(--line);border-radius:10px;padding:8px;font-size:13px;cursor:pointer}
.pickstyle input{position:absolute;opacity:0;pointer-events:none}
.pickstyle b{display:block;margin-top:6px;font-size:14px}
.pickstyle p{margin:2px 0 0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pickstyle.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(47,111,237,.18)}
.pickstyle .noimg{font-size:40px}
.gen label.opt{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.gen .launch{position:sticky;bottom:0;background:none;padding:12px 0 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.gen .launch .total{margin:0;font-weight:600;flex:1 1 260px}
.gen .launch .progress{flex-basis:100%;margin:0}

/* Галерея */
.gal{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.gal .projects{position:sticky;top:70px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;max-height:calc(100vh - 90px);overflow:auto}
.gal .projects h2{margin:0 0 8px;font-size:17px}
.gal .proj{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
.gal .proj:hover{background:#f3f3f1}
.gal .proj.on{background:#eef3fe;color:var(--acc);font-weight:600}
.gal .projects .btn{display:block;text-align:center;margin-top:10px}
.gal h1{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.chip{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-size:14px}
.chip span{color:var(--muted);font-size:12px}
.chip.on{border-color:var(--acc);background:#eef3fe;color:var(--acc)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:12px 0}
.pgrid .empty{grid-column:1/-1}
.ph{position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ph img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#f0f0ee}
.ph figcaption{padding:7px 9px;font-size:13px;line-height:1.35}
.ph .sel{position:absolute;top:6px;left:6px;margin:0;background:rgba(255,255,255,.9);border-radius:6px;padding:2px 5px}
.ph .sel input{width:auto;margin:0}

/* Стиль */
.stylehead{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:22px;align-items:start;margin:10px 0 20px}
.stylehead img{width:100%;border-radius:12px;aspect-ratio:3/4;object-fit:cover}

@media (max-width:760px){
  .top.v3 .tabs{order:3;flex-basis:100%;justify-content:space-between}
  .top.v3 .tabs a{padding:8px 10px;font-size:14px}
  .gal{grid-template-columns:1fr}
  .gal .projects{position:static;max-height:none}
  .stylehead{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr)}
}
.gal-h{justify-content:space-between}.gal-h h1{margin:0}.pcsync{margin:0 0 10px}
/* first page (owner 21.10): sign-in and sign-up side by side */
.intro{text-align:center;padding:28px 0 8px}.intro h1{font-size:40px;margin:0}.intro h1 span{color:var(--acc)}.intro p{color:var(--muted);font-size:17px;margin:6px 0 0}
.auth{display:grid;align-items:start;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;max-width:860px;margin:18px auto}
.auth .box{margin:0;padding:22px}.auth h2{margin:0 0 10px}.auth .btn{width:100%;margin-top:10px;padding:11px}

/* ================= v2 dark design (owner 21.10, after 21st.dev components) ================= */
body.dark{--bg:#07070c;--card:rgba(255,255,255,.035);--ink:#ececf3;--muted:#9a9aae;--line:rgba(255,255,255,.09);--acc:#818cf8;--acc2:#a78bfa;
  --ok:rgba(16,185,129,.12);--okb:#34d399;--err:rgba(239,68,68,.12);--errb:#f87171;--warn:rgba(234,179,8,.12);
  background:radial-gradient(1200px 600px at 50% -200px,rgba(99,102,241,.16),transparent 70%),var(--bg);background-attachment:fixed;color:var(--ink)}
body.dark a{color:#a5b4fc}
body.dark input,body.dark select,body.dark textarea{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:var(--ink);border-radius:10px}
body.dark input:focus,body.dark select:focus,body.dark textarea:focus{outline:none;border-color:rgba(129,140,248,.7);box-shadow:0 0 0 3px rgba(129,140,248,.18)}
body.dark select option{background:#14141c;color:var(--ink)}
body.dark .box,body.dark .card,body.dark .gen .step,body.dark .gal .projects{background:var(--card);border-color:var(--line);backdrop-filter:blur(12px)}
body.dark .btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 6px 24px -8px rgba(99,102,241,.7);border-radius:12px}
body.dark .btn:hover{filter:brightness(1.12)}
body.dark .btn.ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid rgba(255,255,255,.14);box-shadow:none}
body.dark .btn.danger{background:linear-gradient(135deg,#ef4444,#db2777)}
body.dark button.link{color:#a5b4fc}
body.dark .msg{border-color:var(--line)}body.dark .msg.ok{border-color:rgba(52,211,153,.3)}body.dark .msg.err{border-color:rgba(248,113,113,.35)}body.dark .msg.warn{border-color:rgba(234,179,8,.3)}
body.dark table{background:var(--card);border-color:var(--line)}body.dark th{background:rgba(255,255,255,.04)}
body.dark .style-card,body.dark .pickstyle,body.dark .chip,body.dark .ph{background:rgba(255,255,255,.03);border-color:var(--line)}
body.dark .noimg,body.dark .ph img,body.dark .gen .thumbs .more{background:rgba(255,255,255,.05)}
body.dark .tag{background:rgba(129,140,248,.15);color:#c7d2fe}
body.dark .drop,body.dark .gen .drop.big{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.15)}
body.dark .gen .drop.over{background:rgba(129,140,248,.1);border-color:var(--acc)}
body.dark .chip.on,body.dark .gal .proj.on,body.dark .tabbtn.on{background:rgba(129,140,248,.16);border-color:rgba(129,140,248,.5);color:#c7d2fe}
body.dark .gal .proj{color:var(--ink)}body.dark .gal .proj:hover{background:rgba(255,255,255,.05)}
body.dark .pickstyle.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(129,140,248,.25),0 10px 30px -10px rgba(129,140,248,.5)}
body.dark .gen .n{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
body.dark .gen .launch{background:none;border-top:0}  /* owner 21.10: no black band under the button */
body.dark .ph .sel{background:rgba(0,0,0,.55)}
body.dark .kicker{color:#f0abfc}
body.dark .captcha img{border-radius:8px;background:#fff}
body.dark footer{color:#6b6b80}

/* header: logo · anime navbar · profile */
body.dark .top.v3{position:sticky;top:0;z-index:50;background:rgba(7,7,12,.6);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:none;
  padding:46px 22px 12px;align-items:center}
body.dark .top.v3.bare{position:absolute;left:0;right:0;background:transparent;border:0;backdrop-filter:none;padding-top:16px}
body.dark .logo{color:#fff;letter-spacing:-.02em}body.dark .logo span{color:var(--acc)}
body.dark .top.v3 .me a{color:var(--ink)}body.dark .top.v3 .wallet{background:rgba(255,255,255,.05);border-color:var(--line)}
.anav{position:relative;display:flex;gap:6px;padding:6px;margin:0 auto;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);box-shadow:0 10px 30px -10px rgba(0,0,0,.8);animation:anav-in .6s cubic-bezier(.34,1.56,.64,1) both}
.anav a{position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:11px 22px;border-radius:999px;font-weight:600;font-size:14px;
  color:rgba(255,255,255,.7)!important;text-decoration:none;transition:color .3s,background .3s}
.anav a i{font-style:normal;display:none}
.anav a:hover{color:#fff!important;background:rgba(255,255,255,.08)}
.anav a.on{color:#fff!important}
.anav a.on::before,.anav a.on::after{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;pointer-events:none}
.anav a.on::before{background:rgba(129,140,248,.28);box-shadow:0 0 18px 4px rgba(129,140,248,.35),0 0 40px 10px rgba(129,140,248,.12);animation:glow 2s ease-in-out infinite}
.anav a.on::after{background:linear-gradient(90deg,transparent,rgba(167,139,250,.35),transparent);background-size:200% 100%;animation:shine 3s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes anav-in{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}
/* the mascot sits above the active tab and slides to the tab you click */
.mascot{position:absolute;top:-44px;left:0;width:40px;height:40px;pointer-events:none;transform:translateX(var(--mx,-999px));
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);z-index:2}
.mascot .face{position:absolute;left:2px;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(255,255,255,.25);animation:bob 2s ease-in-out infinite}
.mascot b{position:absolute;display:block}
.mascot .eye{width:7px;height:7px;border-radius:50%;background:#111;top:40%}.mascot .eye.l{left:25%}.mascot .eye.r{right:25%}
.mascot .blush{width:7px;height:5px;border-radius:50%;background:#f9a8d4;opacity:.6;top:56%}.mascot .blush.l{left:13%}.mascot .blush.r{right:13%}
.mascot .mouth{width:13px;height:7px;border-bottom:2px solid #111;border-radius:50%;left:32%;top:56%;transition:transform .2s}
.mascot .spark{font-size:10px;opacity:0;transform:scale(0);transition:all .25s}.mascot .s1{top:-4px;right:-6px}.mascot .s2{top:-8px;left:-4px;transition-delay:.08s}
.mascot .tail{position:absolute;bottom:-1px;left:50%;width:12px;height:12px;margin-left:-6px;background:#fff;transform:rotate(45deg);animation:tail 1s ease-in-out .5s infinite}
.anav.hov .mascot .face{animation:wiggle .5s ease-in-out}
.anav.hov .mascot .eye{animation:blink .25s}
.anav.hov .mascot .blush{opacity:.85}
.anav.hov .mascot .mouth{transform:scaleY(1.5) translateY(-1px)}
.anav.hov .mascot .spark{opacity:1;transform:scale(1)}
.anav.hov .mascot .tail{animation:tail .3s ease-in-out infinite alternate}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes wiggle{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.1) rotate(-5deg)}60%{transform:scale(1.1) rotate(5deg)}}
@keyframes blink{50%{transform:scaleY(.2)}}
@keyframes tail{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(2px)}}

/* first page: the perspective tunnel */
.tunnel{position:relative;min-height:100svh;margin:-16px calc(50% - 50vw) 0;width:100vw;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:90px 16px 40px}
.t-grid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#312e81 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%);opacity:.65}
.t-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,rgba(99,102,241,.22) 0%,transparent 72%)}
.t-ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.t-ring.r1{width:48vmin;height:48vmin;border:1px solid rgba(129,140,248,.12)}.t-ring.r2{width:76vmin;height:76vmin;border:1px dashed rgba(255,255,255,.1)}
.t-plane{position:absolute;inset:0;pointer-events:none;perspective:1200px;transform-style:preserve-3d}
.t-card{position:absolute;left:50%;top:50%;width:clamp(130px,18vw,250px);aspect-ratio:4/5;will-change:transform,opacity;opacity:0}
.t-in{width:100%;height:100%;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;padding:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
  outline:1px solid rgba(255,255,255,.15);position:relative}
.t-in::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.05) 55%,transparent)}
.t-in span{position:relative;z-index:1;font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.g0{background:radial-gradient(circle at 30% 20%,#f5d0a9,#7c2d12 60%,#1c0a05)}
.g1{background:radial-gradient(circle at 70% 30%,#fde68a,#b45309 55%,#1f1305)}
.g2{background:radial-gradient(circle at 40% 30%,#fecaca,#be123c 50%,#2a0612)}
.g3{background:radial-gradient(circle at 50% 20%,#f8fafc,#94a3b8 50%,#0f172a)}
.g4{background:radial-gradient(circle at 60% 40%,#fed7aa,#c2410c 50%,#1c0d04)}
.g5{background:radial-gradient(circle at 35% 25%,#e5e5e5,#404040 45%,#050505)}
.g6{background:radial-gradient(circle at 50% 15%,#ffffff,#525252 40%,#000)}
.g7{background:radial-gradient(circle at 30% 30%,#c4b5fd,#6d28d9 50%,#12062b)}
.g8{background:radial-gradient(circle at 70% 25%,#99f6e4,#0f766e 50%,#03140f)}
.t-center{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:620px;width:100%}
.t-kicker{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4em;text-transform:uppercase;color:#818cf8;margin:0 0 14px}
.t-title{margin:0;font-size:clamp(40px,8vw,84px);line-height:.92;font-weight:800;letter-spacing:-.04em;background:linear-gradient(to bottom,#fff,#fff 40%,rgba(255,255,255,.4));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.t-sub{margin:16px 0 22px;color:#a3a3b8;font-weight:300;max-width:40ch}
.glass{background:rgba(12,12,20,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.authcard{width:100%;max-width:420px;border-radius:22px;padding:18px 22px 22px;text-align:left}
.authcard .seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);margin-bottom:10px}
.authcard .seg button{border:0;border-radius:999px;padding:9px;background:none;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;transition:all .25s}
.authcard .seg button.on{background:rgba(129,140,248,.22);color:#fff;box-shadow:0 0 16px rgba(129,140,248,.35)}
.authcard .btn{width:100%;margin-top:12px;padding:12px}
.authcard label{font-size:14px;color:#c9c9d6}
.authcard .captcha{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.authcard .captcha label{flex:1 1 140px;margin:0}
/* «пароль ещё раз»: a dot per password letter — green where it matches, red where not; extra letters shake (21st assisted-password-confirmation) */
.pwbox{display:flex;align-items:center;height:30px;margin:6px 0;padding:0 8px;border:2px solid rgba(255,255,255,.12);border-radius:10px;transition:border-color .3s,transform .3s}
.pwdots{display:flex;align-items:center;height:100%}
.pwdots i{position:relative;width:14px;height:100%;display:flex;align-items:center;justify-content:center}
.pwdots i::before{content:"";width:5px;height:5px;border-radius:50%;background:#e5e5f0;position:relative;z-index:1}
.pwdots i::after{content:"";position:absolute;inset:3px 0;transform:scaleX(0);transform-origin:left;transition:transform .3s,background .3s}
.pwdots i.ok::after{transform:scaleX(1);background:rgba(34,197,94,.35)}.pwdots i.bad::after{transform:scaleX(1);background:rgba(239,68,68,.4)}
.pwbox.match,.pwbox.match+input{border-color:#10b981!important}
.pwbox.match{animation:pop .3s}
.pwbox.shake{animation:shake .5s}
@keyframes pop{50%{transform:scale(1.04)}}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-10px)}80%{transform:translateX(10px)}}
@media (max-width:760px){
  body.dark .top.v3{padding:12px 12px 10px}
  .anav{order:3;flex-basis:100%;justify-content:center;margin-top:44px}
  .anav a{padding:10px 18px}.anav a span{display:none}.anav a i{display:inline;font-size:18px}
  .tunnel{padding-top:80px}
}
@media (prefers-reduced-motion:reduce){.anav,.mascot,.mascot *,.anav a.on::before,.anav a.on::after{animation:none!important;transition:none!important}}
body.dark{overflow-x:clip}

/* ---- Галерея v2 (owner 21.10): glass folders + bento + viewer, after 21st.dev components ---- */
.gf-defs{position:absolute;width:0;height:0}
.gal-h{justify-content:space-between;margin:6px 0 4px}.gal-h h1{margin:0}
.folders{display:flex;gap:26px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:30px 6px 18px;margin:0 -6px;scroll-snap-type:x proximity}
.gf{--k:.72;--gf-px:0;--gf-py:0;--gf-ease:cubic-bezier(.2,.8,.2,1);--gf-spring:cubic-bezier(.34,1.36,.5,1);--gf-hinge:0deg;--gf-lift:42px;--gf-spread:0px;--gf-fan:0deg;--gf-stack:15px;
  position:relative;display:block;flex:none;width:calc(340px * var(--k));height:calc(326px * var(--k));isolation:isolate;scroll-snap-align:start;text-decoration:none;color:#f5f5f7!important}
.folders.small .gf{--k:.5}
.gf:hover,.gf:focus-visible{--gf-hinge:-11deg;--gf-lift:-34px;--gf-spread:8px;--gf-fan:1.4deg;--gf-stack:10px;outline:none}
.gf.on{--gf-hinge:-18deg;--gf-lift:-60px;--gf-spread:24px;--gf-fan:3.5deg;--gf-stack:22px}
.gf.on .gf-shadow{background:rgba(129,140,248,.55)}
.gf-stage{position:absolute;left:0;top:0;width:340px;height:272px;transform-origin:0 0;transform:translateY(calc(54px * var(--k))) scale(var(--k))}
.gf-tilt{position:absolute;inset:0;transform:perspective(1400px) rotateX(calc(var(--gf-py) * -3deg)) rotateY(calc(var(--gf-px) * 4deg));transition:transform .9s var(--gf-ease)}
.gf-shadow{position:absolute;left:18px;right:18px;bottom:-6px;height:60px;border-radius:40px;background:rgba(0,0,0,.62);filter:blur(22px);
  transform:translateX(calc(var(--gf-px) * -8px));transition:transform .9s var(--gf-ease),background .6s}
.gf-back{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#2a2a2e,#121214);
  clip-path:path('M0 56A22 22 0 0 1 22 34L146 34C170 34 172 0 198 0L318 0A22 22 0 0 1 340 22L340 250A22 22 0 0 1 318 272L22 272A22 22 0 0 1 0 250Z')}
.gf-art{position:absolute;left:-12px;top:-12px;width:364px;height:296px;max-width:none;object-fit:cover;display:block;
  transform:translate(calc(var(--gf-px) * -7px),calc(var(--gf-py) * -6px)) scale(1.02);transition:transform 1.1s var(--gf-ease)}
.gf-art-0{background:linear-gradient(115deg,#f4efe9,#e9c2b8 18%,#c2433f 38%,#2a1e2a 55%,#22395e 72%,#6f97c2 88%,#e5edf4)}
.gf-art-1{background:radial-gradient(circle at 70% 60%,#ff8a5c,#ef4a2b 18%,#a3201a 30%,#1a1416 48%,#3d5f68 66%,#16252c 82%,#07090c)}
.gf-art-2{background:radial-gradient(circle at 30% 70%,#fbe7d2,#eab08a 16%,#b3502f 32%,#2b1a24 50%,#8f6c9c 68%,#3e2850 84%,#120c18)}
.gf-art-3{background:linear-gradient(20deg,#f7f8fa,#d9e2ea 25%,#9fb4c7 45%,#e8edf2 65%,#bccbd8 85%,#fff)}
.gf-art-4{background:radial-gradient(circle at 60% 30%,#fbf3d6,#e9cf87 16%,#a7843a 32%,#141812 50%,#4f7a5a 68%,#173024 84%,#070b08)}
.gf-back-sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 22%),radial-gradient(120% 80% at 80% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)}
.gf-rim{position:absolute;left:0;top:0;max-width:none;overflow:visible;pointer-events:none;fill:none}
.gf-back-rim{width:340px;height:272px}.gf-back-rim path{stroke:rgba(255,255,255,.16);stroke-width:1}
.gf-files{position:absolute;inset:0;z-index:5;pointer-events:none;clip-path:inset(-400px -400px 10px -400px)}
.gf-sheet{position:absolute;left:34px;top:96px;width:272px;height:184px;border-radius:16px;overflow:hidden;background:#1a1a1d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 .5px rgba(255,255,255,.08),0 12px 28px -8px rgba(0,0,0,.7);transform-origin:50% 100%;
  transform:translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)),calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1)) rotate(calc(var(--gf-jr) + var(--gf-slot) * var(--gf-fan)));
  transition:transform .75s var(--gf-spring) calc(var(--gf-depth) * 40ms)}
.gf-sheet img{width:100%;height:100%;object-fit:cover;display:block}
.gf-sheet::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 34%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
/* fan slots without inline styles: n = how many sheets, s = which one (newest in front) */
.n1.s0{--gf-slot:0;--gf-depth:0;--gf-jx:2px;--gf-jr:-.6deg;z-index:1}
.n2.s0{--gf-slot:-1;--gf-depth:1;--gf-jx:-3px;--gf-jr:1deg;z-index:1}.n2.s1{--gf-slot:1;--gf-depth:0;--gf-jx:2px;--gf-jr:-.8deg;z-index:2}
.n3.s0{--gf-slot:-1;--gf-depth:2;--gf-jx:-4px;--gf-jr:1.2deg;z-index:1}.n3.s1{--gf-slot:0;--gf-depth:1;--gf-jx:3px;--gf-jr:-.5deg;z-index:2}.n3.s2{--gf-slot:1;--gf-depth:0;--gf-jx:-1px;--gf-jr:.7deg;z-index:3}
.gf-front{position:absolute;left:0;top:74px;width:340px;height:198px;z-index:10;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  clip-path:path('M0 22A22 22 0 0 1 22 0L118 0C144 0 146 32 172 32L318 32A22 22 0 0 1 340 54L340 176A22 22 0 0 1 318 198L22 198A22 22 0 0 1 0 176Z');
  transform-origin:50% 100%;transform:perspective(760px) rotateX(var(--gf-hinge));transition:transform .8s var(--gf-spring)}
.gf-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,20,.18),rgba(14,14,16,.62) 46%,rgba(8,8,10,.94))}
.gf-spec{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.16;
  background:radial-gradient(260px 200px at calc(50% + var(--gf-px) * 46%) calc(30% + var(--gf-py) * 40%),rgba(255,255,255,.5),rgba(255,255,255,0) 70%)}
.gf-front-rim{width:340px;height:198px;opacity:.55}.gf-front-rim path{stroke-width:2.4}
.gf.on .gf-front-rim{opacity:1}.gf.on .gf-front-rim path{stroke-width:3.2}
.gf-label{position:absolute;z-index:2;left:28px;right:28px;bottom:30px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.gf-title{font-size:20px;font-weight:600;line-height:1.15;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f5f5f7}
.gf-meta{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;color:rgba(245,245,247,.58)}
.gf .gf-back,.gf .gf-back-rim,.gf .gf-front{animation:gf-in .9s var(--gf-ease) both}.gf .gf-front{animation-delay:.12s}
@keyframes gf-in{from{translate:0 22px;opacity:0}to{translate:0 0;opacity:1}}

/* bento: tall and short tiles, staggered spring entrance, caption on hover */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:60px;grid-auto-flow:dense;gap:12px;margin:14px 0}
.bento .empty{grid-column:1/-1}
.bt{position:relative;margin:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:rgba(255,255,255,.04);grid-row:span 6;
  animation:bt-in .7s cubic-bezier(.34,1.36,.5,1) backwards;transition:transform .3s cubic-bezier(.34,1.36,.5,1),box-shadow .3s}
/* owner 01.11: all photo tiles are one shape — the same as the black «в очереди» cells (.pendt, span 6); previews are cropped by object-fit:cover.
   The b0–b9 classes stay on the tiles (site.js respan after drag-sort), but no longer change the size. */
.bt:hover{transform:scale(1.02);box-shadow:0 20px 40px -14px rgba(0,0,0,.8),0 0 0 1px rgba(129,140,248,.35)}
.bt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bt figcaption{position:absolute;inset:auto 0 0 0;padding:40px 12px 10px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.4) 55%,transparent);opacity:0;transition:opacity .2s}
.bt figcaption span{color:rgba(255,255,255,.7);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt:hover figcaption{opacity:1}
.bt .sel{position:absolute;top:8px;left:8px;z-index:2;margin:0;padding:3px 6px;border-radius:8px;background:rgba(0,0,0,.55);opacity:.6;transition:opacity .2s}
.bt:hover .sel,.bt .sel:has(input:checked){opacity:1}
.bt .sel input{width:auto;margin:0}
@keyframes bt-in{from{opacity:0;transform:translateY(50px) scale(.9)}to{opacity:1;transform:none}}

/* viewer: the photo full-screen, caption, a dock of tilted thumbnails */
.viewer{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(5,5,10,.82);backdrop-filter:blur(18px);animation:v-in .25s ease both}
.viewer[hidden]{display:none}
@keyframes v-in{from{opacity:0}to{opacity:1}}
.v-main{position:relative;margin:0;max-width:min(92vw,1100px);max-height:78vh;display:flex;flex-direction:column;align-items:center}
.v-main img{max-width:100%;max-height:68vh;border-radius:14px;box-shadow:0 30px 80px -20px #000;animation:v-pop .35s cubic-bezier(.34,1.36,.5,1)}
@keyframes v-pop{from{transform:translateY(20px) scale(.97);opacity:.4}to{transform:none;opacity:1}}
.v-main figcaption{display:flex;gap:12px;align-items:center;margin-top:12px;color:#fff;flex-wrap:wrap;justify-content:center}
.v-main figcaption span{color:rgba(255,255,255,.65)}
.v-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
.v-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:14px;background:rgba(255,255,255,.08);color:#fff;font-size:34px;cursor:pointer}
.v-nav.prev{left:14px}.v-nav.next{right:14px}.v-close:hover,.v-nav:hover{background:rgba(255,255,255,.2)}
.v-dock{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;padding:8px 14px;border-radius:16px;max-width:92vw;overflow-x:auto}
.v-dock img{width:40px;height:40px;object-fit:cover;border-radius:9px;margin-left:-8px;cursor:pointer;flex:none;transition:transform .25s cubic-bezier(.34,1.36,.5,1),box-shadow .2s;transform:rotate(-15deg)}
.v-dock img:nth-child(even){transform:rotate(15deg)}
.v-dock img:hover{transform:scale(1.3) translateY(-10px) rotate(0);z-index:20;position:relative}
.v-dock img.on{transform:scale(1.2) translateY(-8px) rotate(0);box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 24px rgba(255,255,255,.25);z-index:30;position:relative}
@media (max-width:760px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:50px}
  .gf{--k:.56}.folders.small .gf{--k:.42}
  .v-nav{display:none}
}
@media (prefers-reduced-motion:reduce){.bt,.gf *,.viewer,.v-main img{animation:none!important;opacity:1}}
body.noscroll{overflow:hidden}

/* ---- Стили v2 (owner 21.10): works wheel + polaroid line, after 21st.dev components ---- */
.ww{position:relative;height:min(78vh,760px);min-height:440px;margin:0 calc(50% - 50vw) 10px;width:100vw;overflow:hidden;user-select:none;-webkit-user-select:none}
.ww-stage{position:absolute;inset:0;cursor:grab;touch-action:pan-x;outline:none}
.ww-stage:active{cursor:grabbing}
.ww-wheel{position:absolute;top:50%;left:50%;transform-style:preserve-3d}
.ww-card{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:#fff!important;text-decoration:none}
.ww-face{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:12px;background:rgba(255,255,255,.05);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
.ww-face img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ww-go{position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:999px;font-size:12px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(4px);transition:all .2s}
.ww-card:hover .ww-go{opacity:1;transform:none}
.ww-label,.ww-title{position:absolute;pointer-events:none;font-weight:700;letter-spacing:-.03em;color:#fff}
.ww-label{inset:0;display:grid;place-items:center;font-size:var(--ww-t,48px)}
.ww-title{top:50%;left:6%;transform:translateY(-50%);max-width:26%;font-size:calc(var(--ww-t,48px) * .7);line-height:1.05;opacity:0;text-shadow:0 4px 24px rgba(0,0,0,.7)}
.ww-index{position:absolute;top:7%;right:3%;margin:0;padding:0;list-style:none;text-align:right;line-height:1.9;font-size:14px}
.ww-index button{border:0;background:none;padding:0;font:inherit;color:var(--muted);cursor:pointer;transition:color .2s}
.ww-index button:hover,.ww-index button.on{color:#fff}.ww-index button.on{font-weight:600}
.ww-hint{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3em;text-transform:uppercase;color:#6b6b80;pointer-events:none}

.pl{position:relative;height:540px;margin:10px calc(50% - 50vw) 20px;width:100vw;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;outline:none;cursor:grab;--pl-cw:240px}
.pl.drag{cursor:grabbing}
.pl-string{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pl-card{position:absolute;left:0;top:0;width:var(--pl-cw);transform-origin:50% 0;will-change:transform}
.pl-print{margin-top:10px;background:#fbfaf7;padding:10px 10px 0;box-shadow:0 1px 2px rgba(0,0,0,.3),0 22px 34px -16px rgba(0,0,0,.9);transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s}
.pl-card:not(.on) .pl-print{transform:scale(.9);filter:saturate(.7) brightness(.85)}
.pl-shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:#d9d5cc}
.pl-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pl-note{height:42px;display:flex;align-items:center;justify-content:center;font:italic 400 15px/1.1 ui-serif,Georgia,'Times New Roman',serif;color:#3b3833}
.pl-peg{position:absolute;left:50%;top:0;width:10px;height:26px;margin-left:-5px;border-radius:2px;background:linear-gradient(90deg,#c9a67a,#e3c9a1 45%,#b8915f);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.pl-peg::after{content:"";position:absolute;left:4px;top:8px;width:2px;height:7px;background:rgba(80,60,30,.45);border-radius:1px}
.pl-bar{position:absolute;left:clamp(16px,4vw,56px);right:clamp(16px,4vw,56px);bottom:18px;display:flex;align-items:center;gap:14px;cursor:default}
.pl-cap{flex:1;min-width:0;overflow:hidden}
.pl-cap>*{display:block;animation:pl-in .55s cubic-bezier(.2,.8,.2,1) both}
.pl-title{font:500 24px/1.15 ui-serif,Georgia,'Times New Roman',serif;color:#fff}
.pl-sub{margin-top:4px;font-size:13px;color:var(--muted)}
.pl-count{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--muted)}.pl-count b{color:#fff;font-weight:500}
.pl-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;font-size:20px;cursor:pointer;transition:background .2s,color .2s}
.pl-btn:hover{background:#fff;color:#07070c}
@keyframes pl-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media (max-width:760px){.ww-index{display:none}.ww-title{left:4%;max-width:40%}.pl{height:460px;--pl-cw:170px}.pl-open{display:none}}
@media (prefers-reduced-motion:reduce){.pl-cap>*{animation:none}.pl-print{transition:none}}
/* the logo (owner 21.10): white version on the dark site */
.logo-img{display:block;height:48px;width:auto}
.t-logo{width:min(440px,78vw);height:auto;margin:0 0 6px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
@media (max-width:760px){.logo-img{height:30px}}
/* owner 21.10: the number is always on the tile, the description slides in on hover */
.bt figcaption{opacity:1;padding:26px 12px 9px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.25) 60%,transparent)}
.bt figcaption b{font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.bt figcaption span{max-height:0;opacity:0;transform:translateY(6px);transition:max-height .25s,opacity .25s,transform .25s}
.bt:hover figcaption span{max-height:2.6em;opacity:1;transform:none}
/* «Своё»: drag the tiles to reorder them */
.bento.sortable .bt{cursor:grab}
.bento.sortable .bt.dragging{opacity:.35;transform:scale(.96);outline:2px dashed rgba(129,140,248,.8);outline-offset:-2px}
.sortbar .saved{margin-left:auto;transition:opacity .4s}
/* owner 21.10: Стили and Галерея use the whole width of the screen */
body.wide main{max-width:none;padding:16px clamp(16px,2.5vw,40px)}
body.wide .bento{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
body.wide .ww,body.wide .pl{margin-left:calc(-1 * clamp(16px,2.5vw,40px));margin-right:calc(-1 * clamp(16px,2.5vw,40px));width:auto}
/* owner 21.10: the wheel turns only over this band; beside it the mouse wheel scrolls the page */
.ww-stage{touch-action:pan-y;cursor:default}.ww-stage:active{cursor:default}
.ww-zone{position:absolute;top:0;bottom:0;left:50%;width:var(--ww-zw,300px);transform:translateX(-50%);z-index:150;touch-action:none;cursor:grab;
  background:linear-gradient(to bottom,transparent,rgba(129,140,248,.05) 30%,rgba(129,140,248,.05) 70%,transparent);
  border-left:1px dashed rgba(255,255,255,.06);border-right:1px dashed rgba(255,255,255,.06);transition:background .3s,border-color .3s}
.ww-zone:hover{background:linear-gradient(to bottom,transparent,rgba(129,140,248,.09) 30%,rgba(129,140,248,.09) 70%,transparent);border-color:rgba(129,140,248,.2)}
.ww-zone:active{cursor:grabbing}
.ww-card.front .ww-go{opacity:1;transform:none}
.ww-label,.ww-title,.ww-index,.ww-hint{z-index:160}.ww-index{pointer-events:auto}
/* tasks dashboard (owner 21.10) */
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin:16px 0}
.job{border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.job header{display:flex;justify-content:space-between;font-size:13px}
.job h3{margin:2px 0 0;font-size:19px}
.j-where{margin:0;font-size:13px}
.j-state{font-weight:600}
.job.running .j-state{color:#a5b4fc}.job.queued .j-state{color:#fcd34d}.job.paused .j-state{color:#fdba74}.job.finished .j-state{color:#6ee7b7}
.job.finished{opacity:.75}
.j-bar{position:relative;display:flex;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:6px 0 2px}
.j-bar i{display:block;height:100%;width:0;transition:width .6s}
.j-bar .done{background:linear-gradient(90deg,#6366f1,#a78bfa)}
.j-bar .run{background:repeating-linear-gradient(45deg,#fbbf24 0 6px,#f59e0b 6px 12px);animation:barber 1s linear infinite;background-size:17px 17px}
@keyframes barber{to{background-position:17px 0}}
.j-nums{margin:0;font-size:14px;color:var(--muted)}.j-nums b{color:#fff}
.job footer{margin-top:6px;gap:8px}.job footer .btn{padding:8px 14px;font-size:14px}.j-sum{margin-left:auto}
.jobs-link{position:relative}.jobs-link b{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:#f59e0b;color:#111;font-size:12px;text-align:center}
.jobs-link.live{color:#fcd34d!important}
/* Gallery: marks, ticks and the right-button menu (owner 21.10) */
.bt:has(.sel input:checked){outline:3px solid #818cf8;outline-offset:-3px;box-shadow:0 0 0 4px rgba(129,140,248,.25)}
.bt:has(.sel input:checked) .sel{opacity:1;background:#6366f1}
.selbar{gap:12px;align-items:center;position:sticky;bottom:0;padding:10px 0;background:none;z-index:5}  /* owner 21.10: no band — the rain runs between the buttons */
.selbar .hint{margin-left:auto;font-size:12px}
.selbar .btn[disabled]{opacity:.4}
.ctx{position:fixed;z-index:120;min-width:200px;padding:6px;border-radius:16px;display:flex;flex-direction:column;animation:ctx-in .18s cubic-bezier(.34,1.36,.5,1)}
.ctx[hidden]{display:none}
@keyframes ctx-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.ctx>button,.ctx>a{all:unset;box-sizing:border-box;padding:9px 12px;border-radius:10px;font-size:14px;color:#f4f4f5;cursor:pointer}
.ctx>button:hover,.ctx>a:hover{background:rgba(255,255,255,.09)}
.ctx>.danger-text{color:#ff8a80}
.bt.holding{transition:transform 1s linear;transform:scale(.97)}
.bt img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ctx.glass{background:rgba(16,16,24,.94);border-color:rgba(255,255,255,.14)}
.ctx.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:#14141c}
.bt .up2k{position:absolute;top:8px;left:40px;z-index:2;padding:1px 7px;border-radius:7px;font:700 11px/1.6 ui-monospace,Menlo,monospace;color:#0b0b12;
  background:linear-gradient(135deg,#a5f3fc,#c4b5fd);box-shadow:0 2px 8px rgba(165,243,252,.35)}
.ctx>button[hidden]{display:none}
/* «Улучшить» (owner 21.10) */
.up-lead{max-width:900px}
.up2k.inline{position:static;display:inline-block;padding:0 6px;border-radius:6px;font:700 11px/1.6 ui-monospace,Menlo,monospace;color:#0b0b12;background:linear-gradient(135deg,#a5f3fc,#c4b5fd)}
.ups{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin:16px 0}
.upcard{border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.upcard h3{margin:0;font-size:18px}.upcard p{margin:0}.upcard .small{font-size:13px}
.upcard.on{outline:2px solid rgba(129,140,248,.6)}
.upcard footer{margin-top:6px;gap:8px}
/* owner 21.10: the wheel band is invisible */
.ww-zone,.ww-zone:hover{background:none;border:0}
/* viewer v2 (owner 21.10): zoom, slideshow, marks and «Улучшить» under the photo */
.v-top{position:absolute;top:14px;right:14px;display:flex;gap:8px;align-items:center;z-index:3}
.v-top .v-close{position:static}
.v-btn,.v-int{height:42px;padding:0 14px;border-radius:12px;border:0;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:14px;cursor:pointer}
.v-btn:hover,.v-int:hover{background:rgba(255,255,255,.2)}
.v-int{width:auto;padding:0 10px}
.v-zoom{overflow:hidden;border-radius:14px;max-width:100%;max-height:68vh;display:flex;justify-content:center;cursor:zoom-in}
.v-zoom img{transition:transform .12s ease-out;border-radius:14px}
.v-zoom.zoomed{cursor:move}
.viewer.full{background:#000}
.viewer.full .v-main{max-width:100vw;max-height:100vh}
.viewer.full .v-zoom,.viewer.full .v-main img{max-height:86vh}
.viewer.full .v-dock{opacity:0;transition:opacity .3s}.viewer.full:hover .v-dock{opacity:1}
@media (max-width:760px){.v-top{top:8px;right:8px}.v-btn,.v-int{height:36px;padding:0 10px}}
/* «✓ Улучшено до 2K» instead of «Улучшить» (owner 21.10) */
.upped{display:inline-flex;align-items:center;padding:7px 12px;border-radius:12px;font-size:14px;font-weight:600;color:#0b0b12;
  background:linear-gradient(135deg,#a5f3fc,#c4b5fd);cursor:default}
.upped[hidden]{display:none}
.ctx>.upped{margin:4px 6px;justify-content:center}
/* the liquid logo behind every page (owner 21.10) */
.liquid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.liquid-bg.on{opacity:.32}
.liquid-bg canvas{display:block;width:100%;height:100%}
/* (the old liquid background needed main above it; the rain sits at z-index -1, and main must not trap the viewer under the header) */
/* the liquid logo (owner 21.10): the canvas lies over the picture, a bit larger, so the liquid can spill out of it */
.lq{position:relative;display:inline-block;line-height:0}
.lq canvas{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .4s;z-index:3}
.lq.on canvas{opacity:1}
.lq.on img{visibility:hidden}
.t-lq{margin:0 0 6px}.t-lq .t-logo{margin:0}
/* owner 21.10: no mascot — the header is lower */
body.dark .top.v3{padding-top:12px;padding-bottom:12px}
@media (max-width:760px){body.dark .top.v3{padding-top:10px}.anav{margin-top:8px}}
/* «Выберите модель ИИ» (owner 21.10) */
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pickmodel{position:relative;display:flex;flex-direction:column;gap:4px;margin:0;padding:14px 16px;border:2px solid var(--line);border-radius:12px;cursor:pointer;background:rgba(255,255,255,.03)}
.pickmodel input{position:absolute;opacity:0;pointer-events:none}
.pickmodel b{font-size:17px}
.pickmodel p{margin:0;color:var(--muted);font-size:14px}
.pickmodel p b{font-size:inherit;color:var(--text,inherit)}
.pickmodel .price{margin-top:auto;padding-top:6px;font-weight:600}
.pickmodel.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(129,140,248,.25),0 10px 30px -10px rgba(129,140,248,.5)}
.nbkey{margin-top:12px}
.nbkey input[data-nbinput]{flex:1;min-width:220px}
.tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--acc);color:var(--acc);vertical-align:middle}
.nbkey [hidden]{display:none!important}
.nbcalc{max-width:460px;margin:8px 0}
.nbcalc td:last-child,.nbcalc th:last-child{text-align:right;white-space:nowrap}
/* the background: 21st.dev «Data-Rain» (owner 21.10); under everything, never catches the mouse */
.dr-root{--dr-bg-0:#020308;--dr-bg-1:#05070d;--dr-bg-2:#0a1020;--dr-calm:#22e6ff;--dr-mid:#8a5cff;--dr-hot:#ff3d9a;--dr-core:#eafcff;
  --dr-bloom-blur:10px;--dr-bloom-opacity:.7;--dr-vignette:.62;--dr-grain:.05;
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 38%,var(--dr-bg-2) 0%,var(--dr-bg-1) 55%,var(--dr-bg-0) 100%);animation:dr-fade-in .9s cubic-bezier(.22,1,.36,1) both}
.dr-main,.dr-bloom{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.dr-bloom{filter:blur(var(--dr-bloom-blur)) saturate(1.4);mix-blend-mode:screen;opacity:var(--dr-bloom-opacity);transform:scale(1.03)}
.dr-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 46%,transparent 40%,rgba(0,0,0,var(--dr-vignette)) 100%)}
.dr-grain{position:absolute;inset:0;pointer-events:none;opacity:var(--dr-grain);mix-blend-mode:overlay;background-size:180px 180px;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes dr-fade-in{0%{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dr-root{animation:none}}
/* three model cards + «Подробнее о тарифах» (owner 21.10) */
.models.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pickmodel .more{font-size:13px;margin-top:2px}
.pickmodel.off{opacity:.5;cursor:not-allowed}
.tariffs .card ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.tariffs .card{scroll-margin-top:140px}
.tariffs .card:target{border-color:var(--acc);box-shadow:0 0 0 3px rgba(129,140,248,.25)}
/* «Топ 10 стилей» — 21st.dev «Hero Carousel» (owner 21.10) */
.hc{position:relative;height:min(82vh,820px);min-height:460px;width:100vw;margin:0 calc(50% - 50vw) 18px;overflow:hidden;background:#000;color:#fff;
  user-select:none;-webkit-user-select:none;outline:none}
.hc:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.hc-bg,.hc-layer,.hc-wash,.hc-grain{position:absolute;inset:0}
.hc-layer{opacity:0;transition:opacity .7s ease-out}
.hc-layer.in{opacity:1}
.hc-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.42);transition:transform 6s linear}
.hc-layer.in img{transform:scale(1.28)}
.hc-tint{position:absolute;inset:0;mix-blend-mode:color}
.hc-tint2{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.3}
.hc-wash{background:linear-gradient(to bottom,rgba(0,0,0,.4),transparent 50%,rgba(0,0,0,.45))}
.hc-grain{pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-size:180px 180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hc-top{position:absolute;left:0;right:0;top:max(16px,2.9%);text-align:center;font-weight:600;letter-spacing:.06em;font-size:15px;text-transform:uppercase;opacity:.9}
.hc-head{position:absolute;left:max(16px,1.7vw);right:max(16px,1.7vw);top:0;height:50%;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 4vw;padding-bottom:2.8%}
.hc-title{margin:0;font-size:var(--hc-title,48px);font-weight:600;line-height:.95;letter-spacing:-.03em;overflow:hidden;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hc-title .hc-tl{display:block;animation:hc-up .62s cubic-bezier(.22,1,.36,1) both}
@keyframes hc-up{from{transform:translateY(110%)}to{transform:none}}
.hc-credit{margin:0;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.14em;opacity:.8}
.hc-meta{display:flex;gap:6px;margin-left:auto}
.hc-open{margin-left:8px}
.hc-strip{position:absolute;left:0;right:0;top:50%;height:var(--hc-full,300px)}
.hc-track{display:flex;align-items:flex-start;gap:var(--hc-gap,10px);height:100%;cursor:grab;touch-action:pan-y;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.hc-track.still{transition:none}
.hc-track.grabbing{cursor:grabbing}
.hc-card{position:relative;flex:none;width:var(--hc-w,225px);height:calc(var(--hc-full,300px) / 2);padding:0;border:0;overflow:hidden;background:rgba(255,255,255,.05);cursor:inherit;
  transition:height .6s cubic-bezier(.22,1,.36,1)}
.hc-card.on{height:var(--hc-full,300px);cursor:pointer}
.hc-card img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block;pointer-events:none}
.hc-card::after{content:'';position:absolute;inset:0;background:#000;opacity:.12;transition:opacity .6s}
.hc-card.on::after{opacity:0}
.hc-rail{position:absolute;left:max(16px,1.7vw);bottom:max(14px,2.2%);width:20vw;min-width:140px}
.hc-nums{display:flex;justify-content:space-between;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.8;font-variant-numeric:tabular-nums}
.hc-line{position:relative;height:1px;margin-top:8px;background:rgba(255,255,255,.25)}

.hc-line i{position:absolute;top:0;bottom:0;background:#fff;transition:left .6s cubic-bezier(.22,1,.36,1)}
.hc-hint{position:absolute;right:max(16px,1.7vw);bottom:max(14px,2.2%);margin:0;font-size:13px;opacity:.75;max-width:40%;text-align:right}
@media (prefers-reduced-motion:reduce){.hc-track,.hc-card,.hc-layer,.hc-layer img,.hc-line i{transition:none}.hc-title .hc-tl{animation:none}}
@media (max-width:700px){.hc-meta{margin-left:0}.hc-hint{display:none}}
/* labels on styles (owner 21.10) */
.stags{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}
.stag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:18px;border:1px solid var(--stag-l,rgba(255,255,255,.25));color:var(--stag-c,#e6e6f0);background:var(--stag-b,rgba(255,255,255,.08))}
.stag[data-t="Топ"]{color:#1a1200;background:#fbbf24;border-color:#fbbf24}
.stag[data-t="Проверен"]{color:#062b16;background:#4ade80;border-color:#4ade80}
.stag[data-t="Эксперимент"]{color:#2b1300;background:#fb923c;border-color:#fb923c}
.stag[data-t="Новинка"]{color:#071a33;background:#60a5fa;border-color:#60a5fa}
.style-card.tf-off{display:none}
.tagfilter{margin:10px 0}
.tagfilter .chip .stag{pointer-events:none}
.tagedit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 14px}
.pickstyle .stags{margin:6px 0 0}
/* the header switches: background on/off, light/dark (owner 21.10) */
.tgl{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:16px;line-height:1;padding:0}
.tgl:hover{background:rgba(127,127,127,.15)}
.tgl.off{opacity:.45;filter:grayscale(1)}
/* the light theme: the old light look + the new header */
body.theme-light{--stag-c:#3a3a40;--stag-b:#f0f0ee;--stag-l:var(--line)}
body.theme-light .top.v3{background:rgba(246,246,244,.85);backdrop-filter:blur(10px)}
body.theme-light .anav{background:rgba(255,255,255,.75);border-color:var(--line);box-shadow:0 6px 24px -12px rgba(0,0,0,.25)}
body.theme-light .anav a{color:#55555c!important}
body.theme-light .anav a:hover{color:var(--ink)!important;background:rgba(0,0,0,.05)}
body.theme-light .anav a.on{color:var(--acc)!important}
body.theme-light .anav a.on::before{background:rgba(47,111,237,.12);box-shadow:0 0 14px 2px rgba(47,111,237,.18)}
body.theme-light .anav a.on::after{background:linear-gradient(90deg,transparent,rgba(47,111,237,.15),transparent);background-size:200% 100%}
/* the viewer: the wheel makes the photo bigger up to the screen; «Во весь экран» — only the photo; the strip grows up to the full width */
.v-zoom{overflow:visible;position:relative;z-index:4;cursor:zoom-in}
.v-zoom.zoomed{cursor:zoom-out}
.v-zoom img{transition:transform .18s ease-out;position:relative;z-index:4}
.viewer.pure{background:#000;backdrop-filter:none}
.viewer.pure .v-top,.viewer.pure .v-nav,.viewer.pure figcaption,.viewer.pure .v-dock{display:none}
.viewer.pure .v-main{max-width:100vw;max-height:100vh}
.viewer.pure .v-zoom,.viewer.pure .v-main img{max-width:100vw;max-height:100vh;border-radius:0;box-shadow:none}
.v-esc{position:absolute;top:16px;left:50%;transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;z-index:6;pointer-events:none}
.v-esc[hidden]{display:none}
.v-dock{max-width:calc(100vw - 16px)}
.v-dock img:first-child{margin-left:0}
/* the sections: 21st.dev «Gradient Menu» (owner 21.10) — round icons; hover → a gradient pill with the name; the open section stays open */
.gm{display:flex;gap:14px;margin:0 auto;padding:4px 0}
.gm a{--gf:#a955ff;--gt:#ea51ff;position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;flex:none;
  text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 20px -10px rgba(0,0,0,.6);
  transition:width .5s,box-shadow .5s,border-color .5s}
.gm a.g2{--gf:#FF9966;--gt:#FF5E62}.gm a.g3{--gf:#56CCF2;--gt:#2F80ED}.gm a.g4{--gf:#80FF72;--gt:#7EE8FA}
.gm a::before,.gm a::after{content:'';position:absolute;inset:0;border-radius:999px;background:linear-gradient(45deg,var(--gf),var(--gt));opacity:0;transition:opacity .5s}
.gm a::after{top:10px;filter:blur(15px);z-index:-1}
.gm i{position:relative;z-index:1;display:flex;color:#9a9aae;transition:transform .5s}
.gm svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gm span{position:absolute;z-index:1;color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transform:scale(0);transition:transform .5s}
.gm a:hover,.gm a:focus-visible,.gm a.on{width:150px;border-color:transparent;box-shadow:none}
.gm a:hover::before,.gm a:focus-visible::before,.gm a.on::before{opacity:1}
.gm a:hover::after,.gm a:focus-visible::after,.gm a.on::after{opacity:.5}
.gm a:hover i,.gm a:focus-visible i,.gm a.on i{transform:scale(0)}
.gm a:hover span,.gm a:focus-visible span,.gm a.on span{transform:scale(1);transition-delay:.15s}
.gm a.g4 span{color:#0b2a2a}
body.theme-light .gm a{background:#fff;border-color:var(--line);box-shadow:0 8px 20px -12px rgba(0,0,0,.35)}
body.theme-light .gm i{color:#6b7280}
@media (max-width:760px){.gm{order:3;flex-basis:100%;justify-content:center;gap:10px;margin-top:8px}.gm a{width:44px;height:44px}
  .gm a:hover,.gm a:focus-visible,.gm a.on{width:118px}.gm span{font-size:11px}}
@media (prefers-reduced-motion:reduce){.gm a,.gm a::before,.gm a::after,.gm i,.gm span{transition:none}}
/* the avatar menu (owner 21.10): the avatar in the header; inside — the person, the links, «Выход» */
.ava{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;color:#fff;font-weight:700;font-size:16px;flex:none;
  background:linear-gradient(135deg,#2dd4bf,#7c3aed);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ava[data-g="1"]{background:linear-gradient(135deg,#f472b6,#7c3aed)}.ava[data-g="2"]{background:linear-gradient(135deg,#fb923c,#e11d48)}
.ava[data-g="3"]{background:linear-gradient(135deg,#38bdf8,#4f46e5)}.ava[data-g="4"]{background:linear-gradient(135deg,#a3e635,#0d9488)}
.ava[data-g="5"]{background:linear-gradient(135deg,#facc15,#f97316)}
.ava.big{width:56px;height:56px;font-size:22px}
.umenu{position:relative}
.umenu summary{list-style:none;cursor:pointer;border-radius:999px;display:block}
.umenu summary::-webkit-details-marker{display:none}
.umenu summary .ava{transition:transform .2s,box-shadow .2s}
.umenu summary:hover .ava,.umenu[open] summary .ava{transform:scale(1.06);box-shadow:0 0 0 3px rgba(129,140,248,.35)}
.umenu-box{position:absolute;right:0;top:calc(100% + 10px);z-index:50;width:280px;border-radius:14px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);box-shadow:0 22px 50px -14px rgba(0,0,0,.6);animation:um-in .18s ease-out both}
body.dark .umenu-box{background:#16161c}
.um-who{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.um-who div b{display:block;font-size:17px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.um-who div span{display:block;font-size:13px;color:var(--muted)}
.um-links{display:flex!important;flex-direction:column;align-items:stretch!important;gap:0!important;padding:6px;margin:0}
.um-links a{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:10px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.um-links a:hover{background:rgba(127,127,127,.14)}
.um-links svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.um-out{margin:0;padding:10px 16px 14px;border-top:1px solid var(--line)}
.um-out button{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.um-out button:hover{background:rgba(127,127,127,.14)}
@keyframes um-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* «Настройки» */
.setlist{display:flex;flex-direction:column;gap:0;padding:6px 18px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow p{margin:2px 0 0;font-size:14px}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;flex:none}
.seg button{border:0;background:none;color:var(--ink);font:inherit;font-size:14px;padding:7px 14px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--acc);color:#fff}
@media (max-width:600px){.setrow{flex-direction:column;align-items:flex-start}}
/* password strength (21st.dev, owner 21.10) */
.pws{--pc:#a8a29e;margin:-4px 0 12px}
.pws[data-tone=danger]{--pc:#ef4444}.pws[data-tone=caution]{--pc:#f59e0b}.pws[data-tone=safe]{--pc:#10b981}
.pws-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pws-bars i{position:relative;height:6px;border-radius:2px;background:rgba(127,127,127,.22);overflow:hidden}
.pws-bars i::after{content:'';position:absolute;inset:0;background:var(--pc);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.34,1.3,.5,1),background .2s}
.pws-bars i.on::after{transform:scaleX(1)}
.pws-bars i:nth-child(2)::after{transition-delay:.03s}.pws-bars i:nth-child(3)::after{transition-delay:.06s}.pws-bars i:nth-child(4)::after{transition-delay:.09s}
.pws-row{display:flex;justify-content:space-between;align-items:center;height:20px;margin-top:6px;font-size:12.5px}
.pws-word{color:var(--pc);font-weight:600;transition:color .2s}
.pws-guess{color:#f59e0b;font-size:11.5px;opacity:0;transition:opacity .3s}.pws-guess.on{opacity:1}
.pws-rules{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.pws-rules li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);transition:color .2s}
.pws-rules li.met{color:var(--ink)}
.pws-box{position:relative;display:grid;place-items:center;width:14px;height:14px;flex:none;border-radius:4px;border:1px solid rgba(127,127,127,.4);transition:background .25s,border-color .25s}
.pws-box svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s cubic-bezier(.34,1.5,.5,1)}
.pws-rules li.met .pws-box{background:#10b981;border-color:#10b981}
.pws-rules li.met .pws-box svg{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pws *,.pws *::after{transition:none!important}}
/* «Задачи»: a round button with a counter (21st.dev «Notification Button», owner 21.10) */
.nbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;flex:none;
  border:1px solid var(--line);color:var(--ink)!important;text-decoration:none;transition:background .2s,transform .2s}
.nbtn:hover{background:rgba(127,127,127,.15);transform:translateY(-1px)}
.nbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nbtn-badge{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#f59e0b;color:#111;
  font-size:11.5px;font-weight:700;line-height:19px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.nbtn-badge[hidden]{display:none}
.nbtn.live{border-color:rgba(245,158,11,.6);color:#fcd34d!important}
.nbtn.live::after{content:'';position:absolute;inset:-1px;border-radius:999px;border:2px solid rgba(245,158,11,.55);animation:nbtn-pulse 1.8s ease-out infinite;pointer-events:none}
@keyframes nbtn-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.45);opacity:0}}
body.theme-light .nbtn.live{color:#b45309!important}
@media (prefers-reduced-motion:reduce){.nbtn.live::after{animation:none}}
/* day / night (21st.dev «Theme Switcher», owner 21.10): two options, the ring slides to the chosen one */
.thsw{position:relative;display:inline-flex;align-items:center;border-radius:999px;background:#09090b;box-shadow:inset 0 0 0 1px #3f3f46;flex:none}
body.theme-light .thsw{background:#fff;box-shadow:inset 0 0 0 1px #e4e4e7}
.thsw button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:none;
  color:#71717a;cursor:pointer;transition:color .2s}
.thsw button:hover,.thsw button[aria-checked=true]{color:#fafafa}
body.theme-light .thsw button{color:#a1a1aa}
body.theme-light .thsw button:hover,body.theme-light .thsw button[aria-checked=true]{color:#09090b}
.thsw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.thsw-ring{position:absolute;top:0;left:0;width:32px;height:32px;border-radius:999px;border:1px solid #3f3f46;transform:translateX(32px);
  transition:transform .6s cubic-bezier(.34,1.3,.5,1);pointer-events:none}
.thsw.is-light .thsw-ring{transform:none}
body.theme-light .thsw-ring{border-color:#e4e4e7}
@media (prefers-reduced-motion:reduce){.thsw-ring{transition:none}}
.tgl{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.tgl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* photo change effects (21st.dev, kedhareswer; owner 21.10) and the slideshow timing line */
.fx-layer{position:fixed;z-index:6;overflow:hidden;pointer-events:none}
.fx-fill{position:absolute;inset:0;overflow:hidden}
.fx-cover{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0!important;box-shadow:none!important;animation:none!important}
.fx-ring{position:absolute;left:0;top:0;border-radius:50%;border:1px solid rgba(255,255,255,.9);opacity:0}
.fx-svg,.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.v-timer{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:min(60vw,640px);height:2px;border-radius:2px;background:rgba(255,255,255,.18);z-index:5;overflow:hidden}
.v-timer[hidden]{display:none}
.v-timer i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.v-timer.run i{animation:vt-fill var(--vt,5s) linear forwards}
@keyframes vt-fill{to{transform:scaleX(1)}}
.viewer.pure .v-timer{bottom:10px;opacity:.7}
/* thin scrollbars in the site's colours, no arrows (owner 21.10) */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);background-clip:padding-box}
:root:has(body.theme-light) ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);background-clip:padding-box}
:root:has(body.theme-light) ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4);background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
  body.theme-light *{scrollbar-color:rgba(0,0,0,.25) transparent}}
/* the model on a circular carousel (21st.dev, owner 21.10) */
.cc{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;outline:none;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cc:focus-visible{box-shadow:0 0 0 2px var(--acc);border-radius:16px}
.cc-track{position:relative;width:100%;max-width:640px;height:300px}
.cc-card{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:8px;width:250px;height:156px;
  margin:0;padding:14px 16px;border-radius:18px;cursor:pointer;color:#fff;background:linear-gradient(to bottom,rgba(39,39,42,.92),rgba(24,24,27,.92));
  border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px -4px rgba(0,0,0,.3);backdrop-filter:blur(4px);
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .65s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.cc-card input{position:absolute;opacity:0;pointer-events:none}
.cc-card.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(129,140,248,.25),0 20px 60px -12px rgba(0,0,0,.6)}
.cc-card.off{filter:grayscale(.6)}
.cc-tag{border-radius:999px;background:rgba(255,255,255,.1);padding:2px 9px;font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.8)}
.cc-body b{display:block;font-size:15px;line-height:1.2;color:rgba(255,255,255,.85)}
.cc-card.on .cc-body b{font-size:17px;color:#fff}
.cc-body span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.45)}
.cc-card.on .cc-body span{color:rgba(255,255,255,.7)}
.cc-center{position:absolute;left:0;right:0;top:170px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.cc-num{font-size:44px;font-weight:800;letter-spacing:-.02em;color:var(--ink);opacity:.9;line-height:1}
.cc-of{font-size:12px;color:var(--muted)}
.cc-center .more{pointer-events:auto;margin-top:6px;font-size:13px}
.cc-ctrl{display:flex;align-items:center;gap:14px}
.cc-btn{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:rgba(127,127,127,.08);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;transition:transform .2s,background .2s}
.cc-btn:hover{transform:scale(1.08);background:rgba(127,127,127,.18)}
.cc-dots{display:flex;gap:6px}
.cc-dots button{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(127,127,127,.35);cursor:pointer;transition:width .3s,background .3s}
.cc-dots button.on{width:24px;background:var(--ink)}
body.theme-light .cc-card{color:var(--ink);background:linear-gradient(to bottom,#fff,#f4f4f5);border-color:var(--line)}
body.theme-light .cc-tag{background:rgba(0,0,0,.06);color:#3f3f46}
body.theme-light .cc-body b,body.theme-light .cc-card.on .cc-body b{color:var(--ink)}
body.theme-light .cc-body span,body.theme-light .cc-card.on .cc-body span{color:var(--muted)}
@media (max-width:600px){.cc-track{height:280px}.cc-card{width:200px;height:150px}.cc-center{top:160px}}
@media (prefers-reduced-motion:reduce){.cc-card{transition:none}}
/* the launch line floats over the form: its words sit on a small glass pill (only when there are words) */
.gen .launch .total{flex:0 1 auto;margin-right:auto}
.gen .launch .total:not(:empty){padding:8px 14px;border-radius:999px;background:rgba(14,14,22,.78);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:14px}
body.theme-light .gen .launch .total:not(:empty){background:rgba(255,255,255,.85)}
/* «Тарифы» (21st.dev «Pricing», uilayout; owner 21.10) */
.pr{margin:10px 0 30px}
.pr-title{font-size:clamp(30px,5vw,54px);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:10px 0 14px;max-width:16ch}
.pr-title .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.pr-title .w>span{display:inline-block;animation:pr-cut .7s cubic-bezier(.22,1,.36,1) both}
@keyframes pr-cut{from{transform:translateY(105%)}to{transform:none}}
.pr-in{animation:pr-blur .5s ease-out both}
@keyframes pr-blur{from{opacity:0;transform:translateY(-20px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.pr-lead{max-width:62ch;color:var(--muted)}
.pr-now{margin:14px 0 6px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.pr-now .bar{display:block;margin-top:8px;height:6px;background:rgba(127,127,127,.22)}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;padding:18px 0}
.pr-card{position:relative;display:flex;flex-direction:column;padding:22px;border-radius:18px;border:1px solid var(--line);background:var(--card);scroll-margin-top:120px}
.pr-card.hot{box-shadow:0 0 0 2px #f97316;background:linear-gradient(180deg,rgba(249,115,22,.10),var(--card) 60%)}
.pr-card.mine{box-shadow:0 0 0 2px var(--acc)}
.pr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pr-head h3{margin:0;font-size:28px;font-weight:600}
.pr-pop{background:#f97316;color:#fff;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.pr-pop.mine{background:var(--acc)}
.pr-price{margin:12px 0 16px}
.pr-price b{font-size:40px;font-weight:600;letter-spacing:-.02em}
.pr-price span{color:var(--muted);margin-left:4px}
.pr-card form{margin:0}
.pr-btn{display:block;width:100%;padding:14px;border-radius:14px;font:inherit;font-size:18px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;
  color:#fff!important;border:1px solid #3f3f46;background:linear-gradient(to top,#18181b,#52525b);box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
.pr-btn.hot{border-color:#fb923c;background:linear-gradient(to top,#f97316,#ea580c);box-shadow:0 10px 26px -8px rgba(249,115,22,.7)}
.pr-btn.ghost{color:var(--muted)!important;background:none;border-color:var(--line);box-shadow:none}
.pr-btn:disabled{opacity:.55;cursor:not-allowed}
.pr-note{margin:8px 0 0;font-size:13px;color:var(--muted);min-height:2.6em}
.pr-list{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.pr-list li{display:flex;align-items:center;gap:10px;font-size:15px}
.pr-list i{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:999px;border:1px solid #f97316;color:#f97316;font-style:normal;font-size:13px;font-weight:700}
.topup input{max-width:180px}
@media (prefers-reduced-motion:reduce){.pr-in,.pr-title .w>span{animation:none}}
/* the Gallery: a photo the plan's storage days will delete soon */
.bt .delsoon{position:absolute;left:8px;bottom:34px;z-index:3;padding:2px 8px;border-radius:999px;background:rgba(220,38,38,.85);color:#fff;font-size:11px;font-weight:700}
/* owner 21.10: no number and no arrows under the model carousel — the «?» on the front card leads to its tariffs */
.cc-track{height:240px}
.cc-card{top:180px}
.cc-q{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
  color:#fff!important;font-weight:700;font-size:14px;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .3s,background .2s}
.cc-card.on .cc-q{opacity:1;pointer-events:auto}
.cc-q:hover{background:rgba(255,255,255,.15)}
body.theme-light .cc-q{color:var(--ink)!important;border-color:var(--line)}
@media (max-width:600px){.cc-track{height:230px}.cc-card{top:175px}}
/* owner 21.10: only three models — bigger, easier to read cards */
.cc-track{max-width:860px;height:300px}
.cc-card{top:215px;width:330px;height:200px;padding:18px 20px;border-radius:20px}
.cc-tag{font-size:13px;padding:3px 11px}
.cc-body b,.cc-card.on .cc-body b{font-size:21px}
.cc-body span{font-size:14.5px;-webkit-line-clamp:4}
.cc-q{width:30px;height:30px;font-size:16px;top:14px;right:14px}
@media (max-width:700px){.cc-track{height:270px}.cc-card{top:195px;width:250px;height:185px;padding:14px 16px}.cc-body b,.cc-card.on .cc-body b{font-size:17px}.cc-body span{font-size:13px}}
.cc-track{height:250px}
@media (max-width:700px){.cc-track{height:235px}}
/* «Студия» step 2: the projects as folders (owner 21.10) */
.gen .step-h{flex-wrap:wrap}
.gen .step-h .btn.small{margin-left:auto;padding:7px 14px;font-size:14px;font-weight:600}
.folders.pick{margin-top:-10px}
.folders.pick .gf{border:0;background:none;padding:0;font:inherit;cursor:pointer}
.folders.pick .gf{--k:.62;text-align:left;color:#f5f5f7}
@media (max-width:760px){.folders.pick .gf{--k:.5}}
/* step 3: previews with a × (owner 21.10); after 20 — a black «+N» square */
.gen .thumbs .th{position:relative;display:block;width:64px;height:64px}
.gen .thumbs .th img{display:block}
.gen .thumbs .th-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;border:0;border-radius:999px;background:rgba(0,0,0,.8);color:#fff;
  font-size:14px;line-height:20px;text-align:center;cursor:pointer;opacity:.85;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.gen .thumbs .th-x:hover{opacity:1;background:#dc2626}
.gen .thumbs .more,body.dark .gen .thumbs .more{background:#000;color:#fff;font-size:15px}
/* the drop zone (21st.dev «Image Cropper» look, owner 21.10) */
.gen .drop.dz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:210px;padding:28px 18px;border:2px dashed rgba(127,127,127,.35);
  border-radius:14px;cursor:pointer;text-align:center;transition:border-color .2s,background .2s}
.gen .drop.dz:hover,.gen .drop.dz:focus-visible{border-color:rgba(129,140,248,.6);outline:none}
.gen .drop.dz.over{border-color:var(--acc);background:rgba(129,140,248,.08)}
.dz-ico{width:48px;height:48px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px;transition:transform .2s}
.drop.dz.over .dz-ico,.drop.dz:hover .dz-ico{transform:translateY(-3px);stroke:var(--acc)}
.dz-t{margin:0;font-size:15px;color:var(--ink)}
.dz-f{margin:0;font-size:13px;color:var(--muted)}
.dz-f .link{color:var(--acc);text-decoration:underline;cursor:pointer}
.dz-keep{margin:6px 0 0;font-size:12px;color:var(--muted)}
/* «До / После» in the viewer (21st.dev «Before / After card», owner 21.10) */
.v-zoom.ba-on{cursor:ew-resize;touch-action:none;user-select:none}
.v-zoom .ba{position:absolute;inset:0;z-index:3;border-radius:14px;overflow:hidden;pointer-events:none}
.v-zoom.ba-on>img:not(.ba-before){position:relative;z-index:4}
.ba-before{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;z-index:0;border-radius:0!important;box-shadow:none!important;animation:none!important}
.ba-line{position:absolute;top:0;bottom:0;left:var(--ba,50%);width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);z-index:6}
.ba-knob{position:absolute;top:50%;left:var(--ba,50%);transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:999px;z-index:7;
  background:rgba(255,255,255,.92);color:#111;box-shadow:0 4px 16px rgba(0,0,0,.4);font-size:11px;font-weight:700}
.ba-knob b::after{content:'%'}
.ba-l{position:absolute;bottom:14px;z-index:7;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ba-after-l{left:14px}.ba-before-l{right:14px}
.v-btn.on{background:var(--acc);color:#fff}
.viewer.pure .v-zoom .ba{border-radius:0}
.gen .dz-f .dz-dir{display:inline;margin:0}
/* the layers of «До / После»: the source (1) · the new photo, clipped (4) · the line, the knob and the words (6) */
.v-zoom .ba{z-index:6}
.v-zoom>img.ba-before{position:absolute;inset:0;z-index:1;border-radius:14px!important}
.v-zoom>.ba-before[hidden]{display:none}
.viewer.pure .v-zoom>.ba-before{border-radius:0!important}
/* top-up through SBP */
.sbp-box{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:12px 0;padding:16px;border:1px solid var(--line);border-radius:14px}
.sbp-qr{width:200px;height:200px;background:#fff;border-radius:10px;padding:8px}
.sbp-sum{font-size:18px;font-weight:700;margin:0 0 10px}
.sbp-state{margin:10px 0 0;color:var(--muted)}
/* «Отметить все» looks like a button (owner 21.10) */
.selbar .selall{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(14,14,22,.7);
  backdrop-filter:blur(8px);cursor:pointer;font-weight:600}
.selbar .selall:hover{border-color:var(--acc)}
body.theme-light .selbar .selall{background:rgba(255,255,255,.85)}
.selbar .hint{padding:4px 10px;border-radius:999px;background:rgba(14,14,22,.6)}
body.theme-light .selbar .hint{background:rgba(255,255,255,.8)}
/* step 3: the preview grid (21st.dev «UploadThing Image Grid») with the tilt (21st.dev «Tilt Card»), owner 21.10 */
.gen .thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;margin:12px 0}
.gen .thumbs .th{position:relative;display:block;width:auto;height:auto;aspect-ratio:1;perspective:1000px}
.gen .thumbs .th-in{position:absolute;inset:0;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:rgba(127,127,127,.12);
  transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)) scale(1);transition:transform .2s ease-out,box-shadow .2s ease-out;box-shadow:0 10px 30px -10px rgba(0,0,0,.2)}
.gen .thumbs .th.tilting .th-in{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)) scale(1.05);box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.gen .thumbs .th-in img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.th-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 80%)}
.th.tilting .th-glare{opacity:1}
.gen .thumbs .th-x{position:absolute;top:6px;right:6px;z-index:2;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:999px;
  background:rgba(0,0,0,.5);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;box-shadow:none}
.gen .thumbs .th:hover .th-x,.gen .thumbs .th-x:focus-visible{opacity:1}
.gen .thumbs .th-x:hover{background:rgba(0,0,0,.75)}
.gen .thumbs .th-x svg,.th-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.gen .thumbs .more,body.dark .gen .thumbs .more{width:auto;height:auto;aspect-ratio:1;border-radius:10px;background:#000;color:#fff;font-size:20px;font-weight:700;border:1px solid var(--line)}
.th-add{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed var(--line);border-radius:10px;
  background:none;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;transition:border-color .2s,background .2s}
.th-add:hover{border-color:rgba(129,140,248,.6);background:rgba(129,140,248,.06)}
.th-add svg{width:30px;height:30px}
@media (hover:none){.gen .thumbs .th-x{opacity:1}}
/* step 4: the style as a 3D card (21st.dev «3D Card»), several can be picked */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.pickstyle.sc,body.dark .pickstyle.sc{padding:0;border:0;background:none;perspective:1000px;box-shadow:none;cursor:default}
.pickstyle.sc.on,.picktype.sc.on{box-shadow:none}
.sc-card{position:relative;aspect-ratio:3/4;border-radius:18px;border:1px solid rgba(127,127,127,.25);box-shadow:0 25px 50px -12px rgba(0,0,0,.45);
  transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .2s}
.sc-card.tilting{transition:transform .12s ease-out}
.pickstyle.sc.on .sc-card,.picktype.sc.on .sc-card{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 25px 50px -12px rgba(0,0,0,.5)}
.sc-in{position:absolute;inset:10px;border-radius:12px;overflow:hidden;transform:translateZ(40px);box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.pickstyle.sc img.sc-art,.sc-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;display:block}
.sc-noimg{display:grid;place-items:center;font-size:52px;background:linear-gradient(160deg,#27272a,#3f3f46)}
.sc-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 40%,rgba(0,0,0,.7))}
.sc-head{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;color:#fff}
.sc-head b{display:block;font-size:17px;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.sc-head span{display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.8)}
.sc-go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff!important;transition:transform .2s,background .2s}
.sc-go:hover{transform:scale(1.1) rotate(2.5deg);background:rgba(255,255,255,.3)}
.sc-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-tags{position:absolute;left:12px;bottom:62px;margin:0}
.sc-pick{position:absolute;left:12px;right:12px;bottom:12px;padding:11px;border:0;border-radius:10px;font:inherit;font-weight:600;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:transform .15s,background .2s}
.sc-pick:hover{transform:scale(1.04);background:rgba(255,255,255,.22)}
.sc-pick:active{transform:scale(.96)}
.pickstyle.sc.on .sc-pick,.picktype.sc.on .sc-pick{background:var(--acc);box-shadow:none}
@media (prefers-reduced-motion:reduce){.sc-card,.th-in{transition:none}}
/* the secret /logo page (owner 21.10) */
.biglogo{min-height:calc(100vh - 180px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 0}
.big-lq{width:min(86vw,1100px)}
.big-logo{display:block;width:100%;height:auto}
.big-hint{margin:0;text-align:center}
.big-tune{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center;padding:12px 18px;border:1px solid var(--line);border-radius:14px;
  background:rgba(14,14,22,.6);backdrop-filter:blur(8px)}
body.theme-light .big-tune{background:rgba(255,255,255,.8)}
.big-tune label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
.big-tune input[type=range]{width:140px}
/* admin: a user's login and password (owner 21.10) */
.cred{margin-top:6px}
.cred summary{cursor:pointer;color:var(--acc);font-size:13px}
.cred form{margin:6px 0 0}
.cred .pws{max-width:260px}
/* step 2: the new project's name + «Сохранить» (owner 21.10) */
.newproj{gap:10px;margin-top:10px}
.newproj input{flex:1;min-width:220px}
.newproj[hidden]{display:none}
/* «До / После» under the photo (owner 21.10) */
.v-main figcaption [data-vba].on{background:var(--acc);border-color:var(--acc);color:#fff}
.v-main figcaption [data-vba]:disabled{opacity:.45;cursor:default}
/* each model has its own hue (owner 22.10): Grubaka Studio — violet, Nano Banana — banana amber, Nano Banana API — teal */
.cc-card[data-v="gs"]{--mh:139,92,246}
.cc-card[data-v="nb"]{--mh:245,180,40}
.cc-card[data-v="nbk"]{--mh:20,184,166}
.cc-card[data-v="gsv"]{--mh:236,72,153}.cc-card[data-v="gsp"]{--mh:217,70,239}.cc-card[data-v="gsb"]{--mh:59,130,246}  /* the admins' test models (owner 22.10) */
.cc-card[data-v]{background:linear-gradient(160deg,rgba(var(--mh),.48),rgba(24,24,27,.94) 70%);border-color:rgba(var(--mh),.5)}
.cc-card[data-v] .cc-tag{background:rgba(var(--mh),.28);color:#fff}
.cc-card[data-v].on{border-color:rgb(var(--mh));box-shadow:0 0 0 3px rgba(var(--mh),.35),0 20px 60px -12px rgba(var(--mh),.45)}
.cc-card[data-v] .cc-q{border-color:rgba(var(--mh),.7)}
body.theme-light .cc-card[data-v]{background:linear-gradient(160deg,rgba(var(--mh),.22),#fff 62%);border-color:rgba(var(--mh),.45)}
body.theme-light .cc-card[data-v] .cc-tag{background:rgba(var(--mh),.22);color:var(--ink)}
/* «Студия» step 2 (owner 22.10): folders 30 % smaller; the picked one glows, pulses and has a tick */
.folders.pick .gf{--k:.43}
@media (max-width:760px){.folders.pick .gf{--k:.36}}
.folders.pick .gf.on .gf-stage{filter:drop-shadow(0 0 10px rgba(129,140,248,.95)) drop-shadow(0 0 26px rgba(129,140,248,.6));animation:gf-pick 1.6s ease-in-out infinite}
@keyframes gf-pick{50%{filter:drop-shadow(0 0 16px rgba(167,139,250,1)) drop-shadow(0 0 36px rgba(129,140,248,.75))}}
.folders.pick .gf.on .gf-front-rim path{stroke:#a5b4fc}
.folders.pick .gf.on::after{content:'✓';position:absolute;top:calc(40px * var(--k) * 2.2);right:6px;z-index:20;display:grid;place-items:center;width:24px;height:24px;
  border-radius:999px;background:var(--acc);color:#fff;font-weight:800;font-size:14px;box-shadow:0 0 0 3px rgba(129,140,248,.35)}
.folders.pick .gf:not(.on){opacity:.75}
.folders.pick .gf:not(.on):hover{opacity:1}
@media (prefers-reduced-motion:reduce){.folders.pick .gf.on .gf-stage{animation:none}}
/* dragging a folder (owner 22.10) */
.folders.sorting{cursor:grabbing}
.gf.moving{opacity:.6;transform:scale(.97)}
/* the folder menu in the Gallery */
.fctx{position:fixed;z-index:120}
.fctx{display:flex;flex-direction:column;min-width:210px;padding:6px;border-radius:12px;background:#16161c;border:1px solid var(--line);box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}
.fctx[hidden]{display:none}
.fctx button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.fctx button:hover{background:rgba(127,127,127,.16)}
body.theme-light .fctx{background:#fff}
.folders{scrollbar-color:rgba(255,255,255,.22) transparent}
body.theme-light .folders{scrollbar-color:rgba(0,0,0,.25) transparent}
/* the project's PC folder line (owner 22.10) */
.pcline{margin:8px 0 0;font-size:14px;color:var(--muted)}
.pcline .btn.small{padding:5px 12px;font-size:13px}
.pcsync .btn.small{padding:5px 12px;font-size:13px;margin-left:6px}
/* colour marks instead of the stars (owner 22.10): red = surely a reject, yellow = doubtful, green = surely a success */
.mk-red{--mk:#ef4444}.mk-yellow{--mk:#facc15}.mk-green{--mk:#22c55e}
.mk-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mk);box-shadow:0 0 0 2px rgba(255,255,255,.18);margin-right:6px;vertical-align:-1px}
.bt .mark{position:absolute;top:8px;right:8px;z-index:2;display:flex;flex-direction:column;gap:5px;padding:5px;border-radius:99px}
.bt .mark button{all:unset;display:none;cursor:pointer;width:16px;height:16px;border-radius:50%;background:var(--mk);opacity:.45;
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.5);transition:transform .15s,opacity .15s}
.bt .mark button.on{display:block;opacity:1;box-shadow:0 0 0 2px #fff,0 0 12px var(--mk)}
.bt:hover .mark{background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.bt:hover .mark button{display:block}
.bt .mark button:hover{transform:scale(1.25);opacity:1}
@media (hover:none){.bt .mark button{width:20px;height:20px}}
.ctx-marks{display:flex;gap:10px;padding:10px 10px 6px;margin-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.ctx-marks button{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;background:var(--mk);opacity:.5;transition:transform .15s,opacity .15s}
.ctx-marks button.on{opacity:1;box-shadow:0 0 0 2px #fff,0 0 12px var(--mk)}
.ctx-marks button:hover{transform:scale(1.2);opacity:1}
.ctx-marks .clear{background:none;width:auto;height:auto;font-size:14px;margin-left:auto;align-self:center;color:rgba(255,255,255,.5)}
.v-marks{display:inline-flex;gap:8px;align-items:center}
.v-marks button{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;background:var(--mk);opacity:.4;transition:transform .15s,opacity .15s}
.v-marks button.on{opacity:1;box-shadow:0 0 0 2px #fff,0 0 14px var(--mk)}
.v-marks button:hover{transform:scale(1.2);opacity:1}
.mk-dl.off{opacity:.45;cursor:default}
.mk-dl .mk-dot{margin-right:4px}
/* owner 22.10: «Отметить все» and the buttons above the photos, staying in sight while scrolling; the next photos load as you scroll */
.selbar{position:sticky;top:var(--hh,0px);bottom:auto;margin:6px 0 0;flex-wrap:wrap}
.selbar [data-shown]{font-size:13px}
.more-row{display:flex;justify-content:center;margin:18px 0 40px}
/* over the photos every piece of the bar has its own frosted pill — still no band (owner 21.10) */
.selbar>*{backdrop-filter:blur(10px)}
.selbar [data-selcount],.selbar [data-shown]{padding:6px 12px;border-radius:999px;background:rgba(14,14,22,.75);color:#cbd5e1}
.selbar .btn.ghost{background:rgba(14,14,22,.8)}
.selbar .btn[disabled]{opacity:.6}
body.theme-light .selbar [data-selcount],body.theme-light .selbar [data-shown]{background:rgba(255,255,255,.88);color:#334155}
body.theme-light .selbar .btn.ghost{background:rgba(255,255,255,.9)}
/* admin: delete a style (owner 22.10) */
.style-card{position:relative}
.style-card .sdel{all:unset;position:absolute;top:8px;left:8px;z-index:3;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;
  background:rgba(14,14,22,.75);backdrop-filter:blur(6px);font-size:16px;opacity:0;transition:opacity .15s,background .15s}
.style-card:hover .sdel{opacity:1}.style-card .sdel:hover{background:#dc2626}
@media (hover:none){.style-card .sdel{opacity:1}}
.gone-styles{margin:28px 0}.gone-styles .chip{display:inline-flex;gap:8px;align-items:center;margin:4px}
/* «Выбрать все: Зелёные / Жёлтые / Красные» and «Переделать выбранное» (owner 22.10) */
.selmk{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 8px;border-radius:999px;background:rgba(14,14,22,.75)}
body.theme-light .selmk{background:rgba(255,255,255,.88)}
.selmk .btn.small{padding:5px 10px;font-size:13px}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
dialog.remake{max-width:560px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:18px;padding:22px;background:#12121c;color:#e5e7eb}
dialog.remake::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
dialog.remake h3{margin:0 0 8px}
dialog.remake .opt{display:flex;gap:10px;align-items:flex-start;margin:8px 0;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer}
dialog.remake .opt:has(input:checked){border-color:var(--acc);background:rgba(129,140,248,.1)}
dialog.remake .rm-quote{font-weight:600;margin:14px 0 8px}
body.theme-light dialog.remake{background:#fff;color:#111827}
body.theme-light dialog.remake .opt{border-color:#e5e7eb}
dialog.remake label[hidden]{display:none}
/* style folders you can see well; the admin drags styles between them and switches styles off (owner 22.10) */
.sfold{margin:14px 0;border:1px solid var(--line);border-radius:16px;padding:4px 14px 10px;background:rgba(255,255,255,.02)}
.sfold>summary{display:flex;align-items:center;gap:8px;font-size:18px;padding:10px 2px;list-style:none}
.sfold>summary::-webkit-details-marker{display:none}
.sfold>summary::after{content:'▾';margin-left:auto;opacity:.5;transition:transform .2s}
.sfold:not([open])>summary::after{transform:rotate(-90deg)}
.sfold-ico{font-size:20px}.sfold-ren{font-size:16px;opacity:.6}.sfold-ren:hover{opacity:1}
.sfold [data-sgrid]{min-height:60px}
.style-card[draggable=true]{cursor:grab}.style-card.dragging{opacity:.35;outline:2px dashed var(--acc)}
.style-card.off{opacity:.45;filter:grayscale(.8)}.style-card.off:hover{opacity:.8}
.soff-badge{position:absolute;top:10px;right:10px;z-index:3;padding:3px 8px;border-radius:999px;background:#f59e0b;color:#111;font-size:12px;font-weight:700}
.style-card .soff{all:unset;position:absolute;top:8px;left:46px;z-index:3;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;
  background:rgba(14,14,22,.75);backdrop-filter:blur(6px);font-size:15px;color:#fff;opacity:0;transition:opacity .15s,background .15s}
.style-card:hover .soff{opacity:1}.style-card .soff:hover{background:#d97706}
@media (hover:none){.style-card .soff{opacity:1}}
.sadmin{gap:10px;align-items:center;flex-wrap:wrap}
/* «Стиль / После» looks like «До / После» (owner 22.10) */
.v-main figcaption [data-vsa].on{background:var(--acc);border-color:var(--acc);color:#fff}
.v-main figcaption [data-vsa]:disabled{opacity:.45;cursor:default}
/* sections of the style catalogue: ПОРТРЕТЫ / ОБЩИЙ ПЛАН / СЕМЬЯ (ОП) (owner 22.10) */
.ssec{margin:26px 0 8px}
.ssec-h{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:24px;letter-spacing:.06em;padding-bottom:8px;border-bottom:2px solid var(--acc)}
.ssec .sfold{margin-left:10px}
.sc-group{grid-column:1/-1;margin:14px 0 -4px;font-size:18px;font-weight:700;letter-spacing:.03em;padding-bottom:6px;border-bottom:1px solid var(--line)}
/* the questionnaire and the JSON inside a style — admins (owner 22.10) */
.red{margin:34px 0;padding-top:18px;border-top:2px solid var(--acc)}
.red-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:980px){.red-cols{grid-template-columns:1fr}}
.red-cats{margin:6px 0 12px}.red-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.red-chips .chip{cursor:pointer;font-size:13px}
.rsec{border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:2px 14px}
.rsec>summary{display:flex;gap:10px;align-items:baseline;padding:10px 0;cursor:pointer}
.rsec-n{font-family:ui-monospace,monospace;color:var(--acc);font-weight:700}
.rsec-body{padding:4px 0 12px}
.rf{display:flex;flex-direction:column;gap:4px;margin:8px 0;font-size:13px;font-weight:600}
.rf input,.rf textarea,.rf select{font:inherit;font-weight:400;font-size:14px;width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:inherit;resize:vertical}
.rf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:640px){.rf-row{grid-template-columns:1fr}}
.rf-help{font-weight:400;font-size:12px}
.rcard{border:1px dashed var(--line);border-radius:12px;padding:8px 12px;margin:8px 0}.rcard-top{display:flex;justify-content:space-between;align-items:center}
.rrep-head{display:flex;justify-content:space-between;align-items:center;margin:10px 0 4px}
.rmod{margin:10px 0}.rmod h4{margin:6px 0 0}
.red-out{position:sticky;top:calc(var(--hh,0px) + 12px)}
.red-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.red-tabs .chip{cursor:pointer}
.red-json{max-height:62vh;overflow:auto;margin:0;padding:14px;border-radius:14px;background:#0b0b12;color:#c7d2fe;font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word;border:1px solid var(--line)}
body.theme-light .red-json{background:#f8fafc;color:#1e293b}
.red-save input{width:100%;margin:10px 0 0;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:inherit;font:inherit}
.red-vers{margin-top:10px}.red-vers p{margin:4px 0;font-size:13px}
/* «＋ Новый стиль»: the reference photo and the folder (owner 22.10) */
.red-new{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start;margin:10px 0 6px}
@media (max-width:640px){.red-new{grid-template-columns:1fr}}
.red-pic{display:grid;place-items:center;aspect-ratio:3/4;border:2px dashed var(--line);border-radius:16px;cursor:pointer;text-align:center;overflow:hidden;padding:10px}
.red-pic:hover{border-color:var(--acc)}.red-pic img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.red-where select{max-width:420px}
/* while the browser asks its own question (owner 22.10): the site dark, a bright card pointing up at the browser's window */
.nask{position:fixed;inset:0;z-index:2000;background:rgba(3,3,8,.78);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:flex-start;padding:290px 16px 16px;animation:naskIn .2s ease-out}
.nask-card{max-width:520px;text-align:center;padding:22px 26px 18px;border-radius:20px;background:linear-gradient(135deg,#facc15,#f59e0b);color:#111;
  box-shadow:0 0 0 4px rgba(250,204,21,.35),0 20px 60px rgba(0,0,0,.6);animation:naskPulse 1.6s ease-in-out infinite}
.nask-card b{display:block;font-size:22px;margin:4px 0 6px}.nask-card p{margin:0 0 12px;font-size:15px;line-height:1.45}
.nask-card .btn{color:#111;border-color:rgba(0,0,0,.35);background:rgba(255,255,255,.35)}
.nask-arrow{font-size:40px;line-height:1;animation:naskUp 1s ease-in-out infinite}
@keyframes naskIn{from{opacity:0}}
@keyframes naskUp{50%{transform:translateY(-10px)}}
@keyframes naskPulse{50%{box-shadow:0 0 0 12px rgba(250,204,21,.12),0 20px 60px rgba(0,0,0,.6)}}
@media (prefers-reduced-motion:reduce){.nask-card,.nask-arrow{animation:none}}
/* owner 22.10: the big field only while nothing is picked; then the «＋ Добавить» tile is the drop field; empty cells fill as photos are read */
.gen .dz[hidden]{display:none}
.gen .thumbs .th.loading .th-in{background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.04) 70%);background-size:220% 100%;animation:thShim 1.1s linear infinite}
.gen .thumbs .th.loading img{opacity:0}
.gen .thumbs .th img{transition:opacity .35s}
@keyframes thShim{to{background-position:-120% 0}}
.gen .thumbs .th-add .th-dir{font-size:12px;margin-top:2px}
.gen .thumbs .th-add.over{border-color:var(--acc);background:rgba(129,140,248,.14);transform:scale(1.04)}
.gen .thumbs .th-wait{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border-radius:14px;border:1px dashed var(--acc);color:var(--acc);font-size:13px;animation:thPulse 1.2s ease-in-out infinite}
@keyframes thPulse{50%{opacity:.55}}
.gen .dz-keep{margin:4px 0 0;font-size:13px}
/* the whole style card picks it (owner 22.10) */
.gen .pickstyle.sc .sc-card{cursor:pointer}
/* the viewer's deep zoom past the screen size (owner 22.10): drag to look around */
.v-zoom.deep{cursor:grab}.v-zoom.deep.panning{cursor:grabbing}
.v-zoom.panning img{transition:none}
/* the folder picker of the Gallery (owner 22.10) */
.fpick-bar .chip-x{margin-left:4px;text-decoration:none;opacity:.7}.fpick-bar .chip-x:hover{opacity:1}
dialog.fpick{max-width:640px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:18px;padding:20px;background:#12121c;color:#e5e7eb}
dialog.fpick::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
dialog.fpick h3{margin:0 0 10px}
dialog.fpick input[type=search]{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:inherit;font:inherit}
.fpick-list{max-height:52vh;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 12px;margin:8px 0;padding:4px}
.fpick-list label{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:8px;font-size:14px;cursor:pointer}
.fpick-list label:hover{background:rgba(255,255,255,.05)}.fpick-list label[hidden]{display:none}
body.theme-light dialog.fpick{background:#fff;color:#111827}
/* «Модели» in the admin (owner 22.10) */
.amod-row{display:grid;grid-template-columns:auto auto 1fr 220px;gap:12px;align-items:start;padding:12px;margin:8px 0;border:1px solid var(--line);border-radius:14px}
.amod-row.dragging{opacity:.4;outline:2px dashed var(--acc)}
.amod-grip{cursor:grab;font-size:20px;opacity:.6;padding-top:22px}
.amod-move{display:flex;flex-direction:column;padding-top:18px}
.amod-main label,.amod-show{display:flex;flex-direction:column;gap:4px;font-size:13px;margin-bottom:6px}
.amod-main input,.amod-main textarea,.amod-show select{font:inherit;font-size:14px;padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:inherit}
@media (max-width:760px){.amod-row{grid-template-columns:auto 1fr}.amod-move{display:none}.amod-show{grid-column:2}}
/* the plan in the avatar menu (owner 22.10) */
.um-plan{display:flex;flex-direction:column;gap:2px;margin:8px 10px 0;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);background:rgba(127,127,127,.08)}
.um-plan span{font-size:14px}.um-plan b{font-weight:800}.um-plan small{font-size:12px;color:var(--muted)}
.um-plan.paid{border-color:rgba(250,204,21,.55);background:linear-gradient(135deg,rgba(250,204,21,.16),rgba(245,158,11,.06))}
.um-plan.paid b{color:#facc15}
.um-plan:hover{border-color:var(--acc)}
/* a plan the balance does not cover (owner 22.10): the button says so and leads to the top-up */
a.pr-btn.short{display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px dashed rgba(250,204,21,.6);color:#facc15;background:rgba(250,204,21,.08);cursor:pointer}
a.pr-btn.short:hover{background:rgba(250,204,21,.16)}
body.theme-light a.pr-btn.short{color:#a16207;border-color:#eab308;background:#fef9c3}
/* paid plans «Скоро» (owner 22.10) */
.pr-card.soon{opacity:.85}.pr-card.soon .pr-price b{opacity:.6}
.pr-pop.soon{background:#64748b}
.pr-btn.want{margin-top:8px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:0}
.pr-btn.want.done{background:rgba(34,197,94,.18);color:#86efac;cursor:default}
/* «улучшение» is only in the Grubaka Studio models (owner 22.10) */
.gen .pickstyle.na{opacity:.4;filter:grayscale(.7)}.gen .pickstyle.na .sc-card{cursor:not-allowed}
/* styles with ages and poses (owner 22.10): the «Студия» panel and the admin's grid */
.kitpanel{margin:16px 0;padding:16px;border:1px solid var(--acc);border-radius:18px;background:rgba(129,140,248,.06)}
.kit h3{margin:0 0 10px}.kit+.kit{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.kit-ages{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}.kit-ages b{margin-right:6px}
.kit-ages .chip{cursor:pointer}.kit-ages .chip.soon{opacity:.45;cursor:not-allowed}.kit-ages .chip small{font-size:11px}
.kit-all{display:inline-flex;gap:6px;align-items:center;font-weight:600;cursor:pointer;margin-bottom:4px}.kit-all input{width:18px;height:18px;accent-color:var(--acc)}
.kit-plan{margin:10px 0}.kit-plan>b{display:block;margin-bottom:6px}
.kit-poses{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.kit-pose{position:relative;display:flex;flex-direction:column;border:2px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:rgba(0,0,0,.2)}
.kit-pose img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.kit-pose .kit-t{padding:6px 8px;font-size:13px;font-weight:600}
.kit-pose.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(129,140,248,.35)}
.kit-pose.na{opacity:.4;cursor:not-allowed}.kit-none{display:grid;place-items:center;aspect-ratio:2/3;font-size:12px;color:var(--muted)}
.kitadm{margin:30px 0;padding-top:16px;border-top:2px solid var(--acc)}
.kit-scroll{overflow-x:auto}.kit-grid{border-collapse:collapse}.kit-grid th,.kit-grid td{padding:4px;vertical-align:top;text-align:center}
.kit-agedel{margin-left:4px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}.kit-agedel:hover{color:#f87171}.kit-ageadd{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.kit-ageadd .chip{cursor:pointer}
.agepick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 6px}.agepick b{margin-right:6px}.agepick .chip{cursor:pointer}.gen.ins .pickstyle.agehide{display:none!important}
.snew{max-width:560px;display:grid;gap:14px}.snew .rf{display:grid;gap:6px}.snew input,.snew select{font:inherit;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:inherit}.snew ol{margin:0;padding-left:20px;line-height:1.6}
.kit-planrow td{text-align:left!important;padding-top:14px!important}
.kit-posecol{min-width:220px;text-align:left!important}.kit-posecol input,.kit-posecol textarea{width:100%;font:inherit;font-size:13px;padding:5px 8px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:inherit;margin-bottom:4px}
.kit-cell{display:grid;place-items:center;width:84px;height:126px;border:1px dashed var(--line);border-radius:10px;overflow:hidden;cursor:pointer;color:var(--muted);font-size:22px}
.kit-cell.have{border-style:solid}.kit-cell img{width:100%;height:100%;object-fit:cover}.kit-cell:hover{border-color:var(--acc)}.kit-cell.busy{opacity:.5}

/* owner 22.10: a photo still being made — a waiting cell in the Gallery's grid instead of a strip on top */
.pendt{grid-row:span 6;border-radius:18px;border:1px dashed rgba(129,140,248,.45);display:grid;place-items:center;text-align:center;color:var(--muted);
  font-size:13px;text-decoration:none;background:linear-gradient(110deg,rgba(255,255,255,.02) 35%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.02) 65%) 0 0/300% 100%;
  animation:pendsh 1.8s linear infinite}
.pendt span{line-height:1.6}
@keyframes pendsh{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){.pendt{animation:none}}
.pcsync{font-size:13px;margin:4px 0}
.gen.ins .pickstyle:has(input[name=style]):not(.kitst){display:none}
.tag-new{display:inline-block;padding:1px 7px;border-radius:999px;background:rgba(129,140,248,.18);color:#c7d2fe;font-size:11px;font-weight:600;vertical-align:1px}
.howshoot{margin:8px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}.howshoot ul{margin:6px 0 0;padding-left:20px}
.amod-price,.amod-key label{display:grid;gap:4px;margin-top:6px}.amod-price input{max-width:140px}
.amod-key{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;display:grid;gap:6px}
.qpick{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:12px 0 4px}.qpick .opt-q{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
/* owner 22.10 evening: every age's sample in a row in the photographer's pose panel */
.kit-pose.other{opacity:.55}.kit-pose.other:hover{opacity:1}.kit-posename{display:block;margin:6px 0 4px;font-size:13px;color:var(--muted)}
/* owner 22.10 evening: «Анимировать» — a video card in the gallery and its player in the viewer */
.vid-badge{position:absolute;right:10px;bottom:10px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;font-size:15px;pointer-events:none}
.v-zoom{position:relative}.v-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:inherit}
.typegroup{margin:14px 0 8px}.typegroup:first-of-type{margin-top:4px}
.tag-new.tag-top{background:linear-gradient(90deg,#f59e0b,#f97316);color:#1a1205;letter-spacing:.04em}
.kit-sexrow td{text-align:left!important;padding-top:18px!important;font-size:16px}
.sfold.sfold-empty:not([open]){padding-top:6px;padding-bottom:6px;opacity:.6}.sfold.sfold-empty:not([open]) summary{font-size:14px}
.sfold-del{margin-left:4px;opacity:.55}.sfold-del:hover{opacity:1}
.kit-who{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.kit-who .chip{cursor:pointer}
[data-sfold-drag]{cursor:grab}.sfold.dragging{opacity:.5;outline:2px dashed var(--acc)}
/* owner 22.10 night: «Компактнее» — the admin's grid of a style: small cells, short rows */
.kit-compact th,.kit-compact td{padding:2px!important}.kit-compact .kit-cell{width:46px;height:62px}.kit-compact .kit-cell img{width:46px;height:62px;object-fit:cover}
.kit-compact th{font-size:12px;white-space:nowrap}.kit-compact th .check{gap:2px}.kit-compact .kit-agedel{display:block;margin:0 auto}
.kit-compact .kit-posecol{min-width:110px!important;white-space:nowrap;font-size:13px}.kit-compact .kit-planrow td{padding-top:10px!important}
.kit-addwho{margin-left:8px;font:inherit;font-size:13px;padding:3px 8px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:inherit}
.kit-peek{position:fixed;z-index:100;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);pointer-events:none;border:2px solid var(--acc);background:#000}
/* owner 22.10 night (21st.dev «Card», lavikatiyar): the «Тип обработки» cards show the picture and the name only — the line under it and
   «Выбрать» slide in on hover, so nothing covers the picture; a picked card keeps a small ✓ in the corner */
.picktype .sc-card{transition:transform .3s ease,box-shadow .3s ease}
.picktype:hover .sc-card{transform:translateY(-6px)}
.picktype .sc-art{transition:transform .5s ease}
.picktype:hover .sc-art{transform:scale(1.08)}
.picktype .sc-head{transition:transform .45s ease}
.picktype .sc-head span{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease}
.picktype:hover .sc-head span{max-height:80px;opacity:1}

.picktype .sc-pick{opacity:0;transform:translateY(70px);transition:transform .45s ease,opacity .35s ease;pointer-events:none}
.picktype:hover .sc-pick{opacity:1;transform:none;pointer-events:auto}
.picktype.on .sc-in::after{content:'✓';position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.4)}
@media (hover:none){.picktype .sc-head span{max-height:none;opacity:1}.picktype .sc-pick{opacity:1;transform:none;pointer-events:auto}}
/* the model cards (the carousel): the description shows on hover only — the name and the price stay */
.cc-card .cc-body span{max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease}
.cc-card:hover .cc-body span{max-height:80px;opacity:1}
@media (hover:none){.cc-card .cc-body span{max-height:none;opacity:1}}
.kid-intro{margin:6px 0 8px}
.who-n{display:inline-flex;align-items:center;gap:4px;margin-right:10px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-size:14px}
.who-n b{min-width:16px;text-align:center}.who-step{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:inherit;cursor:pointer;line-height:1}
.who-step:hover{border-color:var(--acc)}
.people{display:inline-flex;flex-wrap:wrap;gap:8px}
.person{position:relative;display:inline-flex;flex-direction:column;align-items:center;width:46px;padding:4px 0;border:1px dashed var(--line);border-radius:12px;cursor:grab;outline:none}.person:not(.set) .fig,.person:not(.set) .age{filter:grayscale(1);opacity:.5}
.person.set{filter:none;opacity:1;border-style:solid;border-color:var(--acc)}.person:hover .fig,.person:focus-within .fig{opacity:1}
.person .fig{font-size:26px;line-height:1}.person .age{font-size:13px;font-weight:600}
.person .ages{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);z-index:20;margin-bottom:8px;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:visible;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.person .ages.kid{grid-template-columns:repeat(6,40px)}.person .ages.adult{grid-template-columns:repeat(5,40px)}
.person .ages::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:10px}
.person:hover .ages,.person:focus-within .ages{display:grid}
.person .ages .chip{margin:0;padding:0;height:34px;border:0;border-radius:0;background:var(--bg);color:inherit;font-size:14px;font-weight:600;cursor:pointer}
.person .ages .chip:hover{background:linear-gradient(rgba(124,92,255,.28),rgba(124,92,255,.28)),var(--bg)}.person .ages .chip.on{background:var(--acc);color:#fff}
.person .ages .chip:first-child{border-top-left-radius:9px}.person .ages.kid .chip:first-child{border-bottom-left-radius:9px}
.person .ages.kid .chip:last-child{border-top-right-radius:9px;border-bottom-right-radius:9px}
.person .ages.adult .chip:nth-child(5){border-top-right-radius:9px}.person .ages.adult .chip:nth-child(6){border-bottom-left-radius:9px}
.person .ages.adult .chip:last-child{border-bottom-right-radius:9px}
/* owner 22.10 night: the type card's description was unreadable — bigger, white, on a darkened top that shows with it */
.picktype .sc-shade::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.82),rgba(0,0,0,.55) 38%,transparent 62%);opacity:0;transition:opacity .35s ease}
.picktype:hover .sc-shade::before{opacity:1}
.picktype .sc-head span{font-size:14.5px;line-height:1.35;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.picktype:hover .sc-head span{max-height:120px;margin-top:6px}
@media (hover:none){.picktype .sc-shade::before{opacity:1}}
.mysec .mynew .noimg{font-size:42px;color:var(--acc)}.mysec .mynew{border-style:dashed}
.kit-grid td.kit-off{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.03) 6px 12px);opacity:.5}
.ai-recipe{margin:12px 0 18px;padding:14px 18px;border:1px solid var(--acc);border-radius:14px;background:rgba(124,92,255,.06)}
.ai-recipe h2{margin:0 0 6px;font-size:19px}.ai-recipe ol{margin:6px 0 10px;padding-left:22px}.ai-recipe li{margin:4px 0}
.ai-recipe textarea{width:100%;box-sizing:border-box;font:13px/1.4 ui-monospace,Consolas,monospace}
.ai-recipe .ai-prompt{max-height:320px;overflow:auto;white-space:pre-wrap;font-size:12px}
.an-say{width:100%;box-sizing:border-box}.an-sayn{margin:2px 0 0;font-size:13px}
.t-in.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* «По образцу» (owner 22.10 night): the one-sample styles live only there */
.gen.ins .pickstyle.anyst,.gen:not(.ins):not(.smp):not(.cmp) .pickstyle.anyst:not(.othermodes),.gen.cmp .pickstyle.anyst.mine{display:none}
.gen.smp .pickstyle:has(input[name=style]):not(.anyst):not(.kitst),.gen.smp .pickstyle.whohide{display:none}
/* owner 23.10 night: the style / sample cards like the «Тип обработки» ones — «Выбрать» slides in on hover, nothing covers the picture;
   a picked card keeps a ✓ in the top-left corner (↗ to the style's page is top-right) */
.pickstyle .sc-card{transition:transform .3s ease,box-shadow .3s ease}
.pickstyle:hover .sc-card{transform:translateY(-6px)}
.pickstyle .sc-art{transition:transform .5s ease}
.pickstyle:hover .sc-art{transform:scale(1.08)}
.pickstyle .sc-pick{opacity:0;transform:translateY(70px);transition:transform .45s ease,opacity .35s ease;pointer-events:none}
.pickstyle:hover .sc-pick{opacity:1;transform:none;pointer-events:auto}
.pickstyle.on .sc-in::after{content:'✓';position:absolute;top:10px;left:10px;z-index:3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.4)}
@media (hover:none){.pickstyle .sc-pick{opacity:1;transform:none;pointer-events:auto}}
.origline{margin:6px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.um-links a.appupd-new{color:var(--acc);background:rgba(124,92,255,.12)}

/* owner 23.10: tokens — the roubles of a token purchase next to the number; the FREE line under the plans */
.topup-rub{align-self:center;color:var(--muted);white-space:nowrap}
.pr-free{margin-top:10px}
/* owner 23.10: «кнопки слиплись» — the 2K / 4K buttons stand apart, each on its own line */
.upcard footer form.inline{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.upcard footer{flex-wrap:wrap;align-items:flex-start}
/* owner 23.10: «КАЧЕСТВО должно пропадать не для GS моделей» — display:flex beat the hidden attribute */
.qpick[hidden]{display:none}
/* owner 23.10: «шрифт текста можно больше сделать, плохо видно» — the folder name and its photo count bigger */
.gf-title{font-size:26px}
.gf-meta{font-size:16px;color:rgba(245,245,247,.75)}
.folders.small .gf-title{font-size:22px}.folders.small .gf-meta{font-size:14px}
/* owner 23.10: «расширь поле выбора стилей до 2,5 строк» — the style list of the «Студия» about two and a half rows of cards high */
.stylegrid.sc-grid{max-height:calc(min(100vw, 1720px) * .78 + 150px)}
/* owner 23.10: the language switcher in the header */
.langsw{position:relative}.langsw>summary{list-style:none;cursor:pointer;padding:6px 10px;border-radius:999px;font-size:14px;white-space:nowrap}
.langsw>summary::-webkit-details-marker{display:none}.langsw>summary:hover{background:rgba(255,255,255,.08)}
.langsw-box{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;min-width:150px;padding:6px;border-radius:14px;background:rgba(20,20,32,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.langsw-box a{padding:8px 12px;border-radius:9px;color:#f5f5f7;text-decoration:none;font-size:15px}.langsw-box a:hover{background:rgba(255,255,255,.08)}.langsw-box a.on{background:rgba(124,92,255,.25);font-weight:600}
.theme-light .langsw-box{background:#fff;border-color:rgba(0,0,0,.12)}.theme-light .langsw-box a{color:#1d1d1f}
/* owner 23.10: Arabic — the page is right to left (dir=rtl); the header dropdowns open toward the page, not off its edge */
[dir="rtl"] .umenu-box,[dir="rtl"] .langsw-box{right:auto;left:0}
[dir="rtl"] .v-close{right:auto;left:16px}
[dir="rtl"] body{text-align:right}
[dir="rtl"] input,[dir="rtl"] textarea{text-align:right}
[dir="rtl"] .gf-title,[dir="rtl"] .gf-meta{direction:rtl}
/* owner 23.10: inside the programs — a bright «how to buy tokens» block, the payment opens in the ordinary browser */
.buytok{margin:16px 0;padding:22px 26px;border-radius:20px;background:linear-gradient(135deg,rgba(124,92,255,.32),rgba(236,72,153,.26));border:1px solid rgba(167,139,250,.6);box-shadow:0 10px 40px rgba(124,92,255,.25)}
.buytok h2{margin:0 0 10px;font-size:26px}
.buytok ol{margin:0 0 16px;padding-inline-start:22px;font-size:18px;line-height:1.55}
.buytok-go{display:inline-block;font-size:20px;padding:14px 26px;border-radius:14px}
.buytok .muted{margin:12px 0 0}
.theme-light .buytok{background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(236,72,153,.12))}
[dir="rtl"] .cc{direction:ltr}[dir="rtl"] .cc .cc-body,[dir="rtl"] .cc .cc-tag{direction:rtl}
/* owner 23.10: «Фото скопировано» */
.copied{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:130;padding:12px 20px;border-radius:14px;background:rgba(20,20,32,.95);color:#f5f5f7;border:1px solid rgba(167,139,250,.6);font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
/* owner 23.10: «текст на папках очень мелкий» — the folder is drawn at 340 px and scaled (×0.43 in the «Студия», ×0.72 in the Gallery),
   so the sizes here are for the full drawing: the name up to two lines, the photo count in a round badge */
.gf-label{left:24px;right:24px;bottom:22px}
.gf-title,.folders.small .gf-title{font-size:44px;font-weight:700;line-height:1.08;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.gf-count{position:absolute;z-index:3;top:46px;right:20px;min-width:78px;height:78px;padding:0 14px;box-sizing:border-box;display:grid;place-items:center;border-radius:999px;font-size:38px;font-weight:800;line-height:1;color:#fff;background:rgba(124,92,255,.9);border:3px solid rgba(255,255,255,.75);box-shadow:0 6px 20px rgba(0,0,0,.45);pointer-events:none}
[dir="rtl"] .gf-count{right:auto;left:20px}
/* the count sits next to the name at the bottom of the front (the corner above is the «picked» tick) */
.gf-label{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px}
.gf-label .gf-title{flex:1;min-width:0}
.gf-count,[dir="rtl"] .gf-count{position:static;flex:none}
.gf-title,.folders.small .gf-title{font-size:40px}
.gf-count{min-width:72px;height:72px;font-size:34px}
/* owner 23.10: «Цены и качество» in the admin «Модели ИИ» */
.amod-costs{margin:22px 0 6px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:rgba(127,127,127,.06)}
.amod-costs h2{margin:0 0 10px}.amod-costs h3{margin:16px 0 8px}
.amod-q{border-collapse:collapse}.amod-q th,.amod-q td{padding:4px 8px;text-align:start}.amod-q input{width:120px}

/* owner 26.10 «Типы обработки»: a style the admin unticked for this type */
.gen.smp .pickstyle.modeoff,.gen.cmp .pickstyle.modeoff{display:none}
/* «Типы обработки» in the admin (owner 26.10) */
.amodes-bar{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-bottom:12px}.amodes-bar .btn{margin-left:auto}
.amodes-t{width:100%;border-collapse:collapse;margin:8px 0 18px}.amodes-t th,.amodes-t td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.amodes-t th:not(:first-child),.amodes-t td:not(:first-child){width:150px}
.amodes-t td img{width:44px;height:44px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:10px}
.tag-warn{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;font-size:11px;background:rgba(229,83,75,.18);color:#ff9a8f}
/* «ПРОЕКТЫ» (owner 26.10): the originals — no marks, upscale, animation or before/after, those are for the ready photos */
.origmode .bt .mark,.origmode [data-ctx-act=up],.origmode [data-ctx-act=unup],.origmode [data-ctx-upped],.origmode [data-ctx-marks],
.origmode [data-vmarks],.origmode [data-vba],.origmode [data-vsa],.origmode [data-vup],.origmode [data-vup4],.origmode [data-vupped],
.origmode [data-vanim],.origmode [data-vagain]{display:none!important}
[data-takesel]{width:auto;max-width:240px}
.gm a.g5{--gf:#F6D365;--gt:#FDA085}.gm a.g5 span{color:#2a1a05}
/* «Анимировать» (owner 26.10): «Что делает» chips; «Кто говорит» stays hidden without a line (.row display:flex overrode [hidden]) */
.an-acts .chip{cursor:pointer}.an-who[hidden]{display:none}
.an-act{width:100%;box-sizing:border-box;margin-top:6px}.an-act.err{border-color:#e5534b}.an-actn{margin:2px 0 0;font-size:13px}
/* owner 26.10: the orange «only English» warning under the own action */
.an-actn.an-warn{color:#f59e0b;font-weight:600}
/* «Удалить одинаковые» (owner 26.10) */
dialog.dupdlg{max-width:860px}.dupgroup{display:flex;flex-wrap:wrap;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.dupcell{position:relative;width:140px;display:flex;flex-direction:column;gap:4px;cursor:pointer}.dupcell img{width:140px;height:140px;object-fit:cover;border-radius:10px}
.dupcell input{position:absolute;top:6px;left:6px;width:20px;height:20px}.dupcell.keep img{outline:2px solid #57c46a}.dupcell small{font-size:11px;color:#a4b898;overflow-wrap:anywhere}
.dupmark{position:absolute;top:6px;left:6px;background:#57c46a;color:#0b1a0e;font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px}