:root{font-family:'Segoe UI Variable Text','Segoe UI',Inter,Arial,sans-serif;--radius:18px}button,input,textarea,select{font:inherit;letter-spacing:0}.sidebar nav{max-width:620px}.sidebar .nav-item{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;font-size:13px;font-weight:600;line-height:1.3;min-height:64px;padding:9px 6px;border-radius:14px;letter-spacing:0;white-space:nowrap}.sidebar .nav-item svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sidebar .nav-item.active{background:#f1f1f1;color:#111}.sidebar .nav-item:not(.active){color:#aaa}.sidebar .nav-item:hover:not(.active){background:#272727;color:#fff}.sidebar .nav-item em{display:none}.brand>svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.brand{font-size:22px;letter-spacing:-.7px}.brand-light{color:#aaa}.credits-button{gap:12px!important;padding:9px 15px!important;background:#202020!important;color:#f4f4f4!important;border:1px solid #383838!important;border-radius:14px!important}.balance-copy strong{font-size:18px!important}.balance-copy small{font-size:11px!important;color:#aaa!important}.primary-button,.secondary-button{font-size:14px;font-weight:600;min-height:46px;border-radius:12px;letter-spacing:0}.secondary-button{background:#252525;border:1px solid #414141}.primary-button{background:#f1f1f1;color:#111}.view h1{letter-spacing:-1.1px}.gallery-categories{gap:7px}.gallery-category{font-size:13px;padding:9px 13px}.pack-search input,input,textarea,select{border-radius:12px}.pack-search{flex-wrap:wrap}.pack-search input{min-width:160px}.pack-filters{flex-shrink:0}dialog{border-radius:22px!important;border-color:#3b3b3b!important;background:#191919!important;color:#f2f2f2}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-close{width:36px;height:36px;border-radius:50%;background:#303030;font-size:23px}.kit-symbols button{font-size:13px;font-weight:500}.context-preview-note{color:#858585}@media(max-width:480px){.sidebar .nav-item{font-size:12px;min-height:60px;gap:6px;padding:8px 3px}.sidebar .nav-item svg{width:22px;height:22px}.sidebar nav{gap:3px}.brand{font-size:20px}.credits-button{padding:7px 12px!important}.topbar{gap:10px}.primary-button,.secondary-button{font-size:13px}}
.sidebar .nav-item>.nav-caption{font:inherit;color:inherit;width:auto;line-height:1.3}
.sidebar .nav-item[data-view]>.nav-caption{display:block!important;width:auto!important;height:auto!important;margin:0!important;font:inherit!important;line-height:1.3!important}
.template-detail-dialog .template-download{background:#f1f1f1!important;color:#111!important;border-color:#f1f1f1}.template-detail-dialog .template-kit-button{background:#292929;color:#eee;border-color:#444}

/* Readable editor hierarchy at phone and desktop sizes. */
#editor-view{padding-top:22px;font-size:16px}
#editor-view .creation-modes{gap:10px;margin:0 0 20px}
#editor-view .creation-modes button{font-size:16px;font-weight:700;min-height:54px;line-height:1.35;padding:13px 16px}


#editor-view .upload-row .upload-button{font-size:16px}
#editor-view .upload-row strong{font-size:16px;font-weight:700}
#editor-view .upload-row small{font-size:13px;line-height:1.5}
#editor-view .editor-shortcuts button,#editor-view .quick-controls button,#editor-view .quick-edit button,#editor-view #undo-edit,#editor-view #redo-edit,#editor-view #center-emoji{font-size:15px;font-weight:650;min-height:48px}
#editor-view .editor-hint{font-size:13px;line-height:1.6}
#editor-view .stage-top{font-size:10px;font-weight:650;letter-spacing:1px}
#editor-view .stage-bottom{font-size:12px}
#editor-view .controls-panel .panel-title h2{font-size:22px;font-weight:750}
#editor-view .controls-panel .toggle-row strong{font-size:16px;font-weight:650}
#editor-view .controls-panel .toggle-row p{font-size:13px;line-height:1.5;margin-top:6px}
#editor-view .controls-panel .editor-disclosure>summary{font-size:19px;font-weight:750;line-height:1.35;min-height:62px;gap:12px}
#editor-view .controls-panel .editor-disclosure[open]>summary{color:#fff;background:#252525;border-radius:12px;padding:12px;margin-bottom:12px}
#editor-view .controls-panel .editor-disclosure>summary:after{font-size:26px;font-weight:500}
#editor-view .controls-panel .range-label,#editor-view .controls-panel .position-controls label{font-size:14px;font-weight:550}
#editor-view .effect-button strong,#editor-view .preset-button{font-size:14px;font-weight:650}
#editor-view .effect-button small,#editor-view .preset-button small{font-size:12px;line-height:1.5;font-weight:400}
#editor-view .effect-help,#editor-view .generation-form small{font-size:13px;line-height:1.55}
#editor-view .generation-title strong{font-size:18px}
#editor-view .generation-options label,#editor-view .reference-label{font-size:14px}
#editor-view .context-preview{padding:22px 0 10px;margin-top:20px}
#editor-view .context-preview .chat-preview{gap:12px;min-height:116px}
#editor-view .context-preview .chat-avatar{width:42px;height:42px;margin-top:2px;font-size:16px;font-weight:650;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:0 0 42px;border-radius:50%}
#editor-view .context-preview .chat-avatar img{display:block;width:100%;height:100%;object-fit:cover}
#editor-view .context-preview .chat-bubble{font-size:16px;line-height:1.6;min-height:60px;padding:12px 15px;gap:8px;border-radius:0 18px 18px 18px}
#editor-view .context-preview .chat-bubble canvas{width:34px;height:34px;margin:0}
#editor-view .context-preview .chat-bubble time{font-size:11px;align-self:flex-end}
#editor-view .context-preview .context-reaction{min-width:68px;min-height:46px;font-size:15px;font-weight:650;padding:6px 12px;margin-top:7px;gap:7px}
#editor-view .context-preview .context-reaction canvas{width:28px;height:28px}
.template-detail-dialog .template-prompt>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;border:1px solid #515151;background:#292929;border-radius:12px;padding:13px 16px;font-size:16px;font-weight:700;color:#fff;cursor:pointer}
.template-detail-dialog .template-prompt>summary::-webkit-details-marker{display:none}
.template-detail-dialog .template-prompt>summary:after{content:'+';font-size:27px;font-weight:400;line-height:1}
.template-detail-dialog .template-prompt[open]>summary:after{content:'−'}
.template-detail-dialog .template-prompt>summary:hover{background:#353535;border-color:#888}
.template-detail-dialog .template-prompt>summary:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-width:480px){#editor-view{padding-top:16px}#editor-view .creation-modes button{font-size:15px;padding:12px 8px}#editor-view .context-preview .chat-preview{gap:9px}#editor-view .context-preview .chat-avatar{width:36px;height:36px;flex-basis:36px}#editor-view .context-preview .chat-bubble{padding:11px 12px;font-size:15px;gap:5px}#editor-view .context-preview .chat-bubble time{padding-left:0}#editor-view .controls-panel .editor-disclosure>summary{font-size:18px}}
/* line icons instead of colour emoji */
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex-shrink:0}
.balance-add{display:grid!important;place-items:center;width:34px;height:34px;border-radius:11px;background:#f1f1f1;color:#111!important;margin-left:6px}
.balance-add .ic{width:18px;height:18px;stroke-width:2.4}
#refresh-library{gap:8px}#refresh-library .ic{width:17px;height:17px}
.animation-toggle{display:inline-flex;align-items:center;gap:6px}.animation-toggle .ic{width:15px;height:15px;stroke-width:2.4}
.animation-toggle[aria-pressed=false] .ic{fill:currentColor;stroke-width:1.5}
.pack-link>span .ic,.pack-choice>span .ic{width:24px;height:24px;color:#fff}
.pack-link>em{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2f2f2f;color:#fff}
.pack-link>em .ic{width:17px;height:17px;stroke-width:2.2}
.library-empty>span .ic{width:56px;height:56px;color:#f1f1f1;stroke-width:1.5}
/* the "Без анимации / Статический emoji · 100×100" summary above the export button is noise */
#editor-view .active-effects,#editor-view .export-summary{display:none!important}
/* Telegram Desktop uses classic scrollbars: 100vw elements overflowed sideways */
html,body{overflow-x:clip;max-width:100%}
html{scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:8px}::-webkit-scrollbar-track{background:transparent}
.export-section .gen-link{margin:14px 0 4px}
/* balance: just the number + plus */
#tokens-word{display:none!important}
.credits-button{align-items:center}.balance-copy strong{font-size:20px!important;line-height:1}
/* compact balance pill: number + plus, no empty space */
.credits-button{min-width:0!important;min-height:0!important;width:auto!important;display:inline-flex!important;align-items:center!important;gap:10px!important;padding:6px 6px 6px 14px!important;border-radius:999px!important}
.credits-button .balance-copy{flex-direction:row!important;align-items:center!important;gap:0!important}
.credits-button .balance-copy strong{font-size:18px!important;font-weight:700;color:#fff}
.balance-add{width:32px!important;height:32px!important;border-radius:50%!important;margin:0!important;padding:0!important}
/* animation toggle: playing = quiet outline button, paused = bright call to action */
.animation-toggle{cursor:pointer;border:1px solid #4a4a4a!important;background:#262626!important;color:#f1f1f1!important;opacity:1!important;transition:background .15s,transform .1s}
.animation-toggle:hover{background:#333!important}
.animation-toggle:active{transform:scale(.96)}
.animation-toggle[aria-pressed=false]{background:#f1f1f1!important;color:#111!important;border-color:#f1f1f1!important;box-shadow:0 0 0 4px #f1f1f124;animation:toggle-nudge 1.8s ease-in-out infinite}
.animation-toggle[aria-pressed=false]:hover{background:#fff!important}
@keyframes toggle-nudge{0%,100%{box-shadow:0 0 0 0 #f1f1f140}50%{box-shadow:0 0 0 6px #f1f1f100}}
@media(prefers-reduced-motion:reduce){.animation-toggle[aria-pressed=false]{animation:none}}
/* Release 1 (no AI): hide generation, templates and the token balance */
.no-ai [data-view=generate],.no-ai .nav-item[data-view=templates],.no-ai .gen-link,.no-ai .inspiration-strip,.no-ai #kit-method-field,.no-ai .credits-button,.no-ai #generate-view,.no-ai #templates-view{display:none!important}
.no-ai .sidebar nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}