/* Застосунок «Дизайнер» — повноекранний темний інтерфейс поверх site.css */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap');
html,body.app{height:100%;overflow:hidden;background:#0b0d12;color:#fff}
.dz{position:fixed;inset:0;display:flex;flex-direction:column;--chat-w:420px}
.dz__top{height:60px;display:flex;align-items:center;gap:14px;padding:0 16px;background:rgba(15,17,21,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);z-index:20}
.dz__logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;color:#fff}
.dz__proj{min-width:0;flex:0 1 260px}.dz__title{width:100%;background:transparent;border:1px solid transparent;border-radius:10px;color:#fff;font:inherit;font-weight:600;padding:7px 10px;outline:none;text-overflow:ellipsis}.dz__title:hover{border-color:rgba(255,255,255,.15)}.dz__title:focus{border-color:var(--copper);background:rgba(255,255,255,.05)}
.dz__versions{display:flex;gap:6px;overflow:auto;flex:1;min-width:0;scrollbar-width:none}.dz__versions::-webkit-scrollbar{display:none}
.dz__versions button{flex:none;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);font-weight:700;font-size:.82rem}.dz__versions button.on{background:var(--copper);border-color:var(--copper);color:#fff}
.dz__actions{display:flex;align-items:center;gap:6px;margin-left:auto;position:relative}
.tb{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.88);font-size:.86rem;font-weight:600;cursor:pointer;white-space:nowrap}.tb:hover{background:rgba(255,255,255,.1);color:#fff}.tb--icon{padding:8px 10px}.tb--primary{background:var(--copper);border-color:var(--copper);color:#fff}.tb--primary:hover{background:var(--copper-2)}
.dz__restyle{position:relative}.dz__menu{position:absolute;right:0;top:calc(100% + 8px);width:300px;background:#151821;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;box-shadow:0 30px 60px rgba(0,0,0,.5);z-index:30}.dz__menu[hidden]{display:none}.dz__menu button{text-align:left;padding:9px 10px;border-radius:9px;border:0;background:transparent;color:#fff;font-size:.86rem}.dz__menu button:hover{background:rgba(255,255,255,.08)}.dz__menu button.rec{color:#f3c6a4}
.dz__body{flex:1;min-height:0;position:relative}
.dz__stage{position:absolute;inset:0;background:#0f1115 radial-gradient(60% 50% at 30% 20%,rgba(194,112,63,.10),transparent 60%);min-width:0}
.dz__building{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;z-index:4;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;background-position:center}
.dz__building[hidden]{display:none}.dz__building b{font-size:1.3rem;letter-spacing:-.02em}.dz__building .lines{font-family:Consolas,ui-monospace,monospace;font-size:.8rem;color:rgba(255,255,255,.6);max-width:560px;text-align:center;white-space:pre-wrap;min-height:3em}.dz__building .ring{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--copper);animation:spin 1s linear infinite}.dz__building .pbar{width:260px;height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}.dz__building .pbar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--copper),#f3c6a4);animation:slide 1.6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#view3d{position:absolute;inset:0}#view3d canvas{display:block;touch-action:none}
.dz__bar{position:absolute;left:16px;right:calc(var(--chat-w) + 32px);bottom:16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;z-index:5;pointer-events:none}.dz__bar .glass{pointer-events:auto}
.dz__chatToggle{position:absolute;right:calc(var(--chat-w) + 32px);top:16px;display:inline-flex;z-index:12}.dz--nochat .dz__chatToggle{right:16px}
.dz__chat{position:absolute;top:16px;right:16px;bottom:16px;width:var(--chat-w);display:flex;flex-direction:column;min-height:0;background:rgba(17,19,25,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.5);z-index:10;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.dz__hello{display:none;position:relative;padding:28px 26px 10px}.dz__hello h1{font-size:2rem;letter-spacing:-.03em;margin:14px 0 8px}.dz__hello .lead{color:rgba(255,255,255,.7);font-size:1.02rem;margin-bottom:16px}
.dz__hello-glow{position:absolute;inset:-40px -40px auto -40px;height:260px;background:radial-gradient(50% 60% at 30% 30%,rgba(194,112,63,.28),transparent 70%);pointer-events:none}
.dz__msgs{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:90%;padding:11px 14px;border-radius:16px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;font-size:.95rem}
.msg.user{align-self:flex-end;background:var(--copper);color:#fff;border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:4px}
.msg.error{border-color:rgba(255,120,90,.4);background:rgba(255,90,60,.1)}
.msg .thumbs{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 2px}.msg .thumbs img{width:76px;height:76px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.3)}
.msg .meta{display:block;margin-top:8px;font-size:.76rem;color:rgba(255,255,255,.5)}
.msg .vbtn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:999px;background:#fff;color:#0f1115;font-size:.82rem;font-weight:700;border:0;cursor:pointer}
.msg.progress{align-self:flex-start;background:transparent;border:1px dashed rgba(255,255,255,.18);color:rgba(255,255,255,.75);font-size:.86rem;width:90%}
.msg.progress b{display:flex;align-items:center;gap:8px}.msg.progress .dots::after{content:"";animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.msg.progress .lines{margin-top:8px;font-family:Consolas,ui-monospace,monospace;font-size:.74rem;opacity:.7;max-height:7.5em;overflow:hidden;white-space:pre-wrap}
.msg.progress .pbar{height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-top:10px}.msg.progress .pbar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--copper),#f3c6a4);animation:slide 1.6s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.composer--app{margin:0 14px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:10px 10px 8px;transition:border-color .2s,box-shadow .2s}.composer--app:focus-within{border-color:rgba(194,112,63,.7);box-shadow:0 0 0 4px rgba(194,112,63,.16)}
.composer--app textarea{width:100%;background:transparent;border:0;color:#fff;font:inherit;font-size:.98rem;line-height:1.45;resize:none;padding:6px 8px 2px;min-height:54px;max-height:180px;outline:none}.composer--app textarea::placeholder{color:rgba(255,255,255,.4)}
.composer__row{display:flex;align-items:center;gap:8px;margin-top:4px}
.composer__attach{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;border:1px dashed rgba(255,255,255,.26);color:rgba(255,255,255,.8);font-size:.82rem;cursor:pointer}.composer__attach:hover{border-color:#fff;color:#fff}.composer__attach input{display:none}
.composer__hint{margin-left:auto;font-size:.61rem;color:rgba(255,255,255,.38)}.composer--app .btn{padding:9px 14px;font-size:.9rem}
.composer__previews{display:flex;gap:6px;flex-wrap:wrap;padding:4px 6px 0}.composer__previews:empty{display:none}.composer__previews .pv{position:relative}.composer__previews img{width:54px;height:54px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.25)}.composer__previews .x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:0;background:#fff;color:#000;font-size:11px;line-height:18px;padding:0}
.dz__savehint{padding:0 18px 12px;font-size:.78rem;color:rgba(255,255,255,.45)}.dz__savehint a{color:#f3c6a4;font-weight:600}
.chip{padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:rgba(255,255,255,.85);font-size:.85rem;font-weight:500;cursor:pointer}.chip:hover{border-color:rgba(255,255,255,.5);color:#fff}.chips{display:flex;flex-wrap:wrap;gap:8px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 12px 6px 9px;background:rgba(255,255,255,.04);margin:0}.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px rgba(194,112,63,.25)}
.dz__toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#fff;color:#0f1115;padding:10px 16px;border-radius:12px;font-weight:600;font-size:.9rem;box-shadow:0 20px 50px rgba(0,0,0,.4);z-index:50}

/* режим «лише чат» (до першої версії) */
.dz--chat .dz__stage{display:none}
.dz--chat .dz__body{display:grid;place-items:center;background:radial-gradient(60% 50% at 20% 10%,rgba(194,112,63,.18),transparent 60%),#0b0d12}
.dz--chat .dz__chat{position:relative;inset:auto;width:min(820px,100%);max-height:100%;border-radius:24px;margin:16px;background:rgba(17,19,25,.92)}
.dz--chat .dz__hello{display:block}.dz--chat .dz__msgs{flex:0 1 auto;max-height:40vh}
.dz--chat .dz__versions,.dz--chat #bRestyle,.dz--chat #bShare,.dz--chat #bFull{display:none}
/* чат схований */
.dz--nochat .dz__chat{transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none}.dz--nochat .dz__bar{right:16px}.dz--chat .dz__chatToggle{display:none}
@media (max-width:900px){
  .dz{--chat-w:0px}.dz__chat{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:42vh}.dz__chat.open{top:8px;max-height:none}.dz__bar{right:16px;bottom:calc(42vh + 20px)}.dz__chatToggle{right:16px;top:12px}
  .dz__chatToggle{display:inline-flex}.dz__proj{display:none}.dz__top{gap:8px;padding:0 10px}.tb span,.tb:not(.tb--primary):not(.tb--icon){font-size:.78rem;padding:7px 9px}
  .dz--chat .dz__chat{margin:8px;border-radius:18px;max-height:none;height:calc(100% - 16px)}
  /* згорнутий чат на мобілці: зʼїжджає вниз, бар опускається донизу, кнопка «Chat» повертає */
  .dz--nochat .dz__chat{transform:translateY(120%)}
  .dz--nochat .dz__bar{bottom:16px}
}

/* кроки прогресу (людські, без системних рядків) */
.steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;text-align:left}.steps li{position:relative;padding-left:22px;color:rgba(255,255,255,.45);font-size:.84rem}.steps li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3)}
.steps li.active{color:#fff}.steps li.active::before{border-color:var(--copper);box-shadow:0 0 0 3px rgba(194,112,63,.25);animation:pulse 1.2s infinite}.steps li.done{color:rgba(255,255,255,.7)}.steps li.done::before{background:#2f8f5b;border-color:#2f8f5b}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(194,112,63,.25)}50%{box-shadow:0 0 0 8px rgba(194,112,63,.05)}}
.msg.progress b{display:flex;align-items:center;gap:8px}.msg.progress .ptime{margin-left:auto;font-size:.76rem;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}.msg.progress .lines{font-family:inherit;max-height:none;opacity:1;white-space:normal}
.dz__building .lines{font-family:inherit}.dz__building .steps{text-align:left}

/* мобільний: бургер для дій і прихований блок інструментів */
.dz__more{display:none;margin-left:auto}.dz__toolsToggle{display:none;position:absolute;left:16px;top:16px;z-index:12}
@media (max-width:900px){
  .dz__more{display:inline-flex}.dz__actions{display:none;position:absolute;right:10px;top:58px;flex-direction:column;align-items:stretch;gap:6px;background:#151821;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.5);z-index:30;min-width:200px}
  .dz--menu .dz__actions{display:flex}.dz__actions>*{width:100%}.dz__actions .tb{width:100%;box-sizing:border-box;justify-content:flex-start}.dz__restyle{position:static}.dz__menu{right:auto;left:0;top:auto;position:relative;width:auto;margin-top:4px}
  .dz__toolsToggle{display:inline-flex}.dz__bar{display:none}.dz--tools .dz__bar{display:flex;flex-direction:column;align-items:flex-start;left:16px;right:auto;top:64px;bottom:auto}
  .dz--chat .dz__toolsToggle{display:none}
}

.composer__attach--icon{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;border-style:solid;border-color:rgba(255,255,255,.22)}.composer__attach--icon:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* Експорт: меню формат(ів) + бейдж-замок + модалка paywall */
.dz__lock{margin-left:2px;padding:1px 7px;border-radius:999px;background:rgba(243,198,164,.16);color:#f3c6a4;font-size:.72rem;font-weight:700}.dz__lock[hidden]{display:none}
.dz__menu--list{grid-template-columns:1fr;width:250px}.dz__menu--list button{display:flex;gap:10px;align-items:center;cursor:pointer}.dz__menu--list button i{font-style:normal;width:1.3em;text-align:center;opacity:.65}.dz__menu--list button.busy{opacity:.5;pointer-events:none}
.rfx{position:fixed;inset:0;z-index:200;background:rgba(5,7,12,.62);display:flex;align-items:center;justify-content:center;padding:16px}.rfx[hidden]{display:none}
.rfx__box{background:#151821;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:26px;max-width:420px;width:100%;color:#fff;box-shadow:0 30px 70px rgba(0,0,0,.55)}.rfx__box h3{margin:0 0 8px;font-size:1.15rem}.rfx__box p{margin:0 0 18px;color:rgba(255,255,255,.72);line-height:1.5;font-size:.92rem}.rfx__row{display:flex;gap:10px;flex-wrap:wrap}.rfx__row .btn,.rfx__row .tb{text-decoration:none}
@media(max-width:900px){.dz__menu--list{width:auto}}
/* Оплата криптою (USDT TRC-20): модалка «Pay with crypto» */
.rfx__box--pay{max-width:460px;max-height:94vh;overflow:auto}
.pay__sub{margin:0 0 14px!important}
.pay__pill{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:.92rem;margin-bottom:12px}
.pay__pill b{font-weight:700;flex:1;line-height:1.35}
.pay__dot{width:9px;height:9px;border-radius:50%;background:#f3c6a4;box-shadow:0 0 0 0 rgba(243,198,164,.55);animation:payPulse 1.6s infinite;flex:none}
.pay__clock{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:#f3c6a4;font-variant-numeric:tabular-nums}
.pay__pill--exp .pay__dot{background:#9aa3b2;animation:none}.pay__pill--exp .pay__clock{color:#9aa3b2}
.pay__pill--ok{background:rgba(74,201,128,.12);border-color:rgba(74,201,128,.4)}.pay__pill--ok .pay__dot{background:#4ac980;animation:none}
@keyframes payPulse{70%{box-shadow:0 0 0 8px rgba(243,198,164,0)}100%{box-shadow:0 0 0 0 rgba(243,198,164,0)}}
.pay__warn{padding:11px 14px;border-radius:12px;background:rgba(255,170,60,.1);border:1px solid rgba(255,170,60,.38);color:#ffd9a0;font-size:.86rem;line-height:1.45;margin-bottom:16px}
.pay__qr{width:216px;height:216px;margin:0 auto 18px;padding:10px;background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center}.pay__qr[hidden]{display:none}.pay__qr img,.pay__qr canvas{display:block;max-width:100%;height:auto}
.pay__lbl{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 6px}
.pay__row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.pay__amt{font-family:ui-monospace,Consolas,monospace;font-size:1.65rem;font-weight:700;letter-spacing:.01em;line-height:1.1}.pay__amt em{font-style:normal;color:#f3c6a4;text-decoration:underline;text-underline-offset:4px}.pay__amt small{font-size:.9rem;opacity:.7;font-weight:600}
.pay__addr{font-family:ui-monospace,Consolas,monospace;font-size:.86rem;word-break:break-all;line-height:1.4}
.rfx__box p.pay__help{margin:8px 2px 16px;font-size:.8rem;color:rgba(255,255,255,.62)}
.rfx__box p.pay__foot{margin:14px 2px 16px;font-size:.78rem;color:rgba(255,255,255,.5)}
/* помітні іконки: перемикач чату та інструментів — помаранчеві */
.dz__chatToggle.tb,.dz__toolsToggle.tb{background:var(--copper,#c2703f);color:#fff;border-color:transparent}
.dz__chatToggle.tb:hover,.dz__toolsToggle.tb:hover{background:#d2814c;color:#fff}
.dz__chatToggle.tb svg,.dz__toolsToggle.tb svg{stroke:#fff}
/* кнопка надсилання чату — кругла іконка без тексту */
.composer__send{width:44px;height:44px;min-width:44px;padding:0!important;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.composer__send svg{display:block}
/* меню юзера в хедері дизайнера (аватар + підменю) */
.dz__userbtn{display:inline-flex;align-items:center;gap:6px}
.dz__ava{width:22px;height:22px;border-radius:50%;background:var(--copper,#c2703f);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700}
.dz__usermenu a,.dz__usermenu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:9px;color:#fff;text-decoration:none;font-size:.86rem;background:transparent;border:0;cursor:pointer;box-sizing:border-box}
.dz__usermenu a:hover,.dz__usermenu button:hover{background:rgba(255,255,255,.08)}
.dz__usermenu form{margin:0}
/* повний перемикач мов у хедері дизайнера (як на головній) */
.langsw{position:relative}
.langsw>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;color:inherit;font-size:.82rem;font-weight:700;line-height:1}
.langsw>summary::-webkit-details-marker{display:none}.langsw>summary::marker{content:""}
.langsw>summary:hover{background:rgba(255,255,255,.1)}.langsw[open]>summary{background:rgba(255,255,255,.14)}
.langsw__menu{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;max-height:66vh;overflow:auto;background:#17120e;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:6px;box-shadow:0 24px 70px rgba(0,0,0,.55);z-index:120}
.langsw__menu a{display:block;padding:9px 12px;border-radius:9px;color:#fff;text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.langsw__menu a:hover{background:rgba(255,255,255,.09)}
.langsw__menu a[aria-current=true]{color:var(--copper,#e9a27a);background:rgba(255,255,255,.06)}
/* бари дизайнера — компактніші за маркетингові .glass */
.dz__bar .glass{padding:4px;gap:3px}
.dz__bar .glass button{font-size:.8rem;padding:7px 11px}
/* вузькі екрани: бари вертикальні — по одній кнопці в рядок (ракурси зліва, перемикачі справа), дрібний шрифт */
@media (max-width:900px){
  .dz__bar{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px}
  .dz__bar .glass{padding:3px;gap:2px;border-radius:15px}
  .dz__bar .glass button{font-size:.6rem;padding:4px 8px;white-space:nowrap;border-radius:10px}
  /* ракурси — вертикальним списком */
  #viewsBar{flex-direction:column;align-items:stretch;max-width:none;overflow:visible}
  #viewsBar button{text-align:left}
  /* перемикачі — лишаються горизонтальними */
  #togglesBar,#togglesBar #exToggles{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;max-width:100%;gap:2px}
  /* мобільний екран вітання: менший заголовок і підказки (~−40%) */
  .dz--chat .dz__hello{padding:18px 16px 6px}
  .dz--chat .dz__hello h1{font-size:1.35rem;margin:8px 0 6px}
  .dz--chat .dz__hello .lead{font-size:.82rem;margin-bottom:12px}
  .dz--chat .dz__hello .kicker{font-size:.6rem}
  .dz__hello .chip{font-size:.52rem;padding:6px 10px}
}