<a href="/pricing" style="padding:5px 14px;border-radius:8px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);font-size:12px;font-weight:600;color:#ef4444;text-decoration:none"> <i class="fas fa-lock"></i> Нужна подписка </a> </div> </div>  <div style="padding:14px 18px;border-radius:12px;background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.02));border:1px solid rgba(239,68,68,.2);margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap"> <div style="width:36px;height:36px;border-radius:10px;background:rgba(239,68,68,.12);display:flex;align-items:center;justify-content:center;color:#ef4444;flex-shrink:0"> <i class="fas fa-info-circle"></i> </div> <div style="flex:1;min-width:220px"> <div style="font-size:13px;font-weight:700;color:#fca5a5;margin-bottom:2px">Claude Opus 4.7 — по подписке</div> <div style="font-size:12px;color:#a1a1aa;line-height:1.5">Оформите любую подписку (Lite, Basic, Pro) — получите доступ к самой мощной AI-модели. Токены не списываются.</div> </div> <a href="/pricing" class="btn bp" style="padding:8px 18px;font-size:13px;border-radius:9px;flex-shrink:0"> <i class="fas fa-gem"></i> Оформить </a> </div> <div class="chat-wrap">  <div style="height:calc(100vh - 180px);max-height:calc(100vh - 180px);display:flex;flex-direction:column"> <div class="card" style="padding:12px;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column"> <a href="/chat/claude" class="btn bp" style="padding:9px 12px;font-size:12px;border-radius:8px;margin-bottom:10px;flex-shrink:0;background:linear-gradient(135deg,#a78bfa,#8b5cf6)"> <i class="fas fa-plus"></i> Новый диалог </a> <div style="font-size:10px;color:#3f3f46;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:6px 4px 8px">Сессии Claude</div> <div style="text-align:center;padding:20px 0;color:#3f3f46;font-size:11px">Диалогов пока нет</div> </div> </div>  <div class="chat-main"> <div class="chat-head"> <div style="width:28px;height:28px;border-radius:8px;background:rgba(167,139,250,.12);display:flex;align-items:center;justify-content:center;color:#a78bfa;font-size:13px"><i class="fas fa-brain"></i></div> <div style="flex:1;min-width:0"> <div style="font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Новый диалог</div> <div style="font-size:10px;color:#52525b">Задайте любой вопрос</div> </div> </div> <div class="chat-stream" id="claudeStream"> <div class="chat-empty"> <div style="width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(167,139,250,.06));border:1px solid rgba(167,139,250,.3);display:flex;align-items:center;justify-content:center;font-size:32px;color:#a78bfa;margin-bottom:18px"><i class="fas fa-brain"></i></div> <div style="font-size:20px;font-weight:800;color:#e4e4e7;margin-bottom:8px;letter-spacing:-.3px">Claude Opus 4.7</div> <div style="font-size:13px;color:#71717a;max-width:360px;line-height:1.6">Самая мощная модель от Anthropic. Задавайте любые вопросы — код, тексты, идеи, анализ данных.</div> </div> </div>  <div id="claudeFormPlaceholder" style="padding:14px;border-top:1px solid var(--border);text-align:center;color:#71717a;font-size:12px"> ⏳ Форма ввода будет добавлена в следующем патче (Часть 3) </div> </div>  <div style="display:flex;flex-direction:column;gap:10px;max-height:600px;overflow-y:auto">  <div class="card" style="padding:12px"> <div style="font-size:10px;color:#52525b;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Доступ</div> <div style="font-size:12px;color:#fca5a5;margin-bottom:8px">🔒 Нет подписки</div> <a href="/pricing" class="btn bp" style="display:block;text-align:center;padding:8px;font-size:11px;border-radius:7px;background:linear-gradient(135deg,#a78bfa,#8b5cf6)">Оформить →</a> </div>   <div class="card" style="padding:12px"> <div style="font-size:10px;color:#52525b;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">💬 Сессия</div> <div style="text-align:center;padding:10px;border-radius:8px;background:rgba(167,139,250,.05)"> <div style="font-size:22px;font-weight:800;color:#a78bfa">0</div> <div style="font-size:10px;color:#3f3f46;margin-top:2px">сообщений в чате</div> </div> </div>  <div class="card" style="padding:10px"> <div style="font-size:10px;color:#52525b;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">⚡ Действия</div> <div style="display:flex;flex-direction:column;gap:1px"> <a href="/chat/claude" style="display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;color:#71717a;font-size:12px;text-decoration:none;font-weight:500"><i class="fas fa-plus" style="color:#a78bfa;width:12px;font-size:10px"></i> Новый диалог</a> <a href="/design/nano-banana" style="display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;color:#71717a;font-size:12px;text-decoration:none;font-weight:500"><span style="color:#f97316;width:12px;font-size:10px;text-align:center">✦</span> Nano Banana</a> <a href="/design/video/seedance" style="display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;color:#71717a;font-size:12px;text-decoration:none;font-weight:500"><i class="fas fa-video" style="color:#f97316;width:12px;font-size:10px"></i> Seedance</a> <a href="/" style="display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;color:#71717a;font-size:12px;text-decoration:none;font-weight:500"><i class="fas fa-home" style="color:#a78bfa;width:12px;font-size:10px"></i> На главную</a> </div> </div>  <div class="card" style="padding:12px;border-color:rgba(167,139,250,.15);background:rgba(167,139,250,.03)"> <div style="font-size:10px;color:#a78bfa;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">💡 Что умеет Claude</div> <div style="font-size:11px;color:#a1a1aa;line-height:1.55"> • Программирование на любых языках<br> • Анализ и написание текстов<br> • Решение математических задач<br> • Перевод и редактура<br> • Креативные идеи и мозговой штурм </div> </div> </div> </div> </div> </div>  <style> .cc-wrap{display:grid;grid-template-columns:240px 1fr 280px;gap:14px;align-items:start} @media(max-width:1024px){.cc-wrap{grid-template-columns:1fr!important}} .cc-main{display:flex;flex-direction:column;min-height:600px;height:calc(100vh - 140px);background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden} </style> <div style="padding-top:84px"> <div style="max-width:1400px;margin:0 auto;padding:10px 20px 0"> <h1 style="color:#fff">TEST: Claude Opus 4.7</h1> <p style="color:#a1a1aa">Esli ty vidish eto - blok rabotaet.</p> </div> </div> <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16.png"> <link rel="apple-touch-icon" href="/static/favicon.png"> <script src="/static/tailwind.js"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"> <style> :root{--bg:#06060a;--bg2:#0c0c14;--bg3:#12121c;--border:rgba(255,255,255,.06);--bh:rgba(255,255,255,.12);--text:#e4e4e7;--t2:#a1a1aa;--t3:#71717a;--ac:#f97316;--ac2:#fb923c;--glow:rgba(249,115,22,.15);--glow2:rgba(249,115,22,.06);--gr:#22c55e;--rd:#ef4444;--bl:#3b82f6} *{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;line-height:1.6;overflow-x:hidden} ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#333;border-radius:3px} .logo-link{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none;margin-top:18px}.logo-img{height:38px;width:auto}.logo-text-group{display:flex;flex-direction:column;line-height:1}.logo-name{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:22px;letter-spacing:2px;color:#fff}.logo-sub{font-size:9px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;margin-top:3px;color:var(--t3)}.logo-sub .lp{color:var(--ac)}.logo-sub .lr{color:var(--t2)}.logo-sub .la{color:var(--ac)}.logo-sub .li{color:var(--t2)}.logo-sub .lt{color:var(--ac)}.logo-old{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:26px;letter-spacing:-1px;color:#fff;text-decoration:none}.logo-old .ai{color:var(--ac)} .profile-wr{position:relative}.profile-btn{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:.2s}.profile-btn:hover{background:rgba(255,255,255,.06);border-color:var(--bh)}.profile-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--ac),#ea580c);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}.profile-chev{transition:transform .2s;color:var(--t3);font-size:12px}.profile-wr.open .profile-chev{transform:rotate(180deg)}.profile-dd{position:absolute;top:calc(100% + 8px);right:0;width:260px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s;z-index:2000;overflow:hidden}.profile-wr.open .profile-dd{opacity:1;visibility:visible;transform:translateY(0)}.dd-head{padding:16px;border-bottom:1px solid var(--border)}.dd-name{font-size:14px;font-weight:600;color:#fff}.dd-id{font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace;margin-top:2px}.dd-menu{padding:6px}.dd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--t2);font-size:13px;font-weight:500;transition:.2s;cursor:pointer;text-decoration:none}.dd-item:hover{background:var(--bg3);color:#fff}.dd-div{height:1px;background:var(--border);margin:4px 6px}.dd-item.danger{color:var(--rd)}.dd-item.danger:hover{background:rgba(239,68,68,.1)} .nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:0 24px;transition:.3s}.nav.scrolled{background:rgba(6,6,10,.9);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)} .ni{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px} .nl{display:flex;gap:2px;align-items:center}.nk{color:var(--t2);text-decoration:none;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;transition:.2s;cursor:pointer}.nk:hover{color:#fff;background:rgba(255,255,255,.05)}.nk.active{color:var(--ac);background:rgba(249,115,22,.08)} .nav-dd-wr{position:relative}.nav-dd-btn{display:flex;align-items:center;gap:6px}.nav-dd-chev{font-size:10px;transition:transform .2s;color:var(--t3)}.nav-dd-wr.open .nav-dd-chev{transform:rotate(180deg)}.nav-dd{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s;z-index:2000;overflow:hidden;padding:6px}.nav-dd-wr.open .nav-dd{opacity:1;visibility:visible;transform:translateY(0)}.nav-dd-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;color:var(--t2);font-size:13px;font-weight:500;transition:.2s;cursor:pointer;text-decoration:none;white-space:nowrap}.nav-dd-item:hover{background:var(--bg3);color:#fff}.nav-dd-item img{width:22px;height:22px;border-radius:6px}.nav-dd-item .nd-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px}.nd-soon{margin-left:auto;font-size:10px;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.05);color:var(--t3)} .nr{display:flex;align-items:center;gap:12px}.nt{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--glow2);border:1px solid rgba(249,115,22,.15);border-radius:20px;font-size:13px;font-weight:600;color:var(--ac2)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;transition:.25s;border:none;text-decoration:none;font-family:inherit} .bp{background:var(--ac);color:#fff;box-shadow:0 0 20px var(--glow)}.bp:hover{background:var(--ac2);transform:translateY(-1px);box-shadow:0 8px 40px var(--glow)} .bo{background:transparent;color:var(--text);border:1px solid var(--bh)}.bo:hover{border-color:var(--ac);color:var(--ac);background:var(--glow2)} .bg{background:rgba(255,255,255,.04);color:var(--t2);border:1px solid transparent}.bg:hover{background:rgba(255,255,255,.08);color:#fff} .bt{background:#2AABEE;color:#fff}.bt:hover{background:#229ED9;transform:translateY(-1px)} .bs{padding:6px 14px;font-size:13px;border-radius:8px}.bl{padding:14px 32px;font-size:16px;border-radius:12px} .bgr{background:var(--gr);color:#fff}.bgr:hover{transform:translateY(-1px)}.brd{background:var(--rd);color:#fff} .inp{background:var(--bg2);border:1px solid var(--bh);color:var(--text);padding:12px 16px;border-radius:10px;width:100%;font-size:15px;font-family:inherit;transition:.2s;outline:none} .inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--glow)}.inp::placeholder{color:var(--t3)}textarea.inp{resize:none;min-height:100px;line-height:1.5} .card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px;transition:.3s}.card:hover{border-color:var(--bh)}.cg:hover{border-color:rgba(249,115,22,.2);box-shadow:0 0 60px var(--glow2)} .hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden} .hbg{position:absolute;top:-40%;right:-15%;width:900px;height:900px;background:radial-gradient(circle,rgba(249,115,22,.08) 0%,transparent 70%);pointer-events:none} .hgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 50% at 50% 0%,black 70%,transparent 100%)} .hlbl{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 10px;background:var(--glow2);border:1px solid rgba(249,115,22,.12);border-radius:20px;font-size:13px;color:var(--ac2);font-weight:500;margin-bottom:32px} .hdot{width:8px;height:8px;border-radius:50%;background:var(--ac);animation:dp 2s infinite} @keyframes dp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} .hero h1{font-size:clamp(42px,6vw,76px);font-weight:900;line-height:1.05;letter-spacing:-3px;margin-bottom:24px;color:#fff}.hero h1 .ac{color:var(--ac)} .hero p{font-size:18px;color:var(--t2);max-width:540px;margin-bottom:40px;line-height:1.7} .sec{padding:100px 24px;max-width:1280px;margin:0 auto}.sh{text-align:center;margin-bottom:64px}.sh h2{font-size:40px;font-weight:800;letter-spacing:-1.5px;margin-bottom:16px;color:#fff}.sh p{color:var(--t2);font-size:17px;max-width:500px;margin:0 auto} .fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .fi{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:22px;margin-bottom:20px}.fio{background:var(--glow);color:var(--ac)}.fib{background:rgba(59,130,246,.08);color:var(--bl)}.fig{background:rgba(34,197,94,.08);color:var(--gr)} .ft{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff}.fd{color:var(--t2);font-size:14px;line-height:1.7} .arg{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.arb{padding:8px 14px;border-radius:8px;border:1px solid var(--bh);background:transparent;color:var(--t3);cursor:pointer;font-size:13px;font-family:'JetBrains Mono',monospace;transition:.2s}.arb:hover,.arb.active{border-color:var(--ac);color:var(--ac);background:var(--glow2)} .gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .gi{border-radius:14px;overflow:hidden;position:relative;cursor:pointer;transition:.3s;border:1px solid var(--border)}.gi:hover{transform:translateY(-4px);border-color:var(--bh)}.gi img{width:100%;display:block} .go{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.9));opacity:0;transition:.3s}.gi:hover .go{opacity:1} .pg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:1000px;margin:0 auto} .pc{position:relative;overflow:hidden;text-align:center}.pp{border-color:var(--ac)!important;box-shadow:0 0 60px var(--glow2)} .pbdg{position:absolute;top:-1px;right:24px;background:var(--ac);color:#fff;padding:4px 14px;border-radius:0 0 8px 8px;font-size:11px;font-weight:700;text-transform:uppercase} .pa{font-size:40px;font-weight:900;letter-spacing:-1px;color:#fff}.pa span{font-size:16px;color:var(--t3);font-weight:400} .lb{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:99998;align-items:center;justify-content:center}.lb.active{display:flex}body.lb-open .nav,body.lb-open #nav{pointer-events:none!important;z-index:1!important}.lb img{max-width:90vw;max-height:90vh;border-radius:12px;object-fit:contain} .lbc{position:fixed;top:calc(20px + env(safe-area-inset-top,0px));right:20px;color:#fff;font-size:24px;cursor:pointer;z-index:99999!important;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:12px;transition:.2s;pointer-events:auto;user-select:none}.lbc:hover{background:rgba(239,68,68,.8);border-color:#ef4444;transform:scale(1.05)}@media(max-width:768px){.lbc{top:calc(70px + env(safe-area-inset-top,0px));right:14px;width:40px;height:40px;font-size:20px}} .lbd{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:20px;z-index:99999;pointer-events:auto}@media(max-width:768px){.lbd{bottom:calc(20px + env(safe-area-inset-bottom,0px));right:14px;left:14px;justify-content:center}} .ld{width:36px;height:36px;border:3px solid var(--border);border-top:3px solid var(--ac);border-radius:50%;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}} .fi2{animation:fi .5s ease}@keyframes fi{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .foot{border-top:1px solid var(--border);padding:48px 24px;text-align:center;color:var(--t3);font-size:13px}.foot a{color:var(--t2);text-decoration:none}.foot a:hover{color:var(--ac)} .tc{position:fixed;top:84px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px} .toast{padding:12px 20px;border-radius:10px;font-size:14px;font-weight:500;animation:ti .3s ease;max-width:360px} .ts{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:var(--gr)}.te{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:var(--rd)}.tif{background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);color:var(--ac2)} @keyframes ti{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}} .sn{font-size:36px;font-weight:900;letter-spacing:-1px;color:#fff}.sl{font-size:13px;color:var(--t3);margin-top:4px} .rlb{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px 16px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ac2);word-break:break-all;cursor:pointer;transition:.2s}.rlb:hover{border-color:var(--ac)} table{width:100%;border-collapse:collapse}th{text-align:left;padding:10px 16px;font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border)}td{padding:12px 16px;font-size:14px;border-bottom:1px solid var(--border)} .badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600}.bpn{background:rgba(251,191,36,.08);color:#fbbf24}.bap{background:rgba(34,197,94,.08);color:var(--gr)}.brj{background:rgba(239,68,68,.08);color:var(--rd)} .mmb{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;padding:8px} @media(max-width:768px){.nl{display:none}.mmb{display:block}.nl.open{display:flex;flex-direction:column;position:absolute;top:56px;left:0;right:0;background:rgba(6,6,10,.97);backdrop-filter:blur(24px);padding:16px;border-bottom:1px solid var(--border);gap:4px}.logo-link{flex-direction:row;align-items:center;gap:6px;margin-top:0}.logo-img{height:26px;min-width:80px;flex-shrink:0}.logo-sub{display:none}.ni{height:56px;padding:0 8px}.nr{gap:4px;margin-left:auto;flex-shrink:0}.nt{padding:4px 8px;font-size:11px;gap:4px}.profile-btn{padding:4px 8px;font-size:11px;gap:4px}.profile-btn span{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-av{width:24px;height:24px;font-size:10px}.profile-chev{display:none}.btn.bs{padding:5px 10px;font-size:12px}.hero h1{font-size:32px;letter-spacing:-1.5px}.hero p{font-size:15px;color:#71717a}.hlbl{font-size:11px;padding:4px 12px}.sn{font-size:28px}.sl{font-size:11px;color:#52525b}.ft{font-size:16px}.fd{font-size:13px;color:#71717a}.sec{padding:60px 16px}.fg{grid-template-columns:1fr}.pg{grid-template-columns:1fr}.gg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.sh h2{font-size:28px}.sh p{font-size:14px;color:#71717a}#genSection{grid-template-columns:1fr!important}#dashGrid{grid-template-columns:1fr!important} #genSection{grid-template-columns:1fr!important}#dashGrid{grid-template-columns:1fr!important}} .faq-open .faq-body{max-height:200px!important} .faq-open .faq-chev{transform:rotate(45deg)} @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,30px)}} @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-20px)}} @keyframes float3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} body.page-design-hub nav.nav{position:fixed!important;z-index:100} body.page-design-hub nav.nav.scrolled{background:transparent!important;backdrop-filter:none!important;border-bottom:1px solid rgba(255,255,255,.05)!important} /* ═══════════════════════════════════════════════════════════ 🎬 ВИДЕОГЕНЕРАЦИЯ — SEEDANCE 1.5 PRO ═══════════════════════════════════════════════════════════ */ /* Хаб видео — карточки моделей */ .video-model-card{ background:var(--bg2);border:1px solid var(--border);border-radius:16px; padding:24px;transition:.25s;text-decoration:none;display:flex;flex-direction:column;gap:14px; position:relative;overflow:hidden; } .video-model-card.active{ border-color:rgba(249,115,22,.3); background:linear-gradient(155deg,rgba(249,115,22,.05) 0%,var(--bg2) 100%); } .video-model-card:not(.disabled):hover{ transform:translateY(-2px);border-color:rgba(249,115,22,.5); box-shadow:0 12px 32px rgba(249,115,22,.12); } .video-model-card.disabled{opacity:.5;cursor:not-allowed;pointer-events:none} .video-model-card .vmc-icon{ width:56px;height:56px;border-radius:14px; background:linear-gradient(135deg,rgba(249,115,22,.2),rgba(249,115,22,.06)); display:flex;align-items:center;justify-content:center;font-size:26px;color:#f97316; box-shadow:0 6px 18px rgba(249,115,22,.15),inset 0 1px 0 rgba(255,255,255,.08); } .video-model-card.disabled .vmc-icon{ background:rgba(255,255,255,.04);color:var(--t3);box-shadow:none; } .video-model-card .vmc-name{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px} .video-model-card .vmc-desc{font-size:13px;color:var(--t2);line-height:1.55} .video-model-card .vmc-badge{ position:absolute;top:14px;right:14px; padding:3px 9px;border-radius:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px; } .vmc-badge-online{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.25)} .vmc-badge-soon{background:rgba(255,255,255,.04);color:var(--t3);border:1px solid var(--border)} .video-model-card .vmc-tags{display:flex;flex-wrap:wrap;gap:6px} .video-model-card .vmc-tag{ padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.04); font-size:11px;color:var(--t2);font-weight:500; } /* Селекторы параметров в студии */ .vs-section{margin-bottom:14px} .vs-label{ font-size:10px;color:var(--t3);font-weight:700; text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;display:block; } .vs-grid{display:flex;flex-wrap:wrap;gap:6px} .vs-chip{ padding:7px 14px;border-radius:8px;border:1px solid var(--border); background:rgba(255,255,255,.02);color:var(--t2); font-size:12px;font-weight:600;cursor:pointer;transition:.15s; font-family:'JetBrains Mono',monospace;user-select:none; } .vs-chip:hover{border-color:rgba(249,115,22,.3);color:#e4e4e7} .vs-chip.active{ background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.5); color:var(--ac);font-weight:700; } /* Toggle для звука / фикс-камеры */ .vs-toggle{ display:flex;align-items:center;gap:10px;padding:10px 14px; border-radius:10px;border:1px solid var(--border); background:rgba(255,255,255,.02);cursor:pointer;transition:.15s; user-select:none;margin-bottom:6px; } .vs-toggle:hover{border-color:rgba(249,115,22,.3)} .vs-toggle.active{background:rgba(249,115,22,.06);border-color:rgba(249,115,22,.3)} .vs-toggle-switch{ width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,.08); position:relative;transition:.2s;flex-shrink:0; } .vs-toggle-switch::after{ content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:#fff;transition:.2s; } .vs-toggle.active .vs-toggle-switch{background:var(--ac)} .vs-toggle.active .vs-toggle-switch::after{left:18px} .vs-toggle-label{font-size:13px;font-weight:600;color:#e4e4e7;flex:1} .vs-toggle-hint{font-size:11px;color:var(--t3);display:block;margin-top:2px;font-weight:400} /* Ценник под формой */ .vs-pricetag{ display:flex;align-items:center;justify-content:space-between; padding:14px 18px;border-radius:12px; background:linear-gradient(135deg,rgba(249,115,22,.08),rgba(249,115,22,.03)); border:1px solid rgba(249,115,22,.2);margin-bottom:12px; } .vs-pricetag-info{font-size:12px;color:var(--t2);line-height:1.5} .vs-pricetag-info b{color:#fff;font-weight:600} .vs-pricetag-cost{ font-size:22px;font-weight:800;color:var(--ac); display:flex;align-items:center;gap:6px;line-height:1; } .vs-pricetag-cost-label{font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.5px} /* Карточка задачи в чате */ .video-job-card{ align-self:flex-start;max-width:680px;width:100%; background:var(--bg2);border:1px solid var(--border);border-radius:16px; padding:0;overflow:hidden;margin-bottom:12px; } .video-job-header{ display:flex;align-items:center;gap:10px;padding:12px 16px; border-bottom:1px solid var(--border); } .video-job-header-icon{ width:32px;height:32px;border-radius:9px;background:var(--glow); display:flex;align-items:center;justify-content:center;color:var(--ac);font-size:14px; flex-shrink:0; } .video-job-header-info{flex:1;min-width:0} .video-job-header-name{font-size:12px;font-weight:700;color:var(--ac)} .video-job-header-status{font-size:10px;color:var(--t3);margin-top:1px} .video-job-header-status .status-dot{ display:inline-block;width:6px;height:6px;border-radius:50%; margin-right:4px;vertical-align:middle; } .video-job-header-status.processing .status-dot{ background:var(--ac);animation:pulse 1.5s infinite; } .video-job-header-status.completed .status-dot{background:#22c55e} .video-job-header-status.failed .status-dot{background:var(--rd)} .video-job-body{padding:16px} /* Прогресс */ .video-job-progress{ display:flex;flex-direction:column;gap:10px; padding:20px 0;align-items:center; } .video-job-progress-spinner{ width:38px;height:38px;border:3px solid rgba(249,115,22,.15); border-top-color:var(--ac);border-radius:50%; animation:spin 1s linear infinite; } .video-job-progress-text{ font-size:13px;color:#e4e4e7;font-weight:600;text-align:center; } .video-job-progress-eta{font-size:11px;color:var(--t3)} .video-job-progress-bar{ width:100%;max-width:280px;height:4px;border-radius:2px; background:rgba(255,255,255,.05);overflow:hidden; } .video-job-progress-bar-fill{ height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2)); width:0%;transition:width 1s linear; } .video-job-cancel-btn{ margin-top:8px;padding:6px 14px;font-size:11px; background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2); color:var(--rd);border-radius:6px;cursor:pointer;font-family:inherit; transition:.15s; } .video-job-cancel-btn:hover{background:rgba(239,68,68,.15);border-color:var(--rd)} @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} /* Готовое видео */ .video-job-player{ width:100%;border-radius:10px;overflow:hidden;background:#000; } .video-job-player video{ display:block;width:100%;max-width:600px;height:auto; } .video-job-meta{ display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap; font-size:11px;color:var(--t3); } .video-job-meta .chip{ padding:2px 8px;border-radius:5px;background:rgba(255,255,255,.04); color:var(--t2);font-family:'JetBrains Mono',monospace;font-size:10px; } .video-job-actions{ display:flex;gap:6px;margin-top:8px;flex-wrap:wrap; } .video-job-action{ display:inline-flex;align-items:center;gap:5px; padding:6px 12px;border-radius:7px; background:rgba(255,255,255,.03);border:1px solid var(--border); color:var(--t2);font-size:11px;font-weight:600;cursor:pointer;transition:.15s; text-decoration:none;font-family:inherit; } .video-job-action:hover{ background:rgba(249,115,22,.08);color:var(--ac);border-color:rgba(249,115,22,.2); } /* Ошибка */ .video-job-error{ padding:12px 16px;border-radius:10px; background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15); color:var(--rd);font-size:12px;line-height:1.5; } .video-job-error-title{font-weight:700;margin-bottom:4px;color:#fca5a5} .video-job-retry-btn{ margin-top:8px;padding:6px 12px;font-size:11px;font-weight:600; background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2); color:var(--rd);border-radius:6px;cursor:pointer;font-family:inherit; } .video-job-retry-btn:hover{background:rgba(239,68,68,.18)} /* Превью референсов на форме */ .vs-ref-preview{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px; padding:8px;border-radius:10px; background:rgba(249,115,22,.04);border:1px dashed rgba(249,115,22,.25); } .vs-ref-preview-item{ position:relative;width:54px;height:54px;border-radius:8px;overflow:hidden; background:#000; } .vs-ref-preview-item img{width:100%;height:100%;object-fit:cover} .vs-ref-preview-remove{ position:absolute;top:2px;right:2px;width:18px;height:18px; border-radius:50%;background:rgba(0,0,0,.75);color:#fff; border:0;font-size:11px;cursor:pointer; display:flex;align-items:center;justify-content:center;line-height:1; } .vs-ref-preview-add{ width:54px;height:54px;border-radius:8px; background:rgba(255,255,255,.02);border:1px dashed var(--border); color:var(--t3);font-size:18px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:.15s; } .vs-ref-preview-add:hover{border-color:var(--ac);color:var(--ac)} .vs-ref-preview-hint{ width:100%;font-size:10px;color:var(--t3);text-align:center;margin-top:2px; } /* Лимит параллельных задач */ .vs-limit-warning{ padding:10px 14px;border-radius:10px; background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.15); color:var(--ac2);font-size:12px;display:flex;align-items:center;gap:8px; margin-bottom:12px; } .vs-limit-warning i{font-size:14px} /* Сайдбар «Активные задачи» */ .video-active-jobs{ background:var(--bg2);border:1px solid var(--border);border-radius:12px; padding:12px;margin-bottom:10px; } .video-active-jobs-title{ font-size:10px;color:var(--t3);font-weight:700; text-transform:uppercase;letter-spacing:1px;margin-bottom:8px; display:flex;align-items:center;gap:6px; } .video-active-jobs-title .count{ background:rgba(249,115,22,.15);color:var(--ac); padding:2px 7px;border-radius:8px;font-size:10px;font-weight:800; } .video-active-job-item{ display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px; background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.1); margin-bottom:6px; } .video-active-job-item:last-child{margin-bottom:0} .video-active-job-spinner{ width:14px;height:14px;border:2px solid rgba(249,115,22,.2); border-top-color:var(--ac);border-radius:50%; animation:spin 1s linear infinite;flex-shrink:0; } .video-active-job-text{flex:1;min-width:0;color:#e4e4e7} .video-active-job-prompt{ font-size:11px;font-weight:500; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .video-active-job-meta{ font-size:9px;color:var(--t3);margin-top:2px; } /* Мобильная адаптация */ @media(max-width:1024px){ .video-studio-grid{grid-template-columns:1fr !important} .video-job-card{max-width:100%} } </style>  <style> @media(max-width:768px){ body.page-nano-mob{overflow:hidden!important;height:100vh;height:100dvh} body.page-nano-mob > div[style*="padding-top:84px"]{padding-top:0!important;height:100vh;height:100dvh} body.page-nano-mob > div[style*="padding-top:84px"] > div{padding:0!important;max-width:none!important;height:100%!important;display:flex;flex-direction:column} body.page-nano-mob > div[style*="padding-top:84px"] > div > div:first-child{display:none!important} body.page-nano-mob .chat-wrap{display:flex!important;flex-direction:column;gap:0;flex:1;min-height:0;overflow:hidden} body.page-nano-mob .chat-wrap > div:first-child,body.page-nano-mob .chat-wrap > div:last-child{display:none!important} body.page-nano-mob .chat-main{flex:1!important;height:auto!important;border-radius:0!important;border:0!important;background:var(--bg);margin-top:50px} body.page-nano-mob .chat-head{display:none!important} body.page-nano-mob .chat-input-box{display:none!important} body.page-nano-mob .chat-stream{padding:14px 12px 220px!important;-webkit-overflow-scrolling:touch} .mn-top{position:fixed;left:0;right:0;top:56px;height:50px;z-index:90;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 10px} .mn-tb{flex:1;height:36px;display:flex;align-items:center;gap:7px;padding:0 10px;background:var(--bg);border:1px solid var(--border);border-radius:9px;color:#e4e4e7;font-size:12px;font-weight:600;cursor:pointer;min-width:0;font-family:inherit} .mn-tb.on{border-color:#f97316;background:rgba(249,115,22,.08)} .mn-tb .mtl{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mn-tb i.fa-chevron-down{font-size:8px;color:#71717a;flex-shrink:0;transition:transform .2s} .mn-tb.on i.fa-chevron-down{transform:rotate(180deg);color:#f97316} .mn-tb i:first-child{color:#a1a1aa} .mn-tb.on i:first-child{color:#f97316} .mn-bd{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:95;opacity:0;pointer-events:none;transition:opacity .2s} .mn-bd.on{opacity:1;pointer-events:auto} .mn-dd{position:fixed;left:8px;right:8px;top:112px;z-index:96;background:var(--bg2);border:1px solid var(--border);border-radius:14px;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);overflow-y:auto;padding:10px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .25s,opacity .25s;box-shadow:0 20px 50px rgba(0,0,0,.6);display:none} .mn-dd.on{transform:translateY(0);opacity:1;pointer-events:auto;display:block} .mn-tt{font-size:10px;color:#71717a;text-transform:uppercase;letter-spacing:.6px;margin:6px 4px 8px;font-weight:700} .mn-new{display:flex;align-items:center;gap:9px;padding:11px 12px;background:var(--glow);border:1px solid #f97316;border-radius:10px;color:#f97316;font-weight:700;font-size:13px;text-decoration:none;margin-bottom:10px} .mn-srow{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;text-decoration:none;color:#e4e4e7;margin-bottom:3px} .mn-srow.act{background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3)} .mn-srow .mi{width:28px;height:28px;border-radius:7px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0} .mn-srow .mt{flex:1;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mn-srow .mc{font-size:10px;color:#71717a;background:var(--bg);padding:2px 6px;border-radius:5px;flex-shrink:0} .mn-mrow{display:flex;align-items:center;gap:10px;padding:11px;border-radius:11px;text-decoration:none;color:#e4e4e7;margin-bottom:6px;border:1px solid transparent} .mn-mrow.act{background:var(--glow);border-color:#f97316} .mn-mrow.soon{opacity:.5} .mn-mrow .mi{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .mn-mrow .mn{flex:1;min-width:0} .mn-mrow .mn-name{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px} .mn-mrow .mn-dot{width:6px;height:6px;border-radius:50%;background:#22c55e} .mn-mrow .mn-bdg{font-size:9px;background:rgba(113,113,122,.2);color:#a1a1aa;padding:2px 6px;border-radius:5px;font-weight:600} .mn-mrow .mn-sub{font-size:11px;color:#71717a;margin-top:2px} .mn-bot{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--bg2);border-top:1px solid var(--border);padding:8px 10px calc(10px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;gap:7px} .mn-set{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:#e4e4e7;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit} .mn-set.on{border-color:#f97316;color:#f97316} .mn-set i:first-child{color:#a1a1aa} .mn-set.on i:first-child{color:#f97316} .mn-set i:last-child{transition:transform .2s;margin-left:auto;font-size:9px} .mn-set.on i:last-child{transform:rotate(180deg)} .mn-fp{display:none;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px} .mn-fp.on{display:block} .mn-ftt{font-size:10px;color:#71717a;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-weight:700} .mn-fg{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .mn-fc{padding:8px 4px;text-align:center;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-size:11px;font-weight:600;color:#a1a1aa;cursor:pointer;font-family:'JetBrains Mono',monospace} .mn-fc.on{background:var(--glow);border-color:#f97316;color:#f97316} .mn-iw{position:relative} .mn-ta{width:100%;min-height:42px;max-height:120px;padding:11px 14px;background:var(--bg);border:1px solid var(--border);border-radius:11px;color:#e4e4e7;font-size:14px;resize:none;outline:none;font-family:inherit;line-height:1.4;box-sizing:border-box} .mn-ta:focus{border-color:#f97316} .mn-row{display:flex;align-items:center;gap:6px} .mn-ib{width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:#a1a1aa;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;position:relative;flex-shrink:0;font-family:inherit;padding:0} .mn-ib.on{border-color:#f97316;background:rgba(249,115,22,.1);color:#f97316} .mn-cnt{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;background:#f97316;color:#fff;border-radius:8px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px} .mn-spacer{flex:1} .mn-send{width:100%;height:44px;border-radius:11px;border:0;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;opacity:.5;transition:opacity .2s,transform .15s;font-family:inherit} .mn-send.ready{opacity:1} .mn-send:active{transform:scale(.98)} .mn-send:disabled{cursor:not-allowed} .mn-pr{font-size:10px;background:rgba(0,0,0,.25);padding:3px 7px;border-radius:6px} } @media(min-width:769px){.mn-top,.mn-bot,.mn-bd,.mn-dd{display:none!important}} .mn-prev{display:none;gap:6px;padding:6px;background:var(--bg);border:1px solid var(--border);border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch} .mn-prev.on{display:flex} .mn-prev-item{position:relative;flex-shrink:0;width:54px;height:54px;border-radius:8px;overflow:hidden;background:var(--bg2);border:1px solid var(--border)} .mn-prev-item img{width:100%;height:100%;object-fit:cover;display:block} .mn-prev-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:0;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1} </style>   <style> @media(min-width:769px){ html:has(body.page-nano),body.page-nano{overflow:hidden!important;height:100vh;width:100%} body.page-nano > div[style*="padding-top:84px"]{height:100vh;width:100%;max-width:100%;overflow:hidden;display:block} body.page-nano > div[style*="padding-top:84px"] > div{height:calc(100vh - 84px);display:flex;flex-direction:column;overflow:hidden} body.page-nano .chat-wrap{flex:1;min-height:0;align-items:stretch!important;overflow:hidden} body.page-nano .chat-wrap > div:first-child > .card, body.page-nano .chat-wrap > div:last-child{max-height:100%!important;overflow-y:auto} body.page-nano .chat-main{height:100%!important;max-height:100%!important} body.page-nano .chat-stream{overflow-y:auto!important;overscroll-behavior:contain;min-height:0} body.page-nano #siteNotifs:empty{display:none} } </style>   <style> /* ===== /design ДЕСКТОП ===== */ @media(min-width:769px){ body.page-design-hub{position:relative;background:#06060a !important} body.page-design-hub::before{ content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none; background-image:url('/static/bg/brain.jpg'); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; opacity:.55; -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 90%); mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 90%); } body.page-design-hub::after{ content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none; background: radial-gradient(circle at 8% 12%, rgba(249,115,22,.22) 0%, transparent 42%), radial-gradient(circle at 18% 70%, rgba(249,115,22,.10) 0%, transparent 50%); } body.page-design-hub nav.nav, body.page-design-hub nav.nav.scrolled, body.page-design-hub #nav, body.page-design-hub #nav.scrolled{ background:transparent !important; background-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:none !important; box-shadow:none !important; } body.page-design-hub nav.nav *, body.page-design-hub #nav *{text-shadow:0 1px 3px rgba(0,0,0,.6)} body.page-design-hub nav.nav .btn, body.page-design-hub nav.nav button, body.page-design-hub nav.nav .navdd, body.page-design-hub #nav .btn, body.page-design-hub #nav button{text-shadow:none} body.page-design-hub > div[style*="padding-top"]{ padding-top:110px !important; position:relative;z-index:5; } body.page-design-hub footer.foot{position:relative;z-index:5;background:rgba(6,6,10,.6);backdrop-filter:blur(8px)} body.page-design-hub a.card.cg{transition:all .3s ease} body.page-design-hub a.card.cg:hover{box-shadow:0 18px 50px rgba(249,115,22,.25)} } /* ===== /design МОБИЛКА — копия фона с главной (page-home-user) ===== */ @media(max-width:768px){ body.page-design-hub{position:relative;background:#06060a !important} body.page-design-hub::before{ content:'';position:fixed;top:0;left:0;right:0; height:var(--brain-layer-h, 100vh); z-index:0;pointer-events:none; background-image:url('/static/bg/brain.jpg'); background-repeat:no-repeat; background-position:right top; background-size:auto 35%; opacity:.30; -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 90%); mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 90%); } body.page-design-hub::after{ content:'';position:fixed;top:0;left:0;right:0; height:var(--brain-layer-h, 100vh); z-index:0;pointer-events:none; background: radial-gradient(circle at 8% 20%, rgba(249,115,22,.18) 0%, transparent 45%), radial-gradient(circle at 15% 75%, rgba(249,115,22,.08) 0%, transparent 50%); } body.page-design-hub > div[style*="padding-top"], body.page-design-hub nav, body.page-design-hub footer{position:relative;z-index:5} } /* Альбомная мобилка */ @media(max-width:1024px) and (orientation:landscape){ body.page-design-hub::before{ background-size:auto 100%; background-position:right center; opacity:.40; } } </style>   <style> @media(max-width:768px){ /* Карточка Nano Banana на главной — в одну колонку */ .sec .card[style*="border-color:rgba(249,115,22,.2)"] > div[style*="display:flex"][style*="gap:32px"]{ flex-direction:column !important; gap:20px !important; } .sec .card[style*="border-color:rgba(249,115,22,.2)"] > div[style*="display:flex"][style*="gap:32px"] > div{ min-width:0 !important; width:100% !important; } /* Уменьшаем padding карточки на мобилке */ .sec .card[style*="padding:40px"]{padding:20px !important} /* Hero CTA блок — статистика в 2 колонки на мобилке */ .hero ~ .sec, .sec[style*="padding:80px 24px"]{padding:50px 16px !important} } </style>   <style id="navddFixCSS"> .nav{z-index:9999 !important} .nav-dd-wr{position:relative} .nav-dd-wr.open{z-index:10001 !important} .nav-dd{ background:#0c0c14 !important; border:1px solid rgba(255,255,255,.12) !important; z-index:10002 !important; box-shadow:0 12px 48px rgba(0,0,0,.7) !important; } .nav-dd-item:hover{background:rgba(255,255,255,.08) !important} .profile-wr.open{z-index:10001 !important} .profile-dd{z-index:10002 !important;background:#0c0c14 !important} @media(max-width:768px){ /* На мобилке выпадашка появляется ПОД кнопкой, не перекрывая её */ .nav-dd-wr.open .nav-dd{ position:absolute !important; left:0 !important; right:auto !important; top:calc(100% + 6px) !important; width:auto !important; min-width:240px !important; max-width:calc(100vw - 32px) !important; max-height:calc(100dvh - 200px); overflow-y:auto; -webkit-overflow-scrolling:touch; } /* Если меню открыто в мобильном бургере — выпадашка под кнопкой */ .nl.open .nav-dd-wr.open .nav-dd{ position:relative !important; top:0 !important; left:0 !important; margin-top:6px !important; width:100% !important; min-width:0 !important; max-width:none !important; } } </style>   <style> /* Футер всегда прозрачный, без своего фона */ .foot{ position:relative; z-index:5; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Перебиваем фоны от page-design-hub::before/::after под футером */ body.page-design-hub .foot, body.page-nano .foot, body.page-nano-mob .foot{ background:transparent !important; } </style>   <style> @media(max-width:768px){ /* Грид хаба в одну колонку и убираем левый сайдбар */ body.page-design-hub #dashGrid{ grid-template-columns:1fr !important; gap:12px !important; } /* Левая колонка с сессиями (первая в гриде) — скрыта на мобилке */ body.page-design-hub #dashGrid > div:first-child{ display:none !important; } /* Кнопка-триггер сессий — показывается на мобилке */ .dh-mob-sess{ display:flex !important; } } @media(min-width:769px){ .dh-mob-sess,#dhMobBd,#dhMobDD{display:none !important} } .dh-mob-sess{ display:none; align-items:center;gap:8px; width:100%; padding:10px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:11px; color:#e4e4e7; font-size:13px; font-weight:600; cursor:pointer; margin-bottom:14px; font-family:inherit; } .dh-mob-sess.on{ border-color:#f97316; background:rgba(249,115,22,.08); color:#f97316; } .dh-mob-sess i:first-child{color:#a1a1aa} .dh-mob-sess.on i:first-child{color:#f97316} .dh-mob-sess .mtl{ flex:1;text-align:left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .dh-mob-sess i.fa-chevron-down{ font-size:9px;color:#71717a;flex-shrink:0;transition:transform .2s; } .dh-mob-sess.on i.fa-chevron-down{transform:rotate(180deg);color:#f97316} /* Бэкдроп */ #dhMobBd{ position:fixed;inset:0; background:rgba(0,0,0,.55); z-index:95;opacity:0;pointer-events:none; transition:opacity .2s; } #dhMobBd.on{opacity:1;pointer-events:auto} /* Выпадашка — копия .mn-dd, но с собственным id */ #dhMobDD{ position:fixed;left:8px;right:8px; top:130px; z-index:96; background:var(--bg2); border:1px solid var(--border); border-radius:14px; max-height:calc(100dvh - 150px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px; transform:translateY(-12px); opacity:0;pointer-events:none; transition:transform .25s,opacity .25s; box-shadow:0 20px 50px rgba(0,0,0,.6); } #dhMobDD.on{transform:translateY(0);opacity:1;pointer-events:auto} #dhMobDD .mn-tt{ font-size:10px;color:#71717a; text-transform:uppercase;letter-spacing:.6px; margin:6px 4px 8px;font-weight:700; } #dhMobDD .mn-srow{ display:flex;align-items:center;gap:9px; padding:9px 10px;border-radius:9px; text-decoration:none;color:#e4e4e7;margin-bottom:3px; } #dhMobDD .mn-srow.act{ background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.3); } #dhMobDD .mn-srow .mi{ width:28px;height:28px;border-radius:7px; background:var(--bg); display:flex;align-items:center;justify-content:center; font-size:13px;flex-shrink:0; } #dhMobDD .mn-srow .mt{ flex:1;font-size:12px;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #dhMobDD .mn-srow .mc{ font-size:10px;color:#71717a; background:var(--bg);padding:2px 6px;border-radius:5px;flex-shrink:0; } #dhMobDD .dh-empty{ text-align:center;padding:20px 0; color:#3f3f46;font-size:12px; } </style>   <style> @media(max-width:768px){ body.page-home #dashGrid{ grid-template-columns:1fr !important; gap:12px !important; } body.page-home #dashGrid > div:first-child{ display:none !important; } .hm-mob-sess{display:flex !important} } @media(min-width:769px){ .hm-mob-sess,#hmMobBd,#hmMobDD{display:none !important} } .hm-mob-sess{ display:none;align-items:center;gap:8px; width:100%;padding:10px 14px; background:var(--bg2);border:1px solid var(--border); border-radius:11px;color:#e4e4e7; font-size:13px;font-weight:600;cursor:pointer; margin-bottom:14px;font-family:inherit; } .hm-mob-sess.on{ border-color:#f97316;background:rgba(249,115,22,.08);color:#f97316; } .hm-mob-sess i:first-child{color:#a1a1aa} .hm-mob-sess.on i:first-child{color:#f97316} .hm-mob-sess .mtl{ flex:1;text-align:left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .hm-mob-sess i.fa-chevron-down{ font-size:9px;color:#71717a;flex-shrink:0;transition:transform .2s; } .hm-mob-sess.on i.fa-chevron-down{transform:rotate(180deg);color:#f97316} #hmMobBd{ position:fixed;inset:0;background:rgba(0,0,0,.55); z-index:95;opacity:0;pointer-events:none;transition:opacity .2s; } #hmMobBd.on{opacity:1;pointer-events:auto} #hmMobDD{ position:fixed;left:8px;right:8px;top:130px;z-index:96; background:var(--bg2);border:1px solid var(--border); border-radius:14px;max-height:calc(100dvh - 150px); overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px; transform:translateY(-12px);opacity:0;pointer-events:none; transition:transform .25s,opacity .25s; box-shadow:0 20px 50px rgba(0,0,0,.6); } #hmMobDD.on{transform:translateY(0);opacity:1;pointer-events:auto} #hmMobDD .mn-tt{ font-size:10px;color:#71717a;text-transform:uppercase; letter-spacing:.6px;margin:6px 4px 8px;font-weight:700; } #hmMobDD .mn-srow{ display:flex;align-items:center;gap:9px; padding:9px 10px;border-radius:9px; text-decoration:none;color:#e4e4e7;margin-bottom:3px; } #hmMobDD .mn-srow .mi{ width:28px;height:28px;border-radius:7px;background:var(--bg); display:flex;align-items:center;justify-content:center; font-size:13px;flex-shrink:0; } #hmMobDD .mn-srow .mt{ flex:1;font-size:12px;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #hmMobDD .mn-srow .mc{ font-size:10px;color:#71717a;background:var(--bg); padding:2px 6px;border-radius:5px;flex-shrink:0; } #hmMobDD .hm-empty{ text-align:center;padding:20px 0;color:#3f3f46;font-size:12px; } </style>   <style> /* ===== ФОН «МОЗГ» ===== */ body.page-home-user{position:relative;background:#06060a !important} body.page-home-user::before{ content:'';position:fixed;top:0;left:0;right:0; /* Высота слоя — фиксированная в px (от JS), не зависит от viewport. Это убирает смещение при появлении/скрытии адресной строки. */ height:var(--brain-layer-h, 100vh); z-index:0;pointer-events:none; background-image:url('/static/bg/brain.jpg'); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; opacity:.55; -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 90%); mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 90%); } body.page-home-user::after{ content:'';position:fixed;top:0;left:0;right:0; height:var(--brain-layer-h, 100vh); z-index:0;pointer-events:none; background: radial-gradient(circle at 8% 12%, rgba(249,115,22,.22) 0%, transparent 42%), radial-gradient(circle at 18% 70%, rgba(249,115,22,.10) 0%, transparent 50%); } body.page-home-user > div[style*="padding-top:84px"]{position:relative;z-index:5} body.page-home-user footer{position:relative;z-index:5} body.page-home-user nav.nav{position:fixed!important;z-index:100} body.page-home-user nav.nav.scrolled{background:transparent!important;backdrop-filter:none!important;border-bottom:1px solid rgba(255,255,255,.05)!important} /* МОБИЛКА портрет — мозг ~35% высоты */ @media(max-width:900px) and (orientation:portrait){ body.page-home-user::before{ opacity:.30; background-size:auto 35%; /* 35% от --brain-layer-h, который = высоте экрана */ background-position:right top; } } /* МОБИЛКА альбом — мозг во всю высоту */ @media(max-width:1024px) and (orientation:landscape){ body.page-home-user::before{ opacity:.40; background-size:auto 100%; background-position:right center; } } /* ===== БАЛАНС/ПОПОЛНИТЬ ===== */ body.page-home-user div[style*="padding:6px 14px"][style*="rgba(249,115,22,.08)"]{ background:rgba(12,12,18,.7) !important; border:1px solid rgba(249,115,22,.3) !important; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(0,0,0,.4); } /* ===== ПЛИТКИ ===== */ #homeTiles{grid-template-columns:repeat(2,1fr)!important;gap:14px!important} #homeTiles > a, #homeTiles > div{ min-height:170px!important;padding:22px!important;border-radius:20px!important; display:flex!important;flex-direction:column!important;justify-content:space-between!important; position:relative;overflow:hidden; background:linear-gradient(155deg, rgba(24,24,30,.85) 0%, rgba(12,12,18,.85) 100%)!important; border:1px solid rgba(255,255,255,.08)!important; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); transition:transform .3s cubic-bezier(.4,0,.2,1), border-color .25s, box-shadow .3s; } #homeTiles > a::before, #homeTiles > div::before{ content:'';position:absolute;top:-45%;right:-35%;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle, var(--tile-glow, rgba(249,115,22,.18)) 0%, transparent 65%); pointer-events:none;opacity:1;transition:transform .4s, opacity .25s; } #homeTiles > a:hover::before{transform:scale(1.15)} #homeTiles > a::after{ content:'';position:absolute;top:0;left:-100%;width:55%;height:100%; background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.08) 50%, transparent 75%); pointer-events:none;transition:left .65s ease;transform:skewX(-18deg); } #homeTiles > a:hover::after{left:160%} #homeTiles > a[href="/design"]{ --tile-glow:rgba(249,115,22,.30); border-color:rgba(249,115,22,.35)!important; box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 22px rgba(249,115,22,.10), inset 0 1px 0 rgba(249,115,22,.10)!important; } #homeTiles > a[href="/design"]:hover{ border-color:rgba(249,115,22,.65)!important; box-shadow:0 14px 38px rgba(249,115,22,.28), inset 0 1px 0 rgba(249,115,22,.16)!important; } #homeTiles > div:nth-child(2){--tile-glow:rgba(59,130,246,.16);border-color:rgba(59,130,246,.16)!important} #homeTiles > div:nth-child(3){--tile-glow:rgba(239,68,68,.14);border-color:rgba(239,68,68,.14)!important} #homeTiles > div:nth-child(4){--tile-glow:rgba(34,197,94,.14);border-color:rgba(34,197,94,.14)!important} #homeTiles > div{opacity:.72!important;cursor:default} #homeTiles > div:hover{opacity:.88!important} #homeTiles > div:not([href])::before{opacity:.7} #homeTiles > div:not([href])::after{ content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900; position:absolute;bottom:14px;right:16px;font-size:14px;color:#52525b;opacity:.55; background:none;width:auto;height:auto;left:auto;top:auto;transform:none; } @media(min-width:769px){ #homeTiles{gap:18px!important} #homeTiles > a, #homeTiles > div{min-height:240px!important;padding:28px!important;border-radius:22px!important} #homeTiles > a:hover{transform:translateY(-5px)!important} #homeTiles div[style*="width:52px;height:52px;border-radius:14px"]{ width:62px!important;height:62px!important;font-size:30px!important;border-radius:17px!important;margin-bottom:18px!important; box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08)!important; } #homeTiles div[style*="font-size:20px;font-weight:800"]{font-size:23px!important;letter-spacing:-.4px} #homeTiles div[style*="font-size:12px;color:#71717a;line-height:1.5"]{font-size:13px!important;color:#a1a1aa!important;line-height:1.55!important} } @media(max-width:768px) and (orientation:portrait){ #homeTiles{gap:10px!important} #homeTiles > a, #homeTiles > div{min-height:150px!important;padding:14px!important;border-radius:16px!important} #homeTiles > a[href="/design"]{ --tile-glow:rgba(249,115,22,.16) !important; border-color:rgba(249,115,22,.22) !important; box-shadow:0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05) !important; } #homeTiles > a > div:last-child[style*="margin-top:16px"], #homeTiles > div > div:last-child[style*="margin-top:16px"]{display:none!important} #homeTiles div[style*="width:52px;height:52px;border-radius:14px"]{ width:46px!important;height:46px!important;font-size:22px!important;margin-bottom:10px!important;border-radius:13px!important; } #homeTiles div[style*="font-size:20px;font-weight:800"]{font-size:16px!important;letter-spacing:-.3px;margin-bottom:2px!important} #homeTiles div[style*="font-size:12px;color:#71717a;line-height:1.5"]{ font-size:11.5px!important;line-height:1.35!important; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } #homeTiles div[style*="position:absolute;top:16px;right:16px"]{ top:9px!important;right:9px!important;font-size:9px!important;padding:2px 7px!important; } #homeTiles > a::after{display:none} } @media(max-width:1024px) and (orientation:landscape) and (max-height:600px){ #homeTiles{grid-template-columns:repeat(4,1fr)!important;gap:10px!important} #homeTiles > a, #homeTiles > div{min-height:130px!important;padding:14px!important;border-radius:14px!important} #homeTiles > a[href="/design"]{ --tile-glow:rgba(249,115,22,.16) !important; border-color:rgba(249,115,22,.22) !important; box-shadow:0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05) !important; } #homeTiles > a > div:last-child[style*="margin-top:16px"], #homeTiles > div > div:last-child[style*="margin-top:16px"]{display:none!important} #homeTiles div[style*="width:52px;height:52px;border-radius:14px"]{ width:42px!important;height:42px!important;font-size:20px!important;margin-bottom:8px!important;border-radius:11px!important; } #homeTiles div[style*="font-size:20px;font-weight:800"]{font-size:14px!important;margin-bottom:2px!important} #homeTiles div[style*="font-size:12px;color:#71717a;line-height:1.5"]{ font-size:11px!important;line-height:1.3!important; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } #homeTiles div[style*="position:absolute;top:16px;right:16px"]{ top:6px!important;right:6px!important;font-size:8px!important;padding:1px 6px!important; } #homeTiles > a::after{display:none} } body.page-home-user .card{ background:linear-gradient(155deg, rgba(24,24,30,.78) 0%, rgba(12,12,18,.78) 100%)!important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } </style> <script> /* Жёстко фиксируем высоту слоя мозга в px. Не реагируем на скролл. */ (function(){ if(!document.body || !document.body.classList.contains('page-home-user')) return; function setH(){ /* Берём максимальную высоту экрана (когда адресная строка скрыта). screen.height даёт физическую высоту устройства — она НЕ меняется при скролле. */ var h; if(window.screen && window.screen.height){ /* На мобилке screen.height = высота устройства в текущей ориентации */ h = window.screen.height; /* Подстраховка: если screen.height почему-то меньше innerHeight — берём innerHeight */ if(h < window.innerHeight) h = window.innerHeight; } else { h = window.innerHeight; } document.documentElement.style.setProperty('--brain-layer-h', h + 'px'); } setH(); window.addEventListener('orientationchange', function(){ setTimeout(setH, 300); }); var lastW = window.innerWidth; window.addEventListener('resize', function(){ if(Math.abs(window.innerWidth - lastW) > 50){ lastW = window.innerWidth; setH(); } }); })(); </script>   <style> @media(min-width:769px){ html.has-page-nano{background:#06060a !important} html.has-page-nano body.page-nano{background:transparent !important;position:relative;z-index:1} html.has-page-nano body.page-nano::before{ content:'';position:fixed;top:0;left:0;right:0;bottom:0; z-index:-2;pointer-events:none; background-image:url('/static/bg/brain.jpg'); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; opacity:.55; -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 90%); mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 90%); } html.has-page-nano body.page-nano::after{ content:'';position:fixed;top:0;left:0;right:0;bottom:0; z-index:-1;pointer-events:none; background: radial-gradient(circle at 8% 12%, rgba(249,115,22,.22) 0%, transparent 42%), radial-gradient(circle at 18% 70%, rgba(249,115,22,.10) 0%, transparent 50%); } html.has-page-nano body.page-nano nav.nav, html.has-page-nano body.page-nano nav.nav.scrolled, html.has-page-nano body.page-nano #nav, html.has-page-nano body.page-nano #nav.scrolled{ background:transparent !important; background-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:none !important; box-shadow:none !important; } html.has-page-nano body.page-nano nav.nav *, html.has-page-nano body.page-nano #nav *{text-shadow:0 1px 3px rgba(0,0,0,.6)} html.has-page-nano body.page-nano nav.nav .btn, html.has-page-nano body.page-nano nav.nav button, html.has-page-nano body.page-nano nav.nav .navdd, html.has-page-nano body.page-nano #nav .btn, html.has-page-nano body.page-nano #nav button{text-shadow:none} } </style> <script> (function(){ function apply(){ if(document.body && document.body.classList.contains('page-nano')){ document.documentElement.classList.add('has-page-nano'); } } if(document.body) apply(); else document.addEventListener('DOMContentLoaded', apply); })(); </script>   <style> @media(min-width:769px){ /* Скрываем компактную шапку «← Nano Banana · 2 токена · ~20 сек / ⚡ tokens» это родительский div блока с дочерним <div class="chat-wrap"> */ body.page-nano > div[style*="padding-top:84px"] > div[style*="max-width:1400px"] > div:first-child{ display:none !important; } /* Поднимаем chat-wrap выше — освободившееся место */ body.page-nano > div[style*="padding-top:84px"]{ padding-top:74px !important; } body.page-nano > div[style*="padding-top:84px"] > div[style*="max-width:1400px"]{ padding-top:6px !important; } /* Чат увеличиваем по высоте */ body.page-nano .chat-main{ height:calc(100vh - 95px) !important; } body.page-nano > div[style*="padding-top:84px"] > div[style*="max-width:1400px"] > div[style*="display:grid"] > div:first-child > .card{ max-height:calc(100vh - 95px) !important; } } </style>   <style> /* ═══════════════════════════════════════════════════════════════ ДЕСКТОП — медленный блеск + отступ до «Последних работ» ═══════════════════════════════════════════════════════════════ */ @media(min-width:769px){ #homeTiles a, #homeTiles a::before, #homeTiles a::after{ animation-duration:12s !important; transition-duration:.6s !important; } #homeTiles a[href="/design"] *, #homeTiles a[href="/design"]::before, #homeTiles a[href="/design"]::after{ animation-duration:10s !important; } /* Отступ между картами нейросетей и «Последние работы раздела» */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child{ margin-bottom:160px !important; } } /* ═══════════════════════════════════════════════════════════════ ГЛАВНАЯ — яркие рамки везде ═══════════════════════════════════════════════════════════════ */ #homeTiles > a{ border-color:rgba(255,255,255,.18) !important; box-shadow:0 4px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08) !important; } #homeTiles > a[href="/design"]{ border-color:rgba(249,115,22,.65) !important; box-shadow:0 6px 22px rgba(249,115,22,.28), 0 0 0 1px rgba(249,115,22,.35) inset, inset 0 1px 0 rgba(255,255,255,.10) !important; } /* ═══════════════════════════════════════════════════════════════ МОБИЛКА: главная — БОЛЬШОЙ отступ до статистики ═══════════════════════════════════════════════════════════════ */ @media(max-width:768px){ #homeTiles{ margin-bottom:96px !important; } } /* ═══════════════════════════════════════════════════════════════ МОБИЛКА: /design — компактные карточки нейросетей Карточки в реальности: flex-column с верхом (иконка+название+описание) и низом (теги). Описание = 4-й ребёнок div'а-верха. ═══════════════════════════════════════════════════════════════ */ @media(max-width:768px){ html, body{ overflow-x:hidden !important; max-width:100vw !important; } body.page-design-hub .container, body.page-design-hub main, body.page-design-hub #dashGrid{ max-width:100% !important; overflow-x:hidden; } /* В одну колонку */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child{ grid-template-columns:1fr !important; gap:10px !important; margin-bottom:120px !important; width:100% !important; max-width:100% !important; } /* ═══ КАРТОЧКА: перевернуть с column на row ═══ */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card{ min-height:0 !important; height:auto !important; padding:14px !important; padding-right:90px !important; /* справа место под бейдж+цену */ border-radius:14px !important; flex-direction:row !important; align-items:center !important; gap:14px !important; justify-content:flex-start !important; position:relative !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow:hidden !important; } /* ═══ ВЕРХНИЙ блок (иконка+название+описание) — перевернуть в row ═══ */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card > div:first-child{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:12px !important; flex:1 1 auto !important; min-width:0 !important; width:100% !important; max-width:100% !important; } /* Бейдж ONLINE/СКОРО — оставляем как есть (он absolute) */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card > div:first-child > div[style*="position:absolute"]{ top:10px !important; right:10px !important; padding:3px 9px !important; font-size:10px !important; line-height:1.4 !important; z-index:2; font-weight:700 !important; } /* Иконка-плашка (2-й ребёнок верхнего div, width:52px) */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card > div:first-child > div[style*="width:52px"]{ width:44px !important; height:44px !important; font-size:0 !important; /* прячем эмодзи внутри */ margin-bottom:0 !important; border-radius:11px !important; flex-shrink:0 !important; position:relative !important; overflow:hidden !important; } /* Иконка Nano Banana — картинка как в навбаре */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a[href="/design/nano-banana"] > div:first-child > div[style*="width:52px"]{ background:transparent !important; border-color:rgba(249,115,22,.3) !important; } body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a[href="/design/nano-banana"] > div:first-child > div[style*="width:52px"]::after{ content:''; position:absolute; inset:0; background-image:url('/static/nano-banana.png'); background-size:cover; background-position:center; border-radius:11px; } /* Прячем <i> внутри иконки */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card > div:first-child > div[style*="width:52px"] > i{ display:none !important; } /* НАЗВАНИЕ (3-й ребёнок верхнего div, font-size:18px) */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card > div:first-child > div[style*="font-size:18px"]{ font-size:16px !important; margin-bottom:0 !important; line-height:1.2 !important; font-weight:800 !important; color:#fff !important; flex:1 !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* ОПИСАНИЕ (4-й ребёнок верхнего div, color:#71717a line-height:1.5) — СКРЫТЬ */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card > div:first-child > div[style*="color:#71717a"]{ display:none !important; } /* НИЖНИЙ блок (теги 2 токена/~20с) — позиционируем АБСОЛЮТНО справа */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card > div:last-child[style*="margin-top:16px"]{ position:absolute !important; top:34px !important; right:10px !important; margin-top:0 !important; display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:3px !important; z-index:2; } body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a.card > div:last-child[style*="margin-top:16px"] > span{ padding:2px 7px !important; font-size:10px !important; border-radius:5px !important; line-height:1.3 !important; white-space:nowrap !important; font-weight:700 !important; } /* Активная Nano Banana — оранжевая обводка */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a[href="/design/nano-banana"]{ border-color:rgba(249,115,22,.65) !important; background:linear-gradient(155deg, rgba(249,115,22,.12) 0%, rgba(24,24,30,.85) 60%) !important; box-shadow:0 6px 22px rgba(249,115,22,.28), 0 0 0 1px rgba(249,115,22,.30) inset !important; } /* Заглушки — приглушены */ body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a[href="/design/dalle"], body.page-design-hub #dashGrid > div:nth-child(2) > div:first-child > a[href="/design/midjourney"]{ opacity:.65 !important; border-color:rgba(255,255,255,.10) !important; } /* «Последние работы раздела» */ body.page-design-hub #dashGrid > div:nth-child(2) > .card{ padding:14px !important; border-radius:14px !important; max-width:100% !important; overflow:hidden !important; } } </style>   <style> /* Общая раскладка чата (для design_nano И video_seedance) */ .chat-wrap{display:grid;grid-template-columns:240px 1fr 280px;gap:14px;align-items:start} @media(max-width:1024px){.chat-wrap{grid-template-columns:1fr!important}} .chat-main{display:flex;flex-direction:column;min-height:600px;height:auto;background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden} .chat-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0} .chat-stream{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth} .chat-input-box{flex-shrink:0;padding:14px;border-top:1px solid var(--border)} .chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#52525b;padding:40px 20px} .msg-user{align-self:flex-end;max-width:75%;padding:10px 14px;border-radius:14px 14px 2px 14px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.15);color:#e4e4e7;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word} .msg-user-meta{align-self:flex-end;font-size:10px;color:#52525b;margin-top:-10px;margin-right:4px} .mdl-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;border:1px solid var(--border);text-decoration:none;transition:.15s;margin-bottom:4px} .mdl-card:hover{background:rgba(255,255,255,.03)} .mdl-card.on{background:rgba(249,115,22,.06);border-color:rgba(249,115,22,.25)} .mdl-card.soon{opacity:.55} .mdl-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0} .mdl-nm{font-size:12px;font-weight:700;color:#e4e4e7;display:flex;align-items:center;gap:6px} .mdl-sb{font-size:10px;color:#52525b;margin-top:1px} .mdl-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e} .mdl-badge{font-size:9px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.04);color:#52525b;font-weight:700} .ref-preview{display:none;align-items:center;gap:10px;padding:8px 10px;margin-bottom:8px;background:rgba(249,115,22,.08);border:1px dashed rgba(249,115,22,.4);border-radius:10px;position:relative} .ref-preview.on,.ref-preview[style*="flex"]{display:flex!important} .ref-preview img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex-shrink:0} .ref-preview-info{flex:1;min-width:0} .ref-preview-name{font-size:12px;color:#e4e4e7;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ref-preview-hint{font-size:10px;color:#f97316;margin-top:2px} .ref-preview-del{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:rgba(239,68,68,.1);color:#ef4444;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} .btn-attach{width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:#0b0b0f;color:#a1a1aa;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px} .btn-attach:hover{background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.4);color:#f97316} </style>  <style> /* === PAGE-SEEDANCE-VIDEO START === */ /* На /design/video/seedance: используем фон+navbar от page-nano, но форму НЕ режем, она внутри своего контейнера. */ body.page-seedance-video > div[style*="padding-top:84px"]{overflow:visible!important;height:auto!important} body.page-seedance-video > div[style*="padding-top:84px"] > div{height:auto!important;overflow:visible!important;display:block!important} /* Скрываем hero-блок PRAIT с логотипом и копирайтом */ body.page-seedance-video .foot{display:none!important} /* Видим, что мозг применился: для безопасности дублируем подключение фона */ html.has-page-nano body.page-seedance-video{background:transparent!important} /* === PAGE-SEEDANCE-VIDEO END === */ </style> <style> /* === SEEDANCE-TOOLS-STYLES START === */ /* Универсальные стили для микрофона/закрепить — работают и в Nano, и в Seedance */ #seedanceForm .btn-pin, #seedanceForm .btn-voice, #seedanceForm .btn-attach{ flex-shrink:0; width:42px;height:42px; display:inline-flex;align-items:center;justify-content:center; border-radius:10px; background:#0b0b0f; border:1px solid var(--border); color:#a1a1aa; cursor:pointer; transition:all .18s ease; font-size:15px; padding:0; position:relative; } #seedanceForm .btn-pin:hover, #seedanceForm .btn-voice:hover, #seedanceForm .btn-attach:hover{ color:#fff; border-color:rgba(249,115,22,.4); background:rgba(249,115,22,.08); } #seedanceForm .btn-pin.on{ color:#f97316; background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.5); } #seedanceForm .btn-voice.recording{ color:#ef4444; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.5); animation: voicePulse 1.2s ease-in-out infinite; } @keyframes voicePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.5); } 50%{ box-shadow:0 0 0 6px rgba(239,68,68,0); } } /* Скрываем текстовые подсказки — оставляем только иконки */ #seedanceForm .pin-hint, #seedanceForm .voice-hint{ display:none !important; } /* Статус-блок голосового ввода */ #voiceStatusSeedance{ display:none; align-items:center; gap:10px; margin:8px 0; padding:8px 12px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); border-radius:10px; color:#fca5a5; font-size:13px; } #voiceStatusSeedance.on{ display:flex; } #voiceStatusSeedance .vdot{ width:10px;height:10px;border-radius:50%; background:#ef4444; animation: voicePulse 1s ease-in-out infinite; flex-shrink:0; } #voiceStatusSeedance .vtext{ flex:1; line-height:1.4; } #voiceStatusSeedance .vtext .voice-interim{ opacity:.6; font-style:italic; } #voiceStatusSeedance .vlang{ flex-shrink:0; padding:3px 9px; border-radius:6px; background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4); font-size:11px; font-weight:700; letter-spacing:.5px; cursor:pointer; user-select:none; transition:all .15s ease; } #voiceStatusSeedance .vlang:hover{ background:rgba(239,68,68,.25); transform:translateY(-1px); } /* === SEEDANCE-TOOLS-STYLES END === */ </style>  <script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github-dark.min.css"> <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/python.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/javascript.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/bash.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/json.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/sql.min.js"></script> <script> // Инициализация после загрузки CDN document.addEventListener('DOMContentLoaded', function(){ if (typeof hljs !== 'undefined') { hljs.registerLanguage('python', window.hljsPython || hljs.getLanguage('python')); hljs.registerLanguage('javascript', window.hljsJavascript || hljs.getLanguage('javascript')); hljs.registerLanguage('bash', window.hljsBash || hljs.getLanguage('bash')); hljs.registerLanguage('json', window.hljsJson || hljs.getLanguage('json')); hljs.registerLanguage('sql', window.hljsSql || hljs.getLanguage('sql')); } if (typeof marked !== 'undefined') { marked.setOptions({ breaks: true, gfm: true, highlight: function(code, lang) { if (typeof hljs !== 'undefined' && lang && hljs.getLanguage(lang)) { try { return hljs.highlight(code, { language: lang }).value; } catch(e) {} } return code; } }); } }); </script>  </head> <body class=""> <nav class="nav" id="nav"><div class="ni"> <a href="/" class="logo-link"> <img src="/static/logo.png" alt="PRAIT" class="logo-img"> <span class="logo-sub"><span class="lp">Pr</span>ofessional <span class="la">AI</span> <span class="lt">T</span>echnology</span> </a> <div class="nl" id="navLinks"> <a href="/design" class="nk">Дизайн</a><a href="/chat" class="nk">AI Чат</a><a href="/video" class="nk">Видео</a><a href="/music" class="nk">Музыка</a> </div> <div class="nr"> <a href="/login" class="btn bo bs">Войти</a><a href="https://t.me/prait_bot" class="btn bp bs" target="_blank"><i class="fab fa-telegram"></i> Бот</a> <button class="mmb" onclick="document.getElementById('navLinks').classList.toggle('open')"><i class="fas fa-bars"></i></button> </div></div></nav> <div class="tc" id="toasts"></div> <div id="siteNotifs" style="position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;flex-direction:column"></div> <div class="lb" id="lightbox"><div class="lbc" id="lbClose" title="Закрыть (Esc)"><i class="fas fa-xmark" style="pointer-events:none"></i></div><div class="lbd" style="display:flex;gap:8px;flex-wrap:wrap" onclick="event.stopPropagation()"><a id="lbDlWebp" href="" download class="btn bo bs" title="WebP (быстро, ~300КБ)"><i class="fas fa-bolt"></i> WebP</a><a id="lbDlPng" href="" download class="btn bp bs" title="Оригинал PNG (макс. качество)"><i class="fas fa-download"></i> PNG</a></div><div id="lbWrap" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none"><img id="lbImg" src="" alt="" style="transition:transform .15s;cursor:grab;max-width:90vw;max-height:90vh;border-radius:12px;object-fit:contain"></div></div> <div style="padding-top:96px"><div class="sec" style="padding-top:24px"> <div class="sh"><h2>Тарифы</h2><p>Выбери подходящий пакет токенов</p></div> <h3 style="font-size:20px;font-weight:700;margin-bottom:20px;text-align:center"><i class="fas fa-cube" style="color:var(--ac)"></i> Пакеты токенов</h3> <div class="pg"> <div class="card pc " style="padding:32px"> <div style="font-size:16px;font-weight:700;margin-bottom:16px">⚡ Микро</div> <div class="pa">60<span> ₽</span></div> <div style="color:var(--ac2);font-size:14px;font-weight:600;margin:12px 0">2 токенов</div> <div style="color:var(--t3);font-size:13px;margin-bottom:20px">2 токена (1 генерация)</div> <a href="/login" class="btn bo" style="width:100%">Войти для покупки</a> </div> <div class="card pc " style="padding:32px"> <div style="font-size:16px;font-weight:700;margin-bottom:16px">🔹 Малый</div> <div class="pa">199<span> ₽</span></div> <div style="color:var(--ac2);font-size:14px;font-weight:600;margin:12px 0">20 токенов</div> <div style="color:var(--t3);font-size:13px;margin-bottom:20px">20 токенов (~10 генераций)</div> <a href="/login" class="btn bo" style="width:100%">Войти для покупки</a> </div> <div class="card pc pp" style="padding:32px"> <div class="pbdg">Хит</div> <div style="font-size:16px;font-weight:700;margin-bottom:16px">🔸 Средний</div> <div class="pa">499<span> ₽</span></div> <div style="color:var(--ac2);font-size:14px;font-weight:600;margin:12px 0">60 токенов</div> <div style="color:var(--t3);font-size:13px;margin-bottom:20px">60 токенов (~30 генераций)</div> <a href="/login" class="btn bo" style="width:100%">Войти для покупки</a> </div> <div class="card pc " style="padding:32px"> <div style="font-size:16px;font-weight:700;margin-bottom:16px">🔶 Большой</div> <div class="pa">999<span> ₽</span></div> <div style="color:var(--ac2);font-size:14px;font-weight:600;margin:12px 0">140 токенов</div> <div style="color:var(--t3);font-size:13px;margin-bottom:20px">140 токенов (~70 генераций)</div> <a href="/login" class="btn bo" style="width:100%">Войти для покупки</a> </div> <div class="card pc " style="padding:32px"> <div style="font-size:16px;font-weight:700;margin-bottom:16px">💠 Мега</div> <div class="pa">1999<span> ₽</span></div> <div style="color:var(--ac2);font-size:14px;font-weight:600;margin:12px 0">320 токенов</div> <div style="color:var(--t3);font-size:13px;margin-bottom:20px">320 токенов (~160 генераций)</div> <a href="/login" class="btn bo" style="width:100%">Войти для покупки</a> </div> </div> <h3 style="font-size:20px;font-weight:700;margin:48px 0 20px;text-align:center"><i class="fas fa-crown" style="color:var(--ac)"></i> Подписки</h3> <div class="pg"> <div class="card pc " style="padding:32px"> <div style="font-size:16px;font-weight:700;margin-bottom:16px">🥉 Lite</div> <div class="pa">299<span> ₽/мес</span></div> <div style="color:var(--ac2);font-size:14px;font-weight:600;margin:12px 0">40 токенов</div> <div style="color:var(--t3);font-size:13px;margin-bottom:20px">40 токенов/мес (~20 генераций)</div> <a href="/login" class="btn bo" style="width:100%">Войти для покупки</a> </div> <div class="card pc pp" style="padding:32px"> <div class="pbdg">Выгодно</div> <div style="font-size:16px;font-weight:700;margin-bottom:16px">🥈 Basic</div> <div class="pa">699<span> ₽/мес</span></div> <div style="color:var(--ac2);font-size:14px;font-weight:600;margin:12px 0">120 токенов</div> <div style="color:var(--t3);font-size:13px;margin-bottom:20px">120 токенов/мес (~60 генераций)</div> <a href="/login" class="btn bo" style="width:100%">Войти для покупки</a> </div> <div class="card pc " style="padding:32px"> <div style="font-size:16px;font-weight:700;margin-bottom:16px">🥇 Pro</div> <div class="pa">1299<span> ₽/мес</span></div> <div style="color:var(--ac2);font-size:14px;font-weight:600;margin:12px 0">320 токенов</div> <div style="color:var(--t3);font-size:13px;margin-bottom:20px">320 токенов/мес (~160 генераций)</div> <a href="/login" class="btn bo" style="width:100%">Войти для покупки</a> </div> </div> </div></div> <footer class="foot"> <a href="/" style="display:inline-block;margin-bottom:12px"><img src="/static/logo.png" alt="PRAIT" style="height:60px"></a> <div style="margin-bottom:8px"><span style="color:var(--ac)">Pr</span>ofessional <span style="color:var(--ac)">AI</span> <span style="color:var(--ac)">T</span>echnology</div> <div>© 2025 PRAIT. Все права защищены.</div> </footer> <script> window.addEventListener('scroll',()=>{document.getElementById('nav').classList.toggle('scrolled',window.scrollY>50)}); (function(){fetch('/api/notifications').then(function(r){return r.json()}).then(function(d){var c=document.getElementById('siteNotifs');if(!c||!d.notifications||!d.notifications.length)return;var nb=document.getElementById('nav');d.notifications.forEach(function(n){var el=document.createElement('div');el.style.cssText='padding:10px 24px;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;';if(n.type==='success')el.style.cssText+='background:#22c55e;color:#fff;';else if(n.type==='warning')el.style.cssText+='background:#f59e0b;color:#000;';else if(n.type==='promo')el.style.cssText+='background:linear-gradient(90deg,#f97316,#ea580c);color:#fff;';else el.style.cssText+='background:#3b82f6;color:#fff;';var html='<span><b>'+n.title+'</b> — '+n.message+'</span>';if(n.link_text&&n.link_url)html+='<a href="'+n.link_url+'" style="padding:3px 12px;border-radius:6px;background:rgba(255,255,255,.2);color:inherit;text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap">'+n.link_text+'</a>';html+='<span style="cursor:pointer;opacity:.7;font-size:16px;margin-left:8px" onclick="closeNotif(this)">✕</span>';el.innerHTML=html;c.appendChild(el)});adjustForNotifs()}).catch(function(){})})(); function closeNotif(el){el.parentElement.remove();adjustForNotifs()} function adjustForNotifs(){var c=document.getElementById('siteNotifs');var nb=document.getElementById('nav');if(c&&nb){var h=c.offsetHeight;nb.style.top=h+'px';document.body.style.paddingTop=h+'px'}} document.addEventListener('click',function(e){ // Закрываем профиль если клик вне const pw=document.getElementById('profileWr'); if(pw&&!pw.contains(e.target))pw.classList.remove('open'); // Закрываем выпадашку если клик не по кнопке и не внутри выпадашки // НО: клики по ссылкам .nav-dd-item должны проходить (это навигация) document.querySelectorAll('.nav-dd-wr').forEach(function(dd){ if(!dd.contains(e.target))dd.classList.remove('open'); }); }); function toggleNavDD(id){ var el=document.getElementById(id); if(!el)return; var wasOpen=el.classList.contains('open'); document.querySelectorAll('.nav-dd-wr').forEach(function(dd){dd.classList.remove('open')}); var pw=document.getElementById('profileWr'); if(pw)pw.classList.remove('open'); if(!wasOpen)el.classList.add('open'); } // Закрытие по Escape document.addEventListener('keydown',function(e){ if(e.key==='Escape'){ document.querySelectorAll('.nav-dd-wr').forEach(function(dd){dd.classList.remove('open')}); var pw=document.getElementById('profileWr');if(pw)pw.classList.remove('open'); } }); let curAR='1:1'; function setAR(el){document.querySelectorAll('.arb').forEach(b=>b.classList.remove('active'));el.classList.add('active');curAR=el.dataset.ar} function toast(msg,type='info'){const c=document.getElementById('toasts');const t=document.createElement('div');t.className='toast '+(type=='success'?'ts':type=='error'?'te':'tif');t.textContent=msg;c.appendChild(t);setTimeout(()=>t.remove(),4000)} let lbS=1,lbX=0,lbY=0,lbDr=false,lbSX,lbSY; function openLB(src,pngSrc){lbS=1;lbX=0;lbY=0;const lb=document.getElementById('lightbox');const img=document.getElementById('lbImg');img.src=src;const dlWebp=document.getElementById('lbDlWebp');const dlPng=document.getElementById('lbDlPng');if(dlWebp)dlWebp.href=src;if(dlPng)dlPng.href=pngSrc||src;img.style.transform='translate(0px,0px) scale(1)';lb.classList.add('active');document.body.classList.add('lb-open')} function closeLB(){lbS=1;lbX=0;lbY=0;document.getElementById('lightbox').classList.remove('active');document.body.classList.remove('lb-open')} document.addEventListener('click',function(e){if(e.target.closest&&e.target.closest('#lbClose')){e.stopPropagation();e.preventDefault();closeLB()}},true); function lbT(){document.getElementById('lbImg').style.transform='translate('+lbX+'px,'+lbY+'px) scale('+lbS+')'} document.addEventListener('keydown',function(e){if(e.key==='Escape')closeLB()}); document.addEventListener('DOMContentLoaded',function(){ var w=document.getElementById('lbWrap');if(!w)return; w.addEventListener('wheel',function(e){e.preventDefault();lbS=Math.max(0.5,Math.min(8,lbS+(e.deltaY>0?-0.15:0.15)));if(lbS<=1){lbX=0;lbY=0}lbT()},{passive:false}); w.addEventListener('mousedown',function(e){if(lbS<=1)return;lbDr=true;lbSX=e.clientX-lbX;lbSY=e.clientY-lbY;e.preventDefault()}); document.addEventListener('mousemove',function(e){if(!lbDr)return;lbX=e.clientX-lbSX;lbY=e.clientY-lbSY;lbT()}); document.addEventListener('mouseup',function(){lbDr=false}); w.addEventListener('dblclick',function(){if(lbS>1){lbS=1;lbX=0;lbY=0}else{lbS=3}lbT()}); document.getElementById('lightbox').addEventListener('click',function(e){if(e.target.closest&&(e.target.closest('#lbClose')||e.target.closest('.lbd')||e.target.id==='lbImg'))return;if(lbS<=1)closeLB()}); var ld=0; w.addEventListener('touchstart',function(e){if(e.touches.length===2){ld=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)}else if(e.touches.length===1&&lbS>1){lbDr=true;lbSX=e.touches[0].clientX-lbX;lbSY=e.touches[0].clientY-lbY}}); w.addEventListener('touchmove',function(e){e.preventDefault();if(e.touches.length===2){var d=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY);lbS=Math.max(0.5,Math.min(8,lbS+(d-ld)*0.01));ld=d;if(lbS<=1){lbX=0;lbY=0}lbT()}else if(lbDr&&e.touches.length===1){lbX=e.touches[0].clientX-lbSX;lbY=e.touches[0].clientY-lbSY;lbT()}},{passive:false}); w.addEventListener('touchend',function(e){if(e.touches.length<2)lbDr=false}); }); function selectSession(sid, prompt){ document.querySelectorAll('.sess-item').forEach(el=>{ el.classList.remove('active'); el.style.background=''; }); const el=document.querySelector('[data-sid="'+sid+'"]'); if(el){el.classList.add('active');el.style.background='rgba(249,115,22,.06)';} document.getElementById('sessionId').value=sid; if(prompt){document.getElementById('prompt').value=prompt;} } function generate(){ const p=document.getElementById('prompt'); if(!p.value.trim()){toast('Введите промпт','error');return} const btn=document.getElementById('genBtn'); const ld=document.getElementById('genLoading'); const res=document.getElementById('genResult'); btn.disabled=true;btn.innerHTML='<div class="ld" style="width:20px;height:20px;border-width:2px;display:inline-block;vertical-align:middle;margin-right:8px"></div> Генерация...'; ld.style.display='block';res.style.display='none'; const fd=new FormData(); fd.append('prompt',p.value); fd.append('aspect_ratio',curAR); const sid=document.getElementById('sessionId'); if(sid)fd.append('session_id',sid.value); fetch('/generate',{method:'POST',body:fd}) .then(r=>r.json()).then(d=>{ ld.style.display='none'; if(d.error){ const errLow=d.error.toLowerCase(); if(errLow.includes('недостаточно')||errLow.includes('токен')){ const curBal=document.querySelector('.nt')?.textContent?.match(/\d+/)?.[0]||'0'; showNoTokens(curBal); } else { toast(d.error,'error'); } btn.disabled=false;btn.innerHTML='✦ Сгенерировать — 2 токена'; return } document.getElementById('genImg').src=d.image_url; document.getElementById('genDl').href=d.image_url; document.getElementById('genPrompt').textContent=d.prompt; document.getElementById('genTokens').textContent='Осталось: '+d.tokens+' токенов'; if(sid&&d.session_id)sid.value=d.session_id; res.style.display='block'; const nt=document.querySelector('.nt'); if(nt)nt.innerHTML=d.tokens+'<span style="font-size:10px;color:#71717a"> ток.</span>'; const tr=document.getElementById('tokensRight'); if(tr)tr.textContent=d.tokens; const bt=document.getElementById('balanceTop'); if(bt)bt.innerHTML=d.tokens+' <span style="font-size:11px;color:#52525b">ток.</span>'; btn.disabled=false;btn.innerHTML='✦ Сгенерировать — 2 токена'; toast('Готово!','success'); }).catch(e=>{ ld.style.display='none'; toast('Ошибка: '+e.message,'error'); btn.disabled=false;btn.innerHTML='✦ Сгенерировать — 2 токена'; }); } function buyPkg(id){ const fd=new FormData();fd.append('pay_type','package');fd.append('item_id',id); fetch('/pay/create',{method:'POST',body:fd}).then(r=>r.json()).then(d=>{ if(d.error){toast(d.error,'error');return} if(d.url)window.location.href=d.url; }).catch(()=>toast('Ошибка','error')); } function buySub(id){ const fd=new FormData();fd.append('pay_type','subscription');fd.append('item_id',id); fetch('/pay/create',{method:'POST',body:fd}).then(r=>r.json()).then(d=>{ if(d.error){toast(d.error,'error');return} if(d.url)window.location.href=d.url; }).catch(()=>toast('Ошибка','error')); } function copyRef(el){navigator.clipboard.writeText(el.textContent.trim()).then(()=>toast('Ссылка скопирована!','success')).catch(()=>toast('Скопируйте вручную','info'))} function withdraw(){ const amt=document.getElementById('wdAmount').value; const card=document.getElementById('wdCard').value; if(!amt||!card){toast('Заполните все поля','error');return} const fd=new FormData();fd.append('amount',amt);fd.append('card',card); fetch('/partner/withdraw',{method:'POST',body:fd}).then(r=>r.json()).then(d=>{ if(d.error){toast(d.error,'error');return} toast('Заявка отправлена!','success'); setTimeout(()=>location.reload(),1500); }).catch(()=>toast('Ошибка','error')); } // Модалка "Недостаточно токенов" function showNoTokens(currentBalance){ const m = document.getElementById('noTokensModal'); if (!m) return; const b = document.getElementById('ntBalance'); const c = document.getElementById('ntCurrent'); if (b) b.textContent = currentBalance || 0; if (c) c.textContent = currentBalance || 0; m.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeNoTokens(){ const m = document.getElementById('noTokensModal'); if (!m) return; m.classList.remove('active'); document.body.style.overflow = ''; } // Закрытие по Escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { const m = document.getElementById('noTokensModal'); if (m && m.classList.contains('active')) closeNoTokens(); } }); // Клик вне модалки document.addEventListener('click', (e) => { const m = document.getElementById('noTokensModal'); if (m && e.target === m) closeNoTokens(); }); // ========== Управление сессиями ========== let _sessDeleteId = null; function sessRename(e, sid) { e.preventDefault(); e.stopPropagation(); const titleEl = document.querySelector('.sess-title[data-sid="' + sid + '"]'); if (!titleEl) return; const original = titleEl.getAttribute('data-orig') || titleEl.textContent.trim(); titleEl.setAttribute('contenteditable', 'true'); titleEl.focus(); // Выделить весь текст const range = document.createRange(); range.selectNodeContents(titleEl); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); const save = async () => { titleEl.removeAttribute('contenteditable'); const newTitle = titleEl.textContent.trim(); if (!newTitle || newTitle === original) { titleEl.textContent = original; return; } try { const r = await fetch('/api/session/' + sid + '/rename', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({title: newTitle}) }); const d = await r.json(); if (!r.ok || d.error) { titleEl.textContent = original; if (typeof toast === 'function') toast(d.error || 'Ошибка', 'error'); else if (typeof showToast === 'function') showToast(d.error || 'Ошибка', 'error'); } else { titleEl.setAttribute('data-orig', d.title); titleEl.textContent = d.title; if (typeof toast === 'function') toast('Переименовано', 'success'); else if (typeof showToast === 'function') showToast('Переименовано', 'success'); } } catch(err) { titleEl.textContent = original; if (typeof toast === 'function') toast('Ошибка сети', 'error'); } }; titleEl.onblur = save; titleEl.onkeydown = (ev) => { if (ev.key === 'Enter') { ev.preventDefault(); titleEl.blur(); } if (ev.key === 'Escape') { ev.preventDefault(); titleEl.textContent = original; titleEl.blur(); } }; } function sessDelete(e, sid) { e.preventDefault(); e.stopPropagation(); _sessDeleteId = sid; window._sessDeleteFromSeedance = false; const m = document.getElementById('sessDeleteModal'); if (m) { m.classList.add('active'); document.body.style.overflow = 'hidden'; } } // Глобальная функция удаления для Seedance — должна быть доступна сразу при загрузке HTML window.sessDeleteSeedance = function(e, sid) { e.preventDefault(); e.stopPropagation(); _sessDeleteId = sid; window._sessDeleteFromSeedance = true; const m = document.getElementById('sessDeleteModal'); if (m) { m.classList.add('active'); document.body.style.overflow = 'hidden'; } }; function sessDeleteCancel() { _sessDeleteId = null; const m = document.getElementById('sessDeleteModal'); if (m) { m.classList.remove('active'); document.body.style.overflow = ''; } } async function sessDeleteConfirm() { if (!_sessDeleteId) return; const sid = _sessDeleteId; const m = document.getElementById('sessDeleteModal'); try { const r = await fetch('/api/session/' + sid, { method: 'DELETE' }); const d = await r.json(); if (!r.ok || d.error) { if (typeof toast === 'function') toast(d.error || 'Ошибка', 'error'); return; } // Если удалили текущую открытую — редирект на /design/nano-banana const isActive = location.pathname.includes('/design/nano-banana/' + sid); if (isActive) { location.href = '/design/nano-banana'; } else { // Убираем строку из UI const row = document.querySelector('.sess-row[data-sid="' + sid + '"]'); if (row) row.remove(); if (typeof toast === 'function') toast('Сессия удалена', 'success'); } } catch(err) { if (typeof toast === 'function') toast('Ошибка сети', 'error'); } finally { sessDeleteCancel(); } } // Escape для модалки удаления document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { const m = document.getElementById('sessDeleteModal'); if (m && m.classList.contains('active')) sessDeleteCancel(); } }); document.addEventListener('click', (e) => { const m = document.getElementById('sessDeleteModal'); if (m && e.target === m) sessDeleteCancel(); }); </script>  <div id="noTokensModal" style="display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px"> <div style="max-width:420px;width:100%;background:linear-gradient(135deg,#18181b 0%,#0b0b0f 100%);border:1px solid rgba(249,115,22,.25);border-radius:20px;padding:32px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:ntModalIn .25s ease-out">  <div onclick="closeNoTokens()" style="position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#71717a;font-size:16px;transition:.15s" onmouseover="this.style.background='rgba(255,255,255,.08)';this.style.color='#fff'" onmouseout="this.style.background='rgba(255,255,255,.04)';this.style.color='#71717a'">✕</div>  <div style="width:72px;height:72px;border-radius:20px;background:var(--glow);display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 20px">💎</div>  <div style="text-align:center;margin-bottom:24px"> <div style="font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:8px">Недостаточно токенов</div> <div style="font-size:14px;color:#a1a1aa;line-height:1.5">Для генерации нужно <b style="color:var(--ac)">2 токена</b>, а у вас на балансе<br><span id="ntBalance" style="color:#fff;font-weight:600">0</span> токенов</div> </div>  <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px"> <div style="text-align:center;padding:14px 10px;border-radius:12px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12)"> <div style="font-size:11px;color:#71717a;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px">У вас</div> <div style="font-size:22px;font-weight:800;color:var(--ac)" id="ntCurrent">0</div> </div> <div style="text-align:center;padding:14px 10px;border-radius:12px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12)"> <div style="font-size:11px;color:#71717a;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px">Нужно</div> <div style="font-size:22px;font-weight:800;color:#22c55e">2</div> </div> </div>  <div style="display:flex;flex-direction:column;gap:8px"> <a href="/pricing" class="btn bp" style="width:100%;padding:14px;font-size:14px;border-radius:12px;font-weight:700"><i class="fas fa-bolt"></i> Пополнить баланс</a> <button onclick="closeNoTokens()" class="btn bo" style="width:100%;padding:12px;font-size:13px;border-radius:12px;background:transparent;border:1px solid var(--border);color:#71717a">Отмена</button> </div>  <div style="margin-top:18px;padding:12px;border-radius:10px;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.1);font-size:12px;color:#a1a1aa;text-align:center;line-height:1.5"> 💡 Или пригласите друга — <a href="/partner" style="color:var(--bl);text-decoration:none;font-weight:600">получите 15% от его пополнений</a> </div> </div> </div> <style> @keyframes ntModalIn { from { opacity:0; transform:scale(.9) translateY(10px) } to { opacity:1; transform:scale(1) translateY(0) } } #noTokensModal.active { display:flex !important } </style>  <div id="sessDeleteModal" style="display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px"> <div style="max-width:400px;width:100%;background:linear-gradient(135deg,#18181b 0%,#0b0b0f 100%);border:1px solid rgba(239,68,68,.25);border-radius:20px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:ntModalIn .2s ease-out"> <div style="width:60px;height:60px;border-radius:16px;background:rgba(239,68,68,.1);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px">🗑</div> <div style="text-align:center;margin-bottom:20px"> <div style="font-size:18px;font-weight:800;color:#fff;margin-bottom:6px">Удалить сессию?</div> <div style="font-size:13px;color:#a1a1aa;line-height:1.5">Сессия будет удалена безвозвратно.<br><b style="color:#22c55e">Ваши изображения останутся</b> в галерее.</div> </div> <div style="display:flex;gap:8px"> <button onclick="sessDeleteCancel()" class="btn bo" style="flex:1;padding:11px;font-size:13px;border-radius:10px;background:transparent;border:1px solid var(--border);color:#71717a">Отмена</button> <button onclick="sessDeleteConfirm()" class="btn" style="flex:1;padding:11px;font-size:13px;border-radius:10px;background:#ef4444;color:#fff;border:none;font-weight:600"><i class="fas fa-trash"></i> Удалить</button> </div> </div> </div> <style> #sessDeleteModal.active { display:flex !important } .sess-title[contenteditable="true"] { background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.3) !important; outline:none; padding:2px 6px; border-radius:4px; margin:-2px -6px; cursor:text; } </style>  <script> (function(){ function earlyScroll(){ var el = document.getElementById('chatStream'); if(!el) return false; // Сбрасываем smooth на всякий случай прямо в стиле var prev = el.style.scrollBehavior; el.style.scrollBehavior = 'auto'; el.scrollTop = el.scrollHeight; el.style.scrollBehavior = prev; return true; } // Пытаемся как можно раньше if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', earlyScroll); } else { earlyScroll(); } // Дублируем перед самым показом страницы (load) window.addEventListener('load', earlyScroll); })(); </script>   <script> (function(){ function reveal(){ document.documentElement.classList.remove('fouc-loading'); } if (document.readyState === 'complete') { reveal(); } else { window.addEventListener('load', reveal); // страховка: если load не сработал за 1.5с — всё равно показать setTimeout(reveal, 1500); } })(); </script> <!-- FOUC_FIX_REVEAL