/* ================== ТЕМЫ ================== */
:root{--r:18px;--r-sm:10px;--f-head:'Unbounded',system-ui,sans-serif;--f-body:'Manrope',system-ui,sans-serif;--gut:16px}
[data-theme=aurora]{--bg:#0b0b14;--bg2:#12121f;--card:rgba(255,255,255,.045);--line:rgba(255,255,255,.09);--tx:#ecebff;--mut:#9897b8;--a1:#7c5cff;--a2:#22d3ee;--a3:#f472b6;--ok:#34d399;--bad:#fb7185;--glass:blur(18px);--shadow:0 20px 60px -20px rgba(124,92,255,.35)}
[data-theme=neon]{--bg:#050505;--bg2:#0d0d0d;--card:#0f0f0f;--line:#1f1f1f;--tx:#e8ffe9;--mut:#7d8f7f;--a1:#39ff88;--a2:#ff2bd6;--a3:#00e5ff;--ok:#39ff88;--bad:#ff3b6b;--glass:none;--shadow:0 0 0 1px #39ff8833,0 0 40px -10px #39ff8855;--r:4px;--r-sm:2px}
[data-theme=paper]{--bg:#f6f1e7;--bg2:#efe7d8;--card:#fffdf8;--line:#e2d8c4;--tx:#1d1a14;--mut:#7a7262;--a1:#d9480f;--a2:#1864ab;--a3:#2b8a3e;--ok:#2b8a3e;--bad:#c92a2a;--glass:none;--shadow:4px 4px 0 #1d1a14;--r:6px;--r-sm:4px}
[data-theme=midnight]{--bg:#060b1a;--bg2:#0b1430;--card:rgba(120,160,255,.06);--line:rgba(140,170,255,.14);--tx:#e6edff;--mut:#8796c0;--a1:#3b82f6;--a2:#a78bfa;--a3:#facc15;--ok:#4ade80;--bad:#f87171;--glass:blur(14px);--shadow:0 20px 60px -25px rgba(59,130,246,.5)}
[data-theme=sunset]{--bg:#fff6f1;--bg2:#ffe9df;--card:rgba(255,255,255,.75);--line:#f6d4c6;--tx:#2a1414;--mut:#93635a;--a1:#ff5e3a;--a2:#c026d3;--a3:#f59e0b;--ok:#16a34a;--bad:#dc2626;--glass:blur(12px);--shadow:0 20px 50px -25px rgba(255,94,58,.45)}
[data-theme=neon]{--f-head:'Unbounded',monospace}
[data-theme=paper] .card,[data-theme=paper] .btn{border:1.5px solid var(--tx)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 var(--f-body);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}
a{color:var(--a1);text-decoration:none}a:hover{text-decoration:underline}
img,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.2;margin:.2em 0 .5em;letter-spacing:-.01em}
h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-top:1.2em}
code{background:var(--bg2);padding:.1em .4em;border-radius:6px;font-size:.88em;word-break:break-all}
.muted{color:var(--mut)}.sm{font-size:.86rem}.center{text-align:center}.grow{flex:1}.nowrap{white-space:nowrap}.hp{position:absolute;left:-9999px}
.pos{color:var(--ok)}.neg{color:var(--bad)}.dim{opacity:.5}

/* Фоновые пятна */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-fx i{position:absolute;width:50vmax;height:50vmax;border-radius:50%;filter:blur(90px);opacity:.25;animation:float 22s ease-in-out infinite}
.bg-fx i:nth-child(1){background:var(--a1);top:-20vmax;left:-10vmax}
.bg-fx i:nth-child(2){background:var(--a2);bottom:-25vmax;right:-15vmax;animation-delay:-8s}
.bg-fx i:nth-child(3){background:var(--a3);top:30%;left:45%;width:30vmax;height:30vmax;opacity:.12;animation-delay:-14s}
[data-theme=paper] .bg-fx,[data-theme=neon] .bg-fx i:nth-child(3){display:none}
[data-theme=neon] .bg-fx i{opacity:.08}
@keyframes float{50%{transform:translate(6vmax,4vmax) scale(1.1)}}

/* ================== КАРКАС ================== */
.wrap{max-width:1240px;margin:0 auto;padding:24px var(--gut) 60px}
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:12px max(var(--gut),calc((100vw - 1240px)/2));background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font:700 1.1rem var(--f-head);color:var(--tx);display:flex;align-items:center;gap:8px;white-space:nowrap}.logo:hover{text-decoration:none}
.logo-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-size:15px}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav>a:not(.btn):not(.balance){color:var(--mut);padding:8px 12px;border-radius:var(--r-sm);font-weight:600}
.nav>a.on,.nav>a:not(.btn):hover{color:var(--tx);background:var(--card);text-decoration:none}
.balance{font-weight:700;color:var(--tx);padding:6px 12px;border:1px solid var(--line);border-radius:99px}
.burger{display:none;margin-left:auto;background:none;border:0;width:40px;height:40px;cursor:pointer}
.burger span,.burger span:before,.burger span:after{display:block;width:22px;height:2px;background:var(--tx);position:relative;transition:.3s}
.burger span:before,.burger span:after{content:'';position:absolute}.burger span:before{top:-7px}.burger span:after{top:7px}
.nav-open .burger span{background:transparent}.nav-open .burger span:before{top:0;transform:rotate(45deg)}.nav-open .burger span:after{top:0;transform:rotate(-45deg)}

.theme-pick{position:relative}
.theme-menu{display:none;position:absolute;right:0;top:110%;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:6px;min-width:170px;box-shadow:var(--shadow);z-index:60}
.theme-pick.open .theme-menu{display:block}
.theme-menu button,.theme-card{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--tx);padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;font:600 .9rem var(--f-body)}
.theme-menu button:hover{background:var(--card)}
.sw{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid var(--line)}
.sw-aurora{background:linear-gradient(135deg,#7c5cff,#22d3ee)}.sw-neon{background:linear-gradient(135deg,#050505 50%,#39ff88 50%)}.sw-paper{background:linear-gradient(135deg,#f6f1e7 50%,#d9480f 50%)}.sw-midnight{background:linear-gradient(135deg,#060b1a,#3b82f6)}.sw-sunset{background:linear-gradient(135deg,#ff5e3a,#c026d3)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.theme-card{border:1px solid var(--line)}.theme-card.on{border-color:var(--a1);box-shadow:0 0 0 2px var(--a1)}

/* ================== КОМПОНЕНТЫ ================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);margin-bottom:16px}
.glass{box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--tx);font:700 .95rem var(--f-body);cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:linear-gradient(135deg,var(--a1),color-mix(in srgb,var(--a1) 60%,var(--a2)));color:#fff;border-color:transparent;box-shadow:0 8px 24px -8px var(--a1)}
[data-theme=neon] .btn.primary{color:#000;background:var(--a1)}
[data-theme=paper] .btn.primary{box-shadow:3px 3px 0 var(--tx)}
.btn.ghost{background:transparent}.btn.sm{padding:7px 14px;font-size:.85rem}.btn.lg{padding:15px 28px;font-size:1.05rem}.btn.wide{width:100%}
.icon-btn{background:none;border:1px solid transparent;color:var(--mut);border-radius:var(--r-sm);width:36px;height:36px;cursor:pointer;font-size:1rem;display:inline-grid;place-items:center;transition:.2s}
.icon-btn:hover{background:var(--card);color:var(--tx);border-color:var(--line);text-decoration:none}.icon-btn.on{color:var(--a3)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:99px;border:1px solid var(--line);font-size:.8rem;font-weight:600;background:var(--card);color:var(--tx);cursor:default}
button.chip{cursor:pointer}button.chip:hover{border-color:var(--a1)}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.chip.mine{border-style:dashed}
.pill{display:inline-block;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:.85rem;font-weight:600}
.badge{background:var(--bad);color:#fff;border-radius:99px;font-size:.72rem;padding:1px 7px;margin-left:auto;font-style:normal}
.alert{padding:12px 16px;border-radius:var(--r-sm);margin:0 0 16px;border:1px solid}
.alert.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.alert.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.wrap-row{margin-bottom:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.inline{display:inline}

.form{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:500}
input,select,textarea{width:100%;font:inherit;color:var(--tx);background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;outline:none;transition:border-color .2s,box-shadow .2s}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--a1)}
input[type=range]{padding:0;accent-color:var(--a1);background:none;border:0}
input:focus,select:focus,textarea:focus{border-color:var(--a1);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 20%,transparent)}
textarea{resize:vertical}

.seg{display:inline-flex;gap:4px;padding:4px;background:var(--bg2);border:1px solid var(--line);border-radius:calc(var(--r-sm) + 4px);flex-wrap:wrap}
.seg button,.seg a{background:none;border:0;color:var(--mut);padding:7px 14px;border-radius:var(--r-sm);font:600 .88rem var(--f-body);cursor:pointer}
.seg .on{background:var(--card);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.15)}.seg a:hover{text-decoration:none}
.seg.center{display:flex;width:max-content;margin:0 auto 28px}

.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;color:var(--mut);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.tbl th,.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl.compact input,.tbl.compact select{padding:6px 8px;font-size:.85rem;min-width:90px}.w-s{max-width:80px}.w-xs{max-width:60px}
.table-wrap{overflow-x:auto}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--tx)}.list-row:hover{text-decoration:none}
.pager{display:flex;gap:6px;justify-content:center;margin:20px 0}.pager a{padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx)}.pager a.on{background:var(--a1);color:#fff;border-color:var(--a1)}
.crumbs{font-size:.9rem;color:var(--mut);margin-bottom:12px}

/* ================== ГЛАВНАЯ ================== */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:40px 0 30px}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);margin:18px 0}
.grad{background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;transition:opacity .3s,transform .3s}
.grad.swap{opacity:0;transform:translateY(10px)}
.lead{font-size:1.15rem;color:var(--mut);max-width:560px}
.hero-demo{padding:0;overflow:hidden;transform:perspective(900px) rotateY(-6deg) rotateX(3deg)}
.demo-bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}.demo-bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.demo-bar i:first-child{background:#ff5f57}.demo-bar i:nth-child(2){background:#febc2e}.demo-bar i:nth-child(3){background:#28c840}
.demo-chat{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:220px}
.msg{padding:12px 16px;border-radius:16px;max-width:88%;word-wrap:break-word}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--a1),color-mix(in srgb,var(--a1) 70%,var(--a2)));color:#fff;border-bottom-right-radius:4px}
[data-theme=neon] .msg.me{color:#000}
.msg.ai{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg small{display:block;opacity:.7;font-size:.75rem;margin-bottom:4px}
.typing:empty:after{content:'●●●';letter-spacing:3px;animation:blink 1s infinite}@keyframes blink{50%{opacity:.3}}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 50px}
.stats-row div{text-align:center;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.stats-row b{display:block;font:700 1.9rem var(--f-head);background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-row span{color:var(--mut);font-size:.9rem}
.h1{font-size:clamp(1.8rem,4vw,2.6rem)}.h2{font-size:clamp(1.4rem,3vw,2rem);margin:50px 0 22px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tile{color:var(--tx);transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.tile:hover{transform:translateY(-4px);border-color:var(--a1);box-shadow:var(--shadow);text-decoration:none}
.tile-ico{font-size:2.2rem;display:block;margin-bottom:6px}
.masonry{columns:4 220px;column-gap:14px}
.masonry figure{margin:0 0 14px;break-inside:avoid;border-radius:var(--r);overflow:hidden;position:relative;border:1px solid var(--line);cursor:pointer}
.masonry img,.masonry video{width:100%;transition:transform .5s}.masonry figure:hover img{transform:scale(1.05)}
.masonry figcaption{position:absolute;inset:auto 0 0;padding:30px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-size:.82rem;opacity:0;transition:.3s;display:flex;flex-direction:column}
.masonry figure:hover figcaption{opacity:1}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);display:flex;flex-direction:column}
.steps li:before{content:counter(s);font:700 2.4rem var(--f-head);color:var(--a1);line-height:1;margin-bottom:10px}
.steps span{color:var(--mut)}
.review .stars{color:var(--a3);letter-spacing:2px}.review.pending{border-style:dashed}
.faq details{cursor:pointer;padding:16px 22px}.faq summary{font-weight:700;list-style:none;display:flex;justify-content:space-between}
.faq summary:after{content:'+';font-size:1.4rem;color:var(--a1);transition:.3s}.faq details[open] summary:after{transform:rotate(45deg)}
.cta{padding:50px 22px;margin-top:50px}

/* ================== ТАРИФЫ ================== */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:start}
.plan{position:relative;display:flex;flex-direction:column;gap:6px}
.plan.hot{border-color:var(--a1);box-shadow:var(--shadow);transform:scale(1.02)}
.ribbon{position:absolute;top:16px;right:16px;background:var(--a3);color:#fff;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:99px}
.price{font:700 2.3rem var(--f-head)}.price small{font-size:.9rem;color:var(--mut)}
.ticks{list-style:none;padding:0;margin:8px 0 16px}.ticks li{padding:5px 0 5px 26px;position:relative}
.ticks li:before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}

/* ================== АВТОРИЗАЦИЯ ================== */
.auth-wrap{display:grid;place-items:center;min-height:70vh;padding:20px var(--gut)}
.auth-card{width:100%;max-width:440px}.logo-big{text-align:center}
.tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:20px;border-bottom:1px solid var(--line)}
.tabs a{text-align:center;padding:12px;color:var(--mut);font-weight:700;border-bottom:2px solid transparent}.tabs a.on{color:var(--tx);border-color:var(--a1)}.tabs a:hover{text-decoration:none}
.req{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}

/* ================== СТУДИЯ ================== */
.studio{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.studio-side{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto}
.type-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.type-tabs a{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--mut);font-size:.8rem;font-weight:600;text-align:center}
.type-tabs a span{font-size:1.4rem}.type-tabs a.on{border-color:var(--a1);color:var(--tx);background:color-mix(in srgb,var(--a1) 12%,transparent)}.type-tabs a:hover{text-decoration:none;color:var(--tx)}
.model-list{display:flex;flex-direction:column;gap:6px}
.model{flex-direction:row;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:.2s}
.model:has(input:checked){border-color:var(--a1);background:color-mix(in srgb,var(--a1) 10%,transparent)}
.model input{display:none}.model span{flex:1;display:flex;flex-direction:column}.model small{color:var(--mut);font-weight:400;font-size:.78rem;line-height:1.3}
.model em{font-style:normal;font-size:.82rem;color:var(--a3);font-weight:700;white-space:nowrap}
.mini-hist{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mini-hist a{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg2);display:grid;place-items:center;border:1px solid var(--line)}
.mini-hist img{width:100%;height:100%;object-fit:cover}
.studio-main{display:flex;flex-direction:column;min-height:calc(100vh - 140px);padding:0;overflow:hidden}
.out{flex:1;padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 290px)}
.out .empty{margin:auto;text-align:center;color:var(--mut)}.big-ico{font-size:3.5rem;display:block;opacity:.6}
.out .msg.ai{max-width:100%}
.out.image .res,.out.video .res,.out.music .res{align-self:center;max-width:720px;width:100%}
.res img{border-radius:var(--r);box-shadow:var(--shadow);cursor:zoom-in}.res video{border-radius:var(--r);width:100%}.res audio{width:100%}
.res-bar{display:flex;gap:6px;margin-top:8px;justify-content:flex-end;flex-wrap:wrap}
.res-prompt{font-size:.85rem;color:var(--mut);margin:6px 0 0}
.presets{display:flex;gap:6px;padding:0 22px 10px;overflow-x:auto;scrollbar-width:none}.presets::-webkit-scrollbar{display:none}.presets .chip{white-space:nowrap}
.composer{border-top:1px solid var(--line);padding:14px 22px;background:var(--bg2)}
.composer textarea{border:0;background:transparent;padding:6px 0;box-shadow:none!important;max-height:240px;min-height:44px}
.composer-bar{display:flex;align-items:center;gap:6px}
.loader{display:flex;align-items:center;gap:12px;color:var(--mut)}
.loader i{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--a1);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{aspect-ratio:1;max-width:520px;width:100%;align-self:center;border-radius:var(--r);background:linear-gradient(110deg,var(--bg2) 30%,var(--card) 50%,var(--bg2) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.md p{margin:.4em 0}.md pre{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;overflow-x:auto;font-size:.85rem;position:relative}
.md pre .cp{position:absolute;top:6px;right:6px}.md ul,.md ol{padding-left:22px}.md h1,.md h2,.md h3{font-size:1.1rem}
.msg-tools{display:flex;gap:2px;margin-top:6px;opacity:.6}.msg:hover .msg-tools{opacity:1}.msg-tools .icon-btn{width:28px;height:28px;font-size:.85rem}

/* ================== КАБИНЕТ / АДМИНКА ================== */
.cab{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start}
.cab-side{position:sticky;top:80px;display:flex;flex-direction:column;gap:2px}
.cab-side nav{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.cab-side nav a{display:flex;align-items:center;padding:9px 12px;border-radius:var(--r-sm);color:var(--mut);font-weight:600;font-size:.92rem}
.cab-side nav a.on,.cab-side nav a:hover{background:color-mix(in srgb,var(--a1) 12%,transparent);color:var(--tx);text-decoration:none}
.avatar{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));display:grid;place-items:center;font:700 1.5rem var(--f-head);color:#fff;margin-bottom:8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.kpi{display:flex;flex-direction:column;gap:4px;margin:0}.kpi span{color:var(--mut);font-size:.85rem;font-weight:600}.kpi b{font:700 1.5rem var(--f-head)}.kpi small{color:var(--mut)}
.kpi.accent{background:linear-gradient(135deg,color-mix(in srgb,var(--a1) 25%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--a1) 40%,transparent)}
.kpi .btn{align-self:flex-start;margin-top:6px}
.bar{height:8px;background:var(--bg2);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--a1),var(--a2))}
.spark{display:flex;align-items:flex-end;gap:4px;height:90px}.spark i{flex:1;background:linear-gradient(var(--a1),var(--a2));border-radius:4px 4px 0 0;min-height:4px}
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.work{padding:12px;display:flex;flex-direction:column;gap:8px;margin:0}.work img{border-radius:var(--r-sm);aspect-ratio:1;object-fit:cover;width:100%}
.work-text{font-size:.85rem;max-height:160px;overflow:hidden;mask-image:linear-gradient(#000 70%,transparent)}
.work-bar{display:flex;align-items:center;gap:2px;margin-top:auto}.work-bar small{flex:1}
.copy-row{display:flex;gap:8px;margin:14px 0}.share{margin-top:8px}
.chat-log{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.rate{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}.rate input{display:none}
.rate label{font-size:1.8rem;color:var(--line);cursor:pointer}.rate input:checked~label,.rate label:hover,.rate label:hover~label{color:var(--a3)}
.dot-live{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2s infinite;vertical-align:middle}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}}
.lg-in{color:var(--a1)}.lg-out{color:var(--a3)}
.prose{max-width:820px;margin:0 auto}
.admin-plans .form{margin:0}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:100;display:grid;place-items:center;padding:20px;cursor:zoom-out}.lightbox img{max-height:92vh;border-radius:8px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--tx);color:var(--bg);padding:12px 22px;border-radius:99px;font-weight:600;z-index:110;transition:transform .3s;max-width:calc(100vw - 32px)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ================== ФУТЕР ================== */
.foot{border-top:1px solid var(--line);padding:40px max(var(--gut),calc((100vw - 1240px)/2)) 20px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.foot-grid div{display:flex;flex-direction:column;gap:6px}.foot-grid a:not(.logo){color:var(--mut)}.foot-grid h4{margin-top:0}

/* ================== АДАПТИВ ================== */
@media (max-width:1024px){.studio{grid-template-columns:260px 1fr}.hero{gap:28px}}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:61px 0 auto;flex-direction:column;align-items:stretch;background:var(--bg);padding:16px var(--gut);border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .3s;max-height:calc(100vh - 61px);overflow:auto}
  .nav-open .nav{transform:none}
  .nav>a,.nav .btn{text-align:center}.theme-menu{position:static;box-shadow:none;margin-top:6px}
  .hero{grid-template-columns:1fr;text-align:center;padding-top:20px}.hero .row{justify-content:center}.lead{margin:0 auto}.hero-demo{transform:none}
  .stats-row{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}
  .studio,.cab{grid-template-columns:1fr}.studio-side,.cab-side{position:static;max-height:none}
  .cab-side nav{flex-direction:row;overflow-x:auto;scrollbar-width:none}.cab-side nav a{white-space:nowrap}.avatar,.cab-side>b,.cab-side>span{display:none}
  .studio-main{min-height:70vh}.out{max-height:60vh}
  .foot-grid{grid-template-columns:1fr 1fr}.plan.hot{transform:none}
}
@media (max-width:520px){
  :root{--gut:12px}.card{padding:16px}.wrap{padding-top:16px}
  .foot-grid{grid-template-columns:1fr}.masonry{columns:2 140px}
  .composer{padding:10px 12px}.out{padding:14px}.presets{padding:0 12px 8px}
  .kpis{grid-template-columns:1fr 1fr}.kpi b{font-size:1.15rem}
  .btn.lg{padding:13px 20px}.seg.center{width:100%}.seg.center button{flex:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Подсказки и обучение в админке ===== */
.hint{border-left:3px solid var(--a1);padding:14px 20px}
.hint summary{cursor:pointer;font-weight:700;list-style:none}.hint summary::-webkit-details-marker{display:none}
.hint ul{margin:10px 0 4px;padding-left:20px}.hint li{margin:4px 0;color:var(--mut)}.hint li b{color:var(--tx)}
.checklist{list-style:none;padding:0;margin:14px 0 0}.checklist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.checklist li.ok{color:var(--mut);text-decoration:line-through}.checklist .btn{margin-left:auto;text-decoration:none}
.learn-article ol li,.learn-article ul li{margin:8px 0}.learn-article .tbl{margin:12px 0}
.text-row{padding:14px 18px;margin-bottom:10px}.text-row code{font-size:.8rem;color:var(--mut)}
.text-row.changed{border-left:3px solid var(--a3)}.text-row input,.text-row textarea{margin-top:8px}
.sticky-save{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:flex-end}
.announce{background:linear-gradient(90deg,var(--a1),var(--a2));color:#fff;text-align:center;padding:8px 16px;font-weight:600;font-size:.92rem}
.announce a{color:#fff;text-decoration:underline}