:root{
  --bg:#ffffff; --side:#f9f9f9; --ink:#0d0d0d; --ink-2:#5d5d5d; --muted:#8f8f8f;
  --line:#e5e5e5; --line-2:#d9d9d9; --hover:#ececec; --soft:#f4f4f4; --active:#ececec;
  --pop:#ffffff; --shadow:0 4px 24px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.05);
  --accent:#0d0d0d; --on-accent:#ffffff; --hint:#f3f7ff; --hint-line:#dbe6fb; --hint-ink:#1f4fb6;
  --warn:#fff6e5; --warn-line:#f4dfb3; --warn-ink:#8a5a00; --err:#b42318;
  --f:ui-sans-serif,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#212121; --side:#181818; --ink:#ececec; --ink-2:#b4b4b4; --muted:#8e8e8e;
  --line:#343434; --line-2:#424242; --hover:#2a2a2a; --soft:#303030; --active:#2f2f2f;
  --pop:#2f2f2f; --shadow:0 8px 32px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);
  --accent:#ececec; --on-accent:#0d0d0d; --hint:#1d2533; --hint-line:#2c3a52; --hint-ink:#9cc0ff;
  --warn:#2d2513; --warn-line:#4a3b17; --warn-ink:#f1c35f; --err:#ff8a80; color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:inherit}
:focus-visible{outline:2px solid #2f6fed;outline-offset:2px}

.app{display:flex;height:100dvh;overflow:hidden}
/* ---------- sidebar ---------- */
.side{width:260px;flex:none;background:var(--side);display:flex;flex-direction:column;padding:8px 8px 10px;gap:2px}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand img{border-radius:6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;font-size:14.5px}
.nav-item:hover{background:var(--hover)}
.nav-item.on{background:var(--active)}
.side-sec{color:var(--muted);font-size:13px;padding:18px 10px 6px}
.chat-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:1px;margin:0 -2px;padding:0 2px}
.chat-list a{display:block;padding:7px 10px;border-radius:10px;text-decoration:none;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-list a:hover{background:var(--hover)}
.chat-list a.on{background:var(--active)}
.chat-list .empty{color:var(--muted);font-size:13px;padding:6px 10px}
.side-foot{display:flex;align-items:center;gap:10px;padding:10px 8px 4px;border-top:1px solid var(--line);margin-top:6px}
.avatar{width:32px;height:32px;border-radius:50%;background:#6b5bd2;color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.who{display:flex;flex-direction:column;line-height:1.25;font-size:14px}
.who{flex:1;min-width:0}
.who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{color:var(--muted);font-size:12.5px}
.side-foot{flex-wrap:wrap}
.topup-btn{order:5;width:100%;margin-top:4px;border:1px solid var(--line-2);background:var(--bg);border-radius:10px;padding:6px 10px;font-size:13.5px;white-space:nowrap}
.topup-btn:hover{background:var(--hover)}
.side-foot .icon-btn{width:30px;height:30px}
.side-foot .icon-btn svg{width:17px;height:17px}
.topup-prices{color:var(--ink-2);font-size:13px}
.low-balance{color:var(--err)!important}
/* админка */
.adm h2{font-size:17px;font-weight:600;margin:28px 0 10px}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.adm-stats div{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.adm-stats b{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.adm-stats span{color:var(--muted);font-size:12.5px}
.adm-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.adm-tbl{border-collapse:collapse;width:100%;font-size:13.5px;min-width:640px}
.adm-tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line)}
.adm-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-tbl tr:last-child td{border-bottom:0}
.adm-tbl .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.adm-tbl .pos{color:#1d7a4b}.adm-tbl .neg{color:var(--ink-2)}
.adm-top{display:flex;gap:6px;align-items:center}
.adm-top input{width:84px;border:1px solid var(--line-2);border-radius:8px;padding:4px 8px;background:var(--bg)}
.adm-top button,.adm-form button{border:0;background:var(--accent);color:var(--on-accent);border-radius:8px;padding:5px 10px;font-size:12.5px}
.adm-form{display:grid;gap:12px}
.adm-grid{display:grid;grid-template-columns:120px repeat(3,minmax(70px,110px));gap:6px 8px;align-items:center;font-size:13.5px}
.adm-grid input,.adm-form textarea,.adm-form .one input{border:1px solid var(--line-2);border-radius:8px;padding:6px 8px;background:var(--bg);width:100%}
.adm-form textarea{min-height:70px;font:inherit;font-size:13.5px}
.adm-form label{display:grid;gap:4px;font-size:13px;color:var(--ink-2)}
.adm-form .one{display:flex;gap:16px;flex-wrap:wrap}
.adm-form .one label{width:200px}
.adm-hint{color:var(--muted);font-size:12.5px;margin:0}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.topbar{height:52px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px}
.top-title{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.view{flex:1;min-height:0;overflow:auto}
.icon-btn{border:0;background:transparent;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.only-mobile{display:none}

/* ---------- home ---------- */
.home{max-width:1060px;margin:0 auto;padding:clamp(24px,9vh,110px) 24px 60px}
.home h1,.lib h1{font-size:32px;font-weight:500;letter-spacing:-.02em;margin:0 0 22px}
.tabs{display:flex;gap:4px;margin:30px 0 16px}
.tabs button{border:0;background:transparent;border-radius:999px;padding:7px 16px;color:var(--ink-2);font-size:15px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--soft);color:var(--ink);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{position:relative;border:0;padding:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--soft);text-align:left;transition:transform .15s}
.tile:hover{transform:translateY(-2px)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.tile span{position:absolute;left:14px;bottom:12px;right:14px;z-index:1;color:#fff;font-size:15px;font-weight:500;line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.tile small{display:block;font-size:12px;font-weight:400;opacity:.85}
.tile.fit::before{content:"";position:absolute;inset:-24px;background:var(--src) center/cover;filter:blur(22px) brightness(.72) saturate(1.1)}
.tile.fit img{position:absolute;inset:12px 12px 64px;width:calc(100% - 24px);height:calc(100% - 76px);object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.28))}
.tile.fit::after{height:30%;background:linear-gradient(transparent,rgba(0,0,0,.35))}

/* ---------- composer ---------- */
.composer{background:var(--bg);border:1px solid var(--line);border-radius:28px;box-shadow:0 1px 6px rgba(0,0,0,.05),0 8px 30px rgba(0,0,0,.035);padding:10px 10px 8px 12px;position:relative}
.composer .row{display:flex;align-items:flex-end;gap:6px}
.composer textarea{flex:1;border:0;outline:0;background:transparent;resize:none;min-height:40px;max-height:220px;padding:8px 6px;font-size:16px;line-height:1.5}
.composer textarea::placeholder{color:var(--muted)}
.plus{border:1px solid var(--line);width:36px;height:36px;border-radius:50%;margin-bottom:2px;color:var(--ink)}
.tools{align-items:center!important;gap:6px!important;margin-top:4px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;border:1px solid var(--line);background:transparent;border-radius:999px;padding:0 12px 0 10px;font-size:14px;color:var(--ink-2)}
.chip:hover{background:var(--hover);color:var(--ink)}
.chip svg{width:17px;height:17px}
.chip .chev{width:14px;height:14px;margin-left:-2px}
.chip.ghost{border-color:var(--hint-line);color:var(--hint-ink);background:var(--hint)}
.est{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:nowrap;padding:0 4px}
.send{width:36px;height:36px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.send:disabled{opacity:.25;cursor:default}
.send svg{stroke-width:2}
.plus-wrap,.pop-wrap{position:relative}
.menu,.pop{position:absolute;z-index:40;background:var(--pop);border-radius:16px;box-shadow:var(--shadow);padding:6px}
.menu{left:0;top:44px;width:330px}
.composer-dock .menu,.composer-dock .pop{top:auto;bottom:44px}
.menu button,.menu-toggle{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:10px;cursor:pointer}
.menu button:hover,.menu-toggle:hover{background:var(--hover)}
.menu span{display:flex;flex-direction:column;line-height:1.3;flex:1}
.menu b{font-weight:500;font-size:14.5px}
.menu small{color:var(--muted);font-size:12.5px}
.switch{appearance:none;width:34px;height:20px;border-radius:999px;background:var(--line-2);position:relative;cursor:pointer;transition:background .15s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch:checked{background:#2f6fed}
.switch:checked::after{transform:translateX(14px)}
.fmt-pop{left:0;top:42px;width:320px;max-height:min(460px,60vh);overflow:auto}
.fmt-pop h4{margin:8px 10px 4px;font-size:12px;font-weight:500;color:var(--muted)}
.fmt-pop button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 10px;border-radius:10px;text-align:left}
.fmt-pop button:hover{background:var(--hover)}
.fmt-pop button[aria-selected="true"]{background:var(--active)}
.fmt-pop .shape{width:22px;height:22px;display:grid;place-items:center;flex:none}
.fmt-pop .shape i{display:block;border:1.6px solid currentColor;border-radius:3px}
.fmt-pop span{display:flex;flex-direction:column;line-height:1.3;font-size:14.5px}
.fmt-pop small{color:var(--muted);font-size:12.5px}
.set-pop{left:0;top:42px;width:340px;padding:12px 14px}
.set-row{display:grid;gap:6px;margin-bottom:12px}
.set-row label{font-size:13px;color:var(--muted)}
.seg{display:flex;background:var(--soft);border-radius:10px;padding:3px;gap:2px}
.seg button{flex:1;border:0;background:transparent;border-radius:8px;padding:6px 8px;font-size:13.5px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.set-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4}
.attach{display:flex;flex-wrap:wrap;gap:8px;padding:4px 2px 8px 2px}
.att{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:4px;max-width:320px}
.att img{width:52px;height:52px;border-radius:10px;object-fit:cover;display:block}
.att.link{padding:8px 34px 8px 10px;font-size:13.5px;gap:8px}
.att.link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att .x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);display:grid;place-items:center;padding:0}
.att.link .x{top:50%;right:6px;transform:translateY(-50%);background:var(--soft);color:var(--ink-2)}
.att .x svg{width:12px;height:12px;stroke-width:2.4}
.hints{display:flex;flex-direction:column;gap:6px;padding:0 0 8px}
.hints:empty{display:none}
.hint{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--hint-line);background:var(--hint);color:var(--ink);border-radius:14px;padding:8px 10px 8px 12px;font-size:13.5px;line-height:1.4;animation:fade .2s}
.hint.warn{background:var(--warn);border-color:var(--warn-line)}
.hint .ico{color:var(--hint-ink);margin-top:1px}
.hint.warn .ico{color:var(--warn-ink)}
.hint .ico svg{width:16px;height:16px}
.hint p{margin:0;flex:1}
.hint b{font-weight:600}
.hint button{border:0;background:var(--bg);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:500;white-space:nowrap;box-shadow:0 0 0 1px var(--hint-line)}
.hint .close{background:transparent;box-shadow:none;padding:0 2px;color:var(--muted)}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ---------- chat ---------- */
#view-chat{display:flex;flex-direction:column;overflow:hidden}
#view-chat[hidden]{display:none!important}
.thread{flex:1;overflow:auto;padding:12px 24px 24px}
.thread > *{max-width:768px;margin-left:auto;margin-right:auto}
.composer-dock{padding:0 24px 10px;max-width:816px;width:100%;margin:0 auto}
.disclaimer{text-align:center;color:var(--muted);font-size:12px;margin:8px 0 0}
.msg-user{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:24px}
.bubble{background:var(--soft);border-radius:22px;padding:10px 16px;max-width:70%;white-space:pre-wrap;word-wrap:break-word}
.u-atts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.u-atts img{width:96px;height:96px;object-fit:cover;border-radius:14px;display:block}
.u-atts .lnk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-size:13px;max-width:320px;text-decoration:none}
.u-atts .lnk span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-set{color:var(--muted);font-size:12px}
.msg-ai{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.src{border:1px solid var(--line);border-radius:16px;padding:10px 12px;font-size:13.5px;display:grid;gap:6px;max-width:560px}
.src a{font-weight:500;text-decoration:none}
.src a:hover{text-decoration:underline}
.src .specs{display:flex;flex-wrap:wrap;gap:4px}
.src .specs span{background:var(--soft);border-radius:8px;padding:2px 8px;font-size:12.5px;color:var(--ink-2)}
.src .lab{color:var(--muted);font-size:12px}
.gen{position:relative;width:min(100%,520px);border-radius:18px;overflow:hidden;background:var(--soft)}
.gen img{display:block;width:100%;height:auto;cursor:zoom-in}
.gen .acts{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.gen:hover .acts,.gen:focus-within .acts{opacity:1}
.gen .acts button,.gen .acts a{width:34px;height:34px;border-radius:10px;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px)}
.gen .acts svg{width:18px;height:18px}
.loading{position:relative;width:min(100%,420px);border-radius:18px;overflow:hidden;background:var(--soft)}
.loading::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:220% 100%;animation:shim 1.6s linear infinite}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .loading::before{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);background-size:220% 100%}}
.loading span{position:absolute;left:14px;top:12px;font-size:14px;color:var(--ink-2)}
@keyframes shim{from{background-position:120% 0}to{background-position:-100% 0}}
.meta{color:var(--muted);font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.meta .row-acts{display:flex;gap:2px;margin-left:-8px}
.meta .row-acts button{border:0;background:transparent;border-radius:8px;padding:4px 8px;color:var(--ink-2);font-size:13px;display:inline-flex;gap:5px;align-items:center}
.meta .row-acts button:hover{background:var(--hover);color:var(--ink)}
.meta .row-acts svg{width:16px;height:16px}
.err{color:var(--err);font-size:14px;border:1px solid color-mix(in srgb,var(--err) 35%,transparent);border-radius:14px;padding:10px 12px;max-width:560px}
.searchres{font-size:12.5px;color:var(--muted)}

/* ---------- library ---------- */
.lib{max-width:1100px;margin:0 auto;padding:28px 24px 60px}
.lib-grid{columns:4 220px;column-gap:10px}
.lib-grid a{display:block;margin-bottom:10px;border-radius:14px;overflow:hidden;break-inside:avoid;background:var(--soft)}
.lib-grid img{display:block;width:100%}
.lib-empty{color:var(--muted)}

/* ---------- modal / viewer ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;z-index:60;padding:16px}
.modal-box{background:var(--pop);border-radius:20px;padding:20px;width:min(460px,100%);box-shadow:var(--shadow)}
.modal-box h3{margin:0 0 4px;font-size:18px;font-weight:600}
.modal-box p{margin:0 0 14px;color:var(--ink-2);font-size:14px}
.modal-box input{width:100%;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;background:var(--bg);outline:0}
.modal-box input:focus{border-color:#2f6fed}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.btn{border:0;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:8px 16px;font-weight:500}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}
.viewer{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:70;display:grid;place-items:center;padding:24px}
.viewer img{max-width:100%;max-height:100%;border-radius:8px}
.viewer-close{position:absolute;top:14px;right:14px;color:#fff;background:rgba(255,255,255,.12)}
.scrim{display:none}

/* ---------- mobile ---------- */
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .only-mobile{display:grid}
  .side{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
  .app.menu-open .side{transform:none}
  .app.menu-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:45}
  .home{padding:16px 16px 40px}
  .home h1{font-size:26px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tile{border-radius:14px}
  .thread{padding:8px 16px 20px}
  .composer-dock{padding:0 12px 8px}
  .bubble{max-width:85%}
  .menu,.fmt-pop,.set-pop{width:min(330px,calc(100vw - 32px))}
  .est{order:10;width:100%;margin:0;padding:2px 4px 0}
  .lib{padding:16px}
}

/* гость: вместо баланса и выхода — кнопка входа */
.guest #logout{display:none}
.guest .topup-btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.guest .topup-btn:hover{opacity:.9;background:var(--ink)}
.adm-form select{border:1px solid var(--line-2);border-radius:10px;padding:7px 9px;font:inherit;background:var(--bg);color:var(--ink)}

/* промокоды */
.est s{color:var(--muted);margin-right:2px}
.promo-form{display:flex;gap:8px;margin:4px 0 0}
.promo-form input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:12px;padding:9px 12px;font:inherit;background:var(--bg);color:var(--ink);text-transform:uppercase}
.promo-msg{margin:6px 0 0;min-height:1.3em;font-size:13.5px;color:#b42318}
.promo-msg.ok{color:#1a7f37}
.adm-promos{display:grid;gap:6px;justify-items:start}
.adm-promos small{color:var(--muted)}
.adm-promos input{border:1px solid var(--line-2);border-radius:8px;padding:5px 7px;font:inherit;background:var(--bg);color:var(--ink)}
.adm-form .adm-add,.adm-form .adm-del{border:1px solid var(--line-2);background:var(--bg);border-radius:8px;padding:4px 10px;cursor:pointer;color:var(--ink)}