/* ═══════════════════════════════════════════════════════════════════
   ToolsKitty — сцены с Hello Kitty на экранах-заглушках и в окне запуска (kitty.js).
   Тот же персонаж, что в заставке: голова и бант из стикера OzonTools
   (mark/kitty-head.webp, mark/kitty-bow.webp, tools/kitty/build.py), глаза, нос
   и лапки нарисованы здесь. Она стоит за карточкой экрана (или за окном запуска)
   и выглядывает над её верхним краем, как над плиткой логотипа в заставке.
   Все размеры — в единицах стикера: --u задаёт kitty.js, начало .kx — середина
   верхнего края карточки; что ниже края, срезает .ks-clip.
   ═══════════════════════════════════════════════════════════════════ */

/* сцена над карточкой: её низ — верхний край карточки, срез — по сцене. Только в окне запуска он
   тянется вверх до края экрана, чтобы улетающим ракетам было куда лететь: большой срез — большой слой,
   а его айфон дорисовывает с задержкой */
.ks{position:relative;height:calc(var(--u) * var(--h));pointer-events:none;-webkit-user-select:none;user-select:none}
.ks-clip{position:absolute;left:0;right:0;bottom:0;top:0;overflow:hidden}
.batch-ks .ks-clip{top:-100vh}
.kx{position:absolute;left:50%;bottom:0;width:0;height:0}
.kx-k,.kx-head,.kx-eyes,.kx-g{position:absolute;left:0;top:0;width:0;height:0}
.kx-g{left:calc(var(--u) * var(--x, 0));top:calc(var(--u) * var(--y, 0))}
/* каждая подвижная часть держит свой слой всю сцену: слой, который появляется на время
   движения и пропадает после, сдвигал мелкие детали (глаз) на долю пикселя */
.kx-k,.kx-head,.kx-eyes,.kx-eyes i,.kx-g{will-change:transform}
.kx-arc,.kx-fx{will-change:transform,opacity}

.kx-hb,.kx-bow{position:absolute}
.kx-hb{left:calc(var(--u) * -212);top:calc(var(--u) * -246);width:calc(var(--u) * 425);height:calc(var(--u) * 354)}
.kx-bow{left:calc(var(--u) * -21);top:calc(var(--u) * -268);width:calc(var(--u) * 199);height:calc(var(--u) * 171)}
.kx-hb img,.kx-bow img{display:block;width:100%;height:100%}
.kx-eyes{top:calc(var(--u) * -49)}
.kx-eyes i{position:absolute;top:calc(var(--u) * -17.5);left:calc(var(--u) * -96.3);width:calc(var(--u) * 25);height:calc(var(--u) * 35);border-radius:50%;background:#030212}
.kx-eyes i+i{left:calc(var(--u) * 71.3)}
.kx-nose{position:absolute;left:calc(var(--u) * -17);top:calc(var(--u) * -30);width:calc(var(--u) * 34);height:calc(var(--u) * 24);box-sizing:border-box;
    border:calc(var(--u) * 4.5) solid #030212;border-radius:50%;background:#e8e61f}
/* закрытый глаз дугой: подмигивание, «фух», радость */
.kx-arc{position:absolute;top:calc(var(--u) * -14);width:calc(var(--u) * 40);height:calc(var(--u) * 28);overflow:visible;opacity:0}
.kx-arc path{fill:none;stroke:#030212;stroke-width:7.5;stroke-linecap:round}
.kx-al{left:calc(var(--u) * -103.8)}
.kx-ar{left:calc(var(--u) * 63.8)}

/* нарисованные части: svg, у которого единица viewBox — единица стикера, а начало
   координат — точка, вокруг которой часть поворачивается (её .kx-g) */
.kx-p{position:absolute;overflow:visible;left:calc(var(--u) * var(--l));top:calc(var(--u) * var(--t));
    width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--hh))}
/* контур — широкая обводка под заливкой, толщиной как у стикера */
.kx-o{fill:#030212;stroke:#030212;stroke-width:28;stroke-linejoin:round}
.kx-f{fill:#f9f9f9}
.kx-s{stroke:#030212;stroke-width:26;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke}
.kx-t{stroke:#030212;stroke-width:12;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke}
.kx-fx{opacity:0}
/* лампочки сервера: тусклая основа, цветные слои поверх проявляются прозрачностью */
.kx-led{position:absolute;left:calc(var(--u) * var(--x));top:calc(var(--u) * var(--y));width:calc(var(--u) * 18);height:calc(var(--u) * 18);
    margin:calc(var(--u) * -9) 0 0 calc(var(--u) * -9);border-radius:50%;background:#4d4690;box-shadow:0 0 0 calc(var(--u) * 3.5) #030212}
.kx-led b{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:50%;opacity:0;will-change:opacity}
.kx-lr{background:#ff5d6c}
.kx-lg{background:#45e08c}
.kx-lc{background:#5fd8ff}

/* ─── экраны-заглушки: сцена над карточкой ─── */
.no-access.has-stub{min-height:100vh;min-height:100dvh;padding:24px 20px calc(24px + env(safe-area-inset-bottom));box-sizing:border-box}
.stub{display:flex;flex-direction:column;align-items:center;width:100%;max-width:360px}
.stub-stage{width:100%}
.stub-card{position:relative;width:100%;box-sizing:border-box;padding:24px 22px 22px;border-radius:26px;background:var(--surface);
    box-shadow:var(--shadow-card);text-align:center}
.stub-ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 14px;border-radius:18px;
    background:var(--surface2);color:var(--muted)}
.stub-ico svg{width:26px;height:26px}
.stub.has-kitty .stub-ico{display:none}
.stub-card .no-access-title{margin-bottom:8px}
.stub-card .no-access-text{font-size:14px}
.stub-card .drawer__btn{margin:20px 0 0;text-decoration:none}
.stub-id{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 12px;border:0;border-radius:999px;
    background:var(--surface2);color:var(--txt2);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stub-id b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.02em;color:var(--txt)}
.stub-id:active{opacity:.7}
.stub-note{margin-top:14px;font-size:12px;font-weight:600;color:var(--muted)}

/* ─── обучение: сцена над подсказкой; голова срезана её краем, лапки лежат поверх края ─── */
.kg .kg-paws{position:absolute;left:50%;bottom:0;width:0;height:0;overflow:visible}
.kg-paw,.kg-rot,.kg-tap,.kg-mit,.kg-pt{will-change:transform,opacity}

/* ─── окно запуска: сцена над окном, поднимается и гаснет вместе с ним ─── */
#batchProgressModal .confirm-panel{overflow:visible}
.batch-ks,.batch-ks.ks{position:absolute;left:0;right:0;bottom:100%}

/* ─── плашка техработ над открытым приложением: слева Китти в каске, справа надпись.
      Без Китти (ToolsKitty выключен) — значок ключа ─── */
.maint{position:relative;display:flex;align-items:stretch;margin:4px 16px 12px;border-radius:22px;background:var(--surface);
    box-shadow:var(--shadow-card);overflow:hidden}
.maint__stage{position:relative;flex:0 0 92px;display:flex;align-items:flex-end}
/* сцена — внутри, у нижнего края плашки: из-за него Китти и выглядывает */
.maint__ks{width:100%}
.maint__ico{display:none}
.maint:not(.has-kitty) .maint__stage{display:none}
.maint:not(.has-kitty) .maint__ico{display:flex;align-items:center;justify-content:center;flex:0 0 40px;height:40px;align-self:center;
    margin:12px 0 12px 14px;border-radius:14px;background:rgba(245,158,11,.12);color:var(--orange)}
.maint__ico svg{width:20px;height:20px}
.maint__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:12px 16px 12px 4px}
.maint:not(.has-kitty) .maint__body{padding-left:12px}
.maint__title{font-size:14px;font-weight:800;letter-spacing:var(--ls-bold);color:var(--orange)}
.maint__text{margin-top:3px;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--muted)}
/* пока идут работы, кнопки действий не нажимаются */
.maint-disabled{opacity:.55;pointer-events:none}

[data-theme="light"] .maint{background:#fff}
[data-theme="light"] .maint__title{color:var(--l-amber)}
[data-theme="light"] .maint:not(.has-kitty) .maint__ico{background:rgba(194,117,18,.12);color:var(--l-amber)}
/* кнопка поддержки: на белой карточке светлой темы прежняя белая кнопка терялась */
[data-theme="light"] .stub-card{background:#fff}
[data-theme="light"] .stub-card .drawer__btn{background:var(--l-violet-tint);color:var(--l-violet);border-color:transparent;box-shadow:none}
[data-theme="light"] .stub-ico{background:var(--l-violet-tint);color:var(--l-violet)}
[data-theme="light"] .stub-id{background:var(--surface2);color:var(--txt2)}