/* Dota 2 Grid Studio — редактор «Фокус» (1b): холст на весь экран, всё в плавающих панелях.
   Тёплый графит, оранжевый акцент, Onest + JetBrains Mono. Иконки: 24px, линия 1.75, currentColor. */
:root {
  --bg: oklch(0.13 0.004 60);
  --bg-dot: oklch(0.3 0.005 60);
  --panel: oklch(0.2 0.005 60 / 0.92);
  --panel-solid: oklch(0.2 0.005 60);
  --field: oklch(0.25 0.005 60);
  --field-hover: oklch(0.28 0.005 60);
  --active: oklch(0.3 0.005 60);
  --line: oklch(0.28 0.005 60);
  --line-soft: oklch(0.24 0.005 60);
  --ink: oklch(0.95 0.005 60);
  --ink-2: oklch(0.8 0.01 60);
  --muted: oklch(0.62 0.01 60);
  --faint: oklch(0.48 0.01 60);
  --accent: oklch(0.68 0.19 38);
  --accent-hi: oklch(0.72 0.17 38);
  --accent-ink: #140c08;
  --accent-soft: oklch(0.68 0.19 38 / 0.14);
  --accent-line: oklch(0.45 0.12 38);
  --primary-bg: oklch(0.96 0.005 60);
  --primary-fg: #141210;
  --ok: oklch(0.78 0.15 150);
  --danger: oklch(0.68 0.17 30);
  --warn: oklch(0.82 0.13 80);
  --ok-bg: oklch(0.78 0.15 150 / 0.14);
  --bad-bg: oklch(0.68 0.17 30 / 0.16);
  --warn-bg: oklch(0.82 0.13 80 / 0.14);
  --track: oklch(0.32 0.005 60);
  --tip-bg: oklch(0.3 0.005 60);
  --backdrop: oklch(0.1 0.004 60 / 0.62);
  --toast: oklch(0.26 0.005 60);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 12px 40px rgba(0, 0, 0, .4);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --font: "Onest", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  color-scheme: dark;
}
/* светлая тема — тот же тёплый графит, вывернутый наизнанку */
:root[data-theme="light"] {
  --bg: oklch(0.955 0.004 60);
  --bg-dot: oklch(0.82 0.006 60);
  --panel: oklch(0.995 0.002 60 / 0.94);
  --panel-solid: oklch(0.995 0.002 60);
  --field: oklch(0.945 0.004 60);
  --field-hover: oklch(0.915 0.005 60);
  --active: oklch(0.9 0.006 60);
  --line: oklch(0.88 0.006 60);
  --line-soft: oklch(0.92 0.005 60);
  --ink: oklch(0.2 0.005 60);
  --ink-2: oklch(0.36 0.01 60);
  --muted: oklch(0.52 0.01 60);
  --faint: oklch(0.7 0.01 60);
  --accent: oklch(0.64 0.2 38);
  --accent-hi: oklch(0.56 0.18 38);
  --accent-ink: #fff;
  --accent-soft: oklch(0.64 0.2 38 / 0.1);
  --accent-line: oklch(0.8 0.1 38);
  --primary-bg: oklch(0.2 0.005 60);
  --primary-fg: #fff;
  --ok: oklch(0.58 0.15 150);
  --danger: oklch(0.58 0.2 30);
  --warn: oklch(0.6 0.13 70);
  --track: oklch(0.86 0.006 60);
  --tip-bg: oklch(0.2 0.005 60);
  --backdrop: oklch(0.95 0.004 60 / 0.6);
  --toast: oklch(0.22 0.005 60);
  --shadow-sm: 0 1px 2px rgba(40, 30, 20, .08);
  --shadow: 0 1px 2px rgba(40, 30, 20, .05), 0 10px 32px rgba(40, 30, 20, .1);
  --shadow-lg: 0 24px 70px rgba(40, 30, 20, .18);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--ink); font: 13px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
/* плавная смена темы — класс вешается на мгновение при переключении */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease) !important; }
button:focus { outline: none; }
button:focus-visible, a:focus-visible, .input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
button, input, select, textarea { font: inherit; color: inherit; }
kbd { font: 10.5px var(--mono); color: var(--muted); background: var(--field); border-radius: 5px; padding: 1px 5px; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--mono); font-size: 12px; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; border: 0; background: var(--field); color: var(--ink-2); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s, transform .15s var(--spring); }
.btn:hover { background: var(--field-hover); color: var(--ink); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--field); }
.btn.primary { background: var(--primary-bg); color: var(--primary-fg); font-weight: 600; padding: 0 16px; }
.btn.primary:hover { opacity: .88; }
.btn.accent { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.accent:hover { filter: brightness(1.08); }
.btn.danger:hover { color: var(--danger); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.block { width: 100%; }
.btn.on { background: var(--accent); color: var(--accent-ink); }
.btn:disabled, .icon-btn:disabled { opacity: .35; pointer-events: none; }
.link { background: none; border: 0; padding: 0; color: var(--accent-hi); cursor: pointer; font-size: 12.5px; align-self: flex-start; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
#btnClear { color: var(--danger); }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 15px; transition: background .15s, color .15s, transform .15s var(--spring); }
.icon-btn:hover { background: var(--field); color: var(--ink); }
.icon-btn:active { transform: scale(.9); }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn.xs { width: 24px; height: 24px; border-radius: 7px; }
.icon-btn.xs svg.i { width: 15px; height: 15px; }

/* ---------- подсказки ---------- */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; z-index: 60; pointer-events: none; white-space: nowrap;
  top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--tip-bg); color: var(--ink); font: 500 11.5px var(--font); padding: 5px 8px; border-radius: 7px; box-shadow: var(--shadow);
  animation: tipDown .16s var(--ease) .35s both;
}
:root[data-theme="light"] [data-tip]:hover::after { color: #fff; }
.dock [data-tip]:hover::after, .bottom-left [data-tip]:hover::after { top: auto; bottom: calc(100% + 12px); animation-name: tipUp; }
.top-actions [data-tip]:hover::after { left: auto; right: 0; transform: none; animation-name: fadeIn; }

/* ---------- холст ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* ---------- плавающие панели ---------- */
.float { position: absolute; z-index: 10; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; flex: none; }

/* знак + название сетки */
.brand-pill { left: 16px; top: 16px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 6px; border-radius: 12px; }
.brand-logo { display: block; width: 28px; height: 28px; flex: none; border-radius: 8px; }
.brand-logo svg { display: block; width: 100%; height: 100%; }
.lg-bg { fill: oklch(0.27 0.006 60); }
:root[data-theme="light"] .lg-bg { fill: #211e1b; }
.lg-stroke { stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 32; stroke-dashoffset: 0; animation: strokeIn .7s var(--ease) .25s both; }
.brand-logo:hover .lg-stroke { animation: strokeRedraw .6s var(--ease); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.title-input { width: 150px; height: 19px; background: transparent; border: 0; border-radius: 5px; padding: 0 4px; margin: 0 -4px; font-weight: 600; font-size: 13px; color: var(--ink); text-overflow: ellipsis; transition: background .15s, box-shadow .15s; }
.title-input:hover { background: var(--field); }
.title-input:focus { outline: 0; background: var(--field); box-shadow: 0 0 0 1.5px var(--accent); }
.brand-sub { font-size: 11px; color: var(--muted); white-space: nowrap; }
#saveState, #cloudState { transition: color .2s; }
#cloudState.saving { color: var(--accent-hi); }
#cloudState.err { color: var(--danger); }
#saveState.saving { color: var(--accent-hi); }
#saveState.saving::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 5px; vertical-align: 1px; border-radius: 50%; background: currentColor; animation: pulseDot .8s ease-in-out infinite; }
#btnMenu svg.i { width: 15px; height: 15px; transition: transform .25s var(--ease); }
#btnMenu.open svg.i { transform: rotate(180deg); }

/* переключатель «Редактор / В игре» */
.seg-switch { left: 50%; top: 16px; z-index: 30; transform: translateX(-50%); display: flex; padding: 3px; border-radius: 12px; }
.seg-switch button { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: color .2s; }
.seg-switch button:hover { color: var(--ink); }
.seg-switch button.on { color: var(--ink); }
.seg-switch button svg.i { width: 16px; height: 16px; stroke-width: 2; }
.seg-ind { position: absolute; left: 0; top: 3px; height: 34px; width: 0; border-radius: 9px; background: var(--active); transition: transform .42s var(--spring), width .42s var(--spring); }

/* действия справа */
.top-actions { position: absolute; right: 16px; top: 16px; z-index: 30; display: flex; gap: 8px; }
.top-actions .float { position: relative; }
.box { height: 38px; border-radius: 10px; }
.icon-btn.box { width: 38px; color: var(--ink-2); }
.icon-btn.box:hover { background: var(--field-hover); }
.btn.box { padding: 0 14px; font-size: 13px; color: var(--ink); background: var(--panel); }
.btn.box:hover { background: var(--field-hover); }
.btn.primary.box { padding: 0 16px; background: var(--primary-bg); color: var(--primary-fg); }
.btn.primary.box svg.i { stroke-width: 2; }
/* одна высота и один контур у всех четырёх; команды и «Импорт» — группой, главное действие отдельно */
.top-actions { align-items: center; gap: 6px; }
.top-actions .box { box-sizing: border-box; height: 38px; border: 1px solid var(--line); border-radius: 11px; position: relative; overflow: visible; transition: background .18s, border-color .18s, color .18s, box-shadow .25s, transform .3s var(--spring); }
.top-actions .btn.box { gap: 8px; }
.top-actions .btn.primary.box { margin-left: 10px; border-color: transparent; overflow: hidden; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7); }
.top-actions .box:hover { transform: translateY(-2px); border-color: var(--line-strong, var(--line)); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8); }
.top-actions .box:active { transform: translateY(0) scale(.96); transition-duration: .08s; }
.top-actions .box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.top-actions .box svg.i { transition: transform .35s var(--spring); }
.top-actions #btnCmd:hover svg.i { transform: scale(1.18) rotate(-12deg); }
.top-actions #btnPublish:hover svg.i { animation: tbUp .7s var(--ease) infinite; }
.top-actions #btnImport:hover svg.i { transform: translateY(-1px) rotate(-8deg) scale(1.1); }
.top-actions #btnExport:hover svg.i { animation: tbDown .7s var(--ease) infinite; }
.top-actions .btn.primary.box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.top-actions .btn.primary.box:hover::after { transform: translateX(120%); transition: transform .65s var(--ease); }
.top-actions .btn.primary.box:hover { opacity: 1; }
@keyframes tbUp { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
@keyframes tbDown { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .top-actions .box, .top-actions .box svg.i { transition: none; animation: none !important; } }

/* ---------- категории (слева) ---------- */
.layers { left: 16px; top: 84px; width: 220px; max-height: calc(100vh - 180px); display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.layers-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.layers-head > span:first-child { margin-right: auto; }
.layers-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.layers-list:empty { display: none; }
.lrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font-size: 13px; text-align: left; cursor: pointer; transition: background .15s, color .15s; animation: rowIn .3s var(--ease) both; }
.lrow:hover { background: var(--field); color: var(--ink); }
.lrow.on { background: var(--field-hover); color: var(--ink); }
.lrow svg.i { width: 15px; height: 15px; color: var(--muted); }
.lrow.on svg.i { color: var(--accent); }
.lrow span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow b { font: 400 12px var(--mono); color: var(--muted); }
.lmore { padding: 4px 8px; font-size: 11.5px; color: var(--faint); }
.layers-foot { font-size: 12px; color: var(--faint); line-height: 1.45; text-wrap: pretty; }
.badge { height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 6px; background: var(--field); color: var(--muted); font: 500 11px var(--mono); white-space: nowrap; transition: background .2s, color .2s; }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--danger); }
.badge.bump { animation: bump .4s var(--spring); }

/* ---------- меню ---------- */
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 10px); left: -8px; min-width: 240px; padding: 6px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); display: none; z-index: 40; transform-origin: top left; }
#mainMenu { left: auto; right: -7px; transform-origin: top right; }
.menu.open { display: block; animation: pop .16s var(--ease); }
.menu > button, .menu > a, #menuAccount > button, #menuAccount > a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink-2); font-size: 13px; text-decoration: none; transition: background .12s, color .12s, padding-left .15s var(--ease); }
.menu > button:hover, .menu > a:hover, #menuAccount > :is(button, a):hover { background: var(--field); color: var(--ink); padding-left: 13px; }
.menu > button:hover svg.i, .menu > a:hover svg.i, #menuAccount > :is(button, a):hover svg.i { color: var(--accent); }
.menu svg.i { color: var(--muted); transition: color .15s; }
.menu kbd { margin-left: auto; }
.menu hr { border: 0; height: 1px; background: var(--line); margin: 5px 6px; }
/* «богатые» меню: иконка в плитке, название и строка пояснения, разделы, тема и быстрые плитки */
.menu-rich { min-width: 340px; padding: 6px; }
.menu-rich kbd { white-space: nowrap; flex: none; }
.brand-pill .menu-wrap { position: static; }
#mainMenu { left: -1px; right: auto; top: calc(100% + 8px); transform-origin: top left; }
.menu-rich > button, #menuAccount > :is(button, a) { padding: 7px 10px 7px 7px; gap: 11px; }
.menu-rich > button:hover, #menuAccount > :is(button, a):hover { padding-left: 7px; }
.menu-rich > button > svg.i, #menuAccount > :is(button, a) > svg.i { box-sizing: border-box; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--field); color: var(--ink-2); transition: background .15s, color .15s, transform .25s var(--spring); }
.menu-rich > button:hover > svg.i, #menuAccount > :is(button, a):hover > svg.i { background: var(--accent-soft); color: var(--accent); transform: rotate(-6deg); }
.menu-rich > button.menu-hero > svg.i { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px -6px oklch(0.68 0.19 38 / .8); }
.menu-rich > button > span, #menuAccount > :is(button, a) > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--ink); font-weight: 500; }
.menu-rich > button small, #menuAccount small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.menu-sec { padding: 8px 10px 4px; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.menu-head { display: flex; align-items: center; gap: 11px; margin: -6px -6px 4px; padding: 12px 14px; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; background: linear-gradient(120deg, var(--accent-soft), transparent 70%); }
.mh-mark { width: 36px; height: 36px; flex: none; }
.menu-head b { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.menu-head small { display: block; font: 11px var(--mono); color: var(--muted); }
.menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 4px 10px; color: var(--ink-2); font-size: 13px; }
.menu-theme .seg { width: 200px; }
.menu-theme .seg button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.menu-theme .seg svg.i { width: 14px; height: 14px; }
.menu-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: 6px; }
.menu-tiles.two { grid-template-columns: 1fr 1fr; padding-top: 0; }
.menu-tiles.four { grid-template-columns: repeat(4, 1fr); }
.menu-tiles > a, .menu-tiles > button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 9px; border: 0; border-radius: 10px; background: var(--field); color: var(--ink-2); font-size: 12px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, transform .15s var(--spring); }
.menu-tiles > a:hover, .menu-tiles > button:hover { background: var(--field-hover); color: var(--ink); }
.menu-tiles > a:active, .menu-tiles > button:active { transform: scale(.95); }
.menu-tiles svg.i { width: 18px; height: 18px; color: var(--muted); transition: color .15s; }
.menu-tiles > a:hover svg.i, .menu-tiles > button:hover svg.i { color: var(--accent); }

/* ---------- док инструментов ---------- */
.dock { left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); z-index: 20; }
.dock button { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 0; background: none; color: var(--ink-2); cursor: pointer; transition: background .15s, color .2s, transform .15s var(--spring); }
.dock button svg.i { width: 20px; height: 20px; }
.dock button:hover { background: var(--field); color: var(--ink); }
.dock button:active { transform: scale(.9); }
.dock button.on, .dock button.on:hover { background: transparent; color: var(--accent-ink); }
.dock button.on svg.i { stroke-width: 1.9; animation: toolPop .35s var(--spring); }
.dock button kbd { position: absolute; right: 4px; bottom: 2px; padding: 0; background: none; font: 8px/1 var(--mono); color: var(--faint); transition: color .2s; }
.dock button.on kbd { color: color-mix(in oklab, var(--accent-ink) 60%, transparent); }
.dock .sep { margin: 0 4px; }
.dock-ind { position: absolute; left: 0; top: 5px; width: 40px; height: 40px; border-radius: 10px; background: var(--accent); box-shadow: 0 4px 16px -4px oklch(0.68 0.19 38 / .6); pointer-events: none; transition: transform .38s var(--spring); z-index: 0; }

/* ---------- слева снизу: история, масштаб ---------- */
.bottom-left { position: absolute; left: 16px; bottom: 18px; z-index: 20; display: flex; gap: 6px; }
.bottom-left .float { position: relative; }
.mini { display: flex; align-items: center; height: 40px; padding: 0 4px; border-radius: 10px; }
.zoom-val { min-width: 52px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font: 12px var(--mono); cursor: pointer; transition: background .15s; }
.zoom-val:hover { background: var(--field); color: var(--ink); }
.help-btn { width: 40px !important; height: 40px; }

.status { position: absolute; right: 18px; bottom: 26px; z-index: 5; display: flex; gap: 8px; font: 11px var(--mono); color: var(--faint); pointer-events: none; }
.status .dot { opacity: .6; }
.status #stSel:not(:empty)::before { content: "· "; }

/* ---------- пустое состояние (поверх листа) ---------- */
.empty-state { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; text-align: center; }
/* главный путь — картинка: большая зона, куда её бросить */
.es-drop { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 46px 26px; border: 1.5px dashed var(--line); border-radius: 22px; background: color-mix(in oklab, var(--panel-solid) 55%, transparent); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, transform .3s var(--spring); animation: fadeUp .5s var(--ease) .3s both; }
.es-drop:hover, .empty-state.drag-over .es-drop { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.es-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px -8px oklch(0.68 0.19 38 / .7); transition: transform .35s var(--spring); }
.es-drop:hover .es-ico, .empty-state.drag-over .es-ico { transform: rotate(-8deg) scale(1.06); }
.es-ico svg.i { width: 26px; height: 26px; }
.es-sub { color: var(--muted); font-size: 13px; }
.es-sub kbd { background: var(--field); }
.es-title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.es-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; pointer-events: auto; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px 0 12px; border: 1px solid transparent; border-radius: 999px; background: var(--field); color: var(--ink); font-size: 13px; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .25s var(--spring); }
.pill svg.i { color: var(--muted); transition: color .2s, transform .3s var(--spring); }
.pill:hover { background: var(--field-hover); border-color: var(--accent-line); transform: translateY(-2px); }
.pill:hover svg.i { color: var(--accent); transform: scale(1.12) rotate(-6deg); }
.es-hint { font: 12px var(--mono); color: var(--faint); }
.es-hint kbd { background: none; padding: 0; color: var(--muted); }
.empty-state.drag-over .es-title { color: var(--accent-hi); }

/* ---------- инспектор (справа) ---------- */
.inspector { top: 84px; right: 16px; width: 256px; max-height: calc(100vh - 180px); overflow-y: auto; overscroll-behavior: contain; }
.inspector:empty { display: none; }
.inspector::-webkit-scrollbar, .modal ::-webkit-scrollbar, .layers-list::-webkit-scrollbar { width: 10px; }
.inspector::-webkit-scrollbar-thumb, .modal ::-webkit-scrollbar-thumb, .layers-list::-webkit-scrollbar-thumb { background: var(--track); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.panel + .panel { border-top: 1px solid var(--line); }
.panel > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 13px 14px; cursor: pointer; font-weight: 500; font-size: 12px; color: var(--muted); user-select: none; transition: color .15s; }
.panel > summary:hover { color: var(--ink); }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .25s var(--ease); opacity: .7; }
.panel[open] > summary::after { transform: translateY(-2px) rotate(45deg); }
.panel > summary .count { color: var(--faint); font-weight: 400; }
.panel-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.panel[open] > .panel-body { animation: panelIn .22s var(--ease); }
.panel.enter { animation: slideIn .28s var(--ease); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > span, .lbl { color: var(--muted); font-size: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.input, select.input, textarea.input { width: 100%; height: 32px; background: var(--field); border: 0; border-radius: 7px; padding: 0 10px; color: var(--ink); transition: box-shadow .15s, background .15s; }
.input:hover { background: var(--field-hover); }
.input:focus { outline: 0; background: var(--field); box-shadow: inset 0 0 0 1.5px var(--accent); }
textarea.input { height: auto; min-height: 150px; padding: 10px 12px; font: 12px/1.15 var(--mono); resize: vertical; white-space: pre; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8580' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; padding-right: 30px; cursor: pointer; }
select.input option { background: var(--panel-solid); }
.num { position: relative; display: block; }
.num > b { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--faint); font: 500 11px var(--mono); pointer-events: none; }
.num > input { padding-left: 24px; font: 12px var(--mono); }

.slider { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; }
.slider > span { color: var(--ink-2); font-size: 12.5px; }
.slider > output { font: 12px var(--mono); color: var(--ink); }
.slider > input { grid-column: 1 / -1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--p, 50%), var(--track) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .15s var(--spring); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-size: 13px; color: var(--ink); }
.switch input { display: none; }
.switch i { width: 30px; height: 18px; border-radius: 9px; background: var(--track); position: relative; flex: none; transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .25s var(--spring), width .15s; }
.switch:active i::after { width: 17px; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { left: 14px; }
.switch:active input:checked + i::after { left: 11px; }

.font-drop { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 0; border-radius: 10px; background: var(--field); cursor: pointer; text-align: left; transition: background .15s, box-shadow .15s; }
.font-drop:hover { background: var(--field-hover); box-shadow: inset 0 0 0 1px var(--accent-line); }
.font-drop b { font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: center; color: var(--ink); }
.font-drop b i { font-style: normal; font: 10.5px var(--mono); color: var(--ok); background: var(--ok-bg); padding: 1px 6px; border-radius: 5px; }
.font-drop span { color: var(--muted); font-size: 11.5px; line-height: 1.5; }

.seg { display: flex; padding: 3px; gap: 2px; background: var(--field); border-radius: 10px; }
.seg button { flex: 1; height: 28px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; padding: 0 8px; transition: background .2s, color .2s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--active); color: var(--ink); }
:root[data-theme="light"] .seg button.on { background: #fff; box-shadow: var(--shadow-sm); }

.pens { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.pens button { aspect-ratio: 1; border-radius: 7px; border: 0; background: var(--field); cursor: pointer; font: 14px/1 var(--mono); color: var(--ink-2); display: grid; place-items: center; transition: background .15s, color .15s, transform .15s var(--spring); }
.pens button:hover { background: var(--field-hover); color: var(--ink); }
.pens button:active { transform: scale(.88); }
.pens button.on { background: var(--accent); color: var(--accent-ink); }
.pens input { grid-column: span 2; height: auto; text-align: center; font: 14px var(--mono); padding: 0; }

.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tools-grid .btn { flex-direction: column; height: auto; padding: 9px 2px 7px; gap: 4px; font-size: 11px; color: var(--muted); }
.tools-grid .btn:hover { color: var(--ink); }
.tools-grid .btn:active { transform: scale(.92); }
.tools-grid .btn svg.i { width: 17px; height: 17px; color: var(--ink-2); }

.chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 190px; overflow: auto; }
.chip { width: 32px; aspect-ratio: 51/83; border-radius: 5px; background-size: cover; background-position: center; cursor: pointer; position: relative; animation: rowIn .25s var(--ease) both; }
.chip:hover::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 12, 8, .6); color: #fff; font-size: 17px; border-radius: 5px; }
.picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-height: 220px; overflow: auto; }
.picker .hero { aspect-ratio: 51/83; border-radius: 5px; background-size: cover; background-position: center; cursor: pointer; position: relative; outline: 2px solid transparent; outline-offset: 1px; transition: outline-color .15s, transform .2s var(--spring); }
.picker .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); border-radius: 0 0 5px 5px; }
.picker .hero:hover { outline-color: var(--accent); transform: translateY(-2px); }
.picker .hero.off { opacity: .22; filter: grayscale(1); }
.hint { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.hint code { font: 11px var(--mono); background: var(--field); padding: 1px 5px; border-radius: 5px; color: var(--ink-2); word-break: break-all; }
.kv { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.kv b { color: var(--ink); font: 500 12px var(--mono); }

/* ---------- модалки ---------- */
.modal-root:empty { display: none; }
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .18s; }
.modal { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); animation: modalIn .28s var(--spring); overflow: hidden; }
.modal.wide { width: min(1180px, calc(100vw - 32px)); height: min(760px, calc(100vh - 40px)); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.modal-head .icon-btn { margin-left: auto; }
.modal-body { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 16px 12px 20px; border-top: 1px solid var(--line); }
.modal-foot .info { margin-right: auto; color: var(--muted); font: 11.5px var(--mono); }
.modal-foot .btn.primary { background: var(--accent); color: var(--accent-ink); }
.split { flex: 1; display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
.split-controls { overflow: auto; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--line); }
.split-preview { position: relative; min-width: 0; background: var(--bg) radial-gradient(var(--bg-dot) 1px, transparent 1.2px) 0 0 / 20px 20px; overflow: hidden; }
.split-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.split-preview canvas.dragging { cursor: grabbing !important; }
.split-preview .tag { position: absolute; top: 62px; padding: 4px 10px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); font: 500 11px var(--mono); color: var(--ink-2); pointer-events: none; }
.split-preview .pv-l { left: 14px; }
.split-preview .pv-r { right: 14px; }
/* вкладки превью, зум и «считаю…» — плавают поверх холста */
.pv-tabs { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pv-tabs button { flex: none; padding: 0 14px; }
.pv-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pv-zoom .zoom-val { min-width: 50px; height: 28px; }
.pv-busy { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font: 500 11.5px var(--mono); color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease); pointer-events: none; }
.pv-busy.on { opacity: 1; transform: none; transition-delay: .15s; }
.pv-busy i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.split-preview[data-tab="frame"] .pv-zoom { display: none; }
/* загрузка картинки */
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 18px 14px; text-align: center; color: var(--muted); cursor: pointer; transition: .2s var(--ease); }
.drop svg.i { width: 26px; height: 26px; margin-bottom: 4px; color: var(--accent); stroke-width: 1.5; }
.drop > b { color: var(--ink); font-weight: 600; }
.drop > span { font-size: 12px; }
.drop:hover, .drop.over { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.drop.has { flex-direction: row; gap: 12px; padding: 8px; text-align: left; border-style: solid; background: var(--field); }
.drop.has img { width: 64px; height: 64px; object-fit: cover; border-radius: 9px; flex: none; }
.drop.has span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 11.5px var(--mono); }
.drop.has span b { font: 600 13px var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* группы настроек */
.ip-ctl, .ip-col { display: flex; flex-direction: column; gap: 10px; }
.ip-group { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in oklab, var(--field) 55%, transparent); border: 1px solid var(--line-soft); }
.ip-h { display: flex; align-items: center; gap: 8px; margin-bottom: -2px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ip-h::before { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--accent); transform: rotate(-45deg); }
.ip-adv { border-radius: 14px; border: 1px solid var(--line-soft); }
.ip-adv summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font: 600 12.5px var(--font); color: var(--muted); user-select: none; }
.ip-adv summary::-webkit-details-marker { display: none; }
.ip-adv summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.ip-adv[open] summary::after { transform: rotate(-135deg); }
.ip-adv summary:hover { color: var(--ink); }
.ip-adv-body { display: flex; flex-direction: column; gap: 12px; padding: 2px 14px 14px; }
.ip-sub { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ip-modes { margin-left: 16px; }
.ip-modes button { display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.ip-modes button svg.i { width: 15px; height: 15px; }
.chips-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 3px; border-radius: 10px; background: var(--field); }
.chips-row button { height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 12px var(--mono); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.chips-row button:hover { color: var(--ink); }
.chips-row button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px -4px oklch(0.68 0.19 38 / .7); }
.shade-chs { grid-template-columns: repeat(4, 1fr); }
.shade-chs button { aspect-ratio: auto; height: 32px; font-size: 18px; }
/* число категорий в подвале окна импорта */
.ip-count { font: 12px var(--mono); color: var(--muted); }
.ip-count b { font: 600 15px var(--mono); color: var(--ink); margin-right: 2px; transition: color .2s; }
.ip-count.warn b { color: var(--warn); }
.ip-count.bad b { color: var(--danger); }
.modal-foot .ip-count + .info { margin-left: 4px; }
.modal-foot .ip-count:not(:empty) + .info::before { content: "· "; }
@keyframes spin { to { transform: rotate(360deg); } }
.cfg-list { display: flex; flex-direction: column; gap: 6px; }
.cfg-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--field); cursor: pointer; transition: background .15s; }
.cfg-item:hover { background: var(--field-hover); }
.cfg-item input { accent-color: var(--accent); width: 15px; height: 15px; }
.cfg-item small { color: var(--muted); margin-left: auto; font-family: var(--mono); }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.radio-cards label { padding: 12px 14px; border-radius: 12px; background: var(--field); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.radio-cards label:hover { background: var(--field-hover); }
.radio-cards label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.radio-cards input { display: none; }
.radio-cards b { font-weight: 600; }
.radio-cards small { display: block; color: var(--muted); }
.keys { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 12.5px; color: var(--ink-2); }
.keys span:nth-child(even) { text-align: right; }

/* ---------- палитра команд (Ctrl K) ---------- */
.modal.cmdk { width: min(560px, calc(100vw - 32px)); align-self: start; margin-top: 12vh; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.cmdk-in svg.i { width: 18px; height: 18px; color: var(--muted); }
.cmdk-in input { flex: 1; height: 52px; border: 0; background: none; font-size: 15px; color: var(--ink); }
.cmdk-in input:focus { outline: 0; }
.cmdk-in input::placeholder { color: var(--faint); }
.cmdk-list { max-height: min(420px, 60vh); overflow: auto; padding: 6px; }
.cmdk-group { padding: 10px 10px 4px; font: 11px var(--mono); color: var(--faint); }
.cmdk-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-size: 13.5px; text-align: left; cursor: pointer; }
.cmdk-item svg.i { color: var(--muted); }
.cmdk-item kbd { margin-left: auto; }
.cmdk-item.on { background: var(--field); color: var(--ink); }
.cmdk-item.on svg.i { color: var(--accent); }
.cmdk-empty { padding: 26px; text-align: center; color: var(--muted); }
.cmdk-foot { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line); font: 11px var(--mono); color: var(--faint); }

/* ---------- тосты ---------- */
.toasts { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { max-width: 460px; padding: 9px 14px; border-radius: 10px; background: var(--toast); border: 1px solid var(--line); color: #f1eeeb; box-shadow: var(--shadow-lg); font-size: 12.5px; display: flex; gap: 8px; align-items: center; animation: toastIn .35s var(--spring); }
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8b8580; flex: none; }
.toast.ok::before { background: oklch(0.78 0.15 150); }
.toast.err::before { background: oklch(0.68 0.17 30); }
.toast.out { animation: popOut .22s var(--ease) forwards; }

/* ---------- режим «В игре»: инструменты уезжают, остаётся экран Доты ---------- */
body.previewing .inspector { animation: slideOutR .3s var(--ease) both; pointer-events: none; }
body.previewing .layers { animation: slideOutL .3s var(--ease) both; pointer-events: none; }
body.previewing .dock { animation: sinkOut .32s var(--ease) both; pointer-events: none; }
body.previewing .status { animation: fadeAway .2s var(--ease) both; }
body.was-previewing .inspector { animation: slideIn .38s var(--ease) both; }
body.was-previewing .layers { animation: slideInL .38s var(--ease) both; }
body.was-previewing .dock { animation: riseIn .45s var(--spring) both; }

/* ---------- появление интерфейса ---------- */
@keyframes dropIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
@keyframes dropInC { from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.98); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(16px); } }
@keyframes slideInL { from { opacity: 0; transform: translateX(-16px); } }
@keyframes slideOutR { to { opacity: 0; transform: translateX(22px); visibility: hidden; } }
@keyframes slideOutL { to { opacity: 0; transform: translateX(-22px); visibility: hidden; } }
@keyframes riseIn { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes sinkOut { from { opacity: 1; transform: translateX(-50%); } to { opacity: 0; transform: translateX(-50%) translateY(26px) scale(.96); visibility: hidden; } }
@keyframes fadeAway { to { opacity: 0; visibility: hidden; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } }
@keyframes tipDown { from { opacity: 0; transform: translateX(-50%) translateY(-3px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes tipUp { from { opacity: 0; transform: translateX(-50%) translateY(3px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes bump { 40% { transform: scale(1.18); } }
@keyframes toolPop { 0% { transform: scale(.7) rotate(-12deg); } 100% { transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.94); } }
@keyframes popOut { to { opacity: 0; transform: translateY(4px) scale(.985); } }
@keyframes strokeIn { from { stroke-dashoffset: 32; } }
@keyframes strokeRedraw { 0% { stroke-dashoffset: 0; } 45% { stroke-dashoffset: -32; } 46% { stroke-dashoffset: 32; } 100% { stroke-dashoffset: 0; } }
@keyframes pulseDot { 50% { opacity: .25; } }

.brand-pill { animation: dropIn .5s var(--ease) both; }
.seg-switch { animation: dropInC .5s var(--ease) .06s both; }
.game-bg { position: absolute; left: 50%; top: 64px; z-index: 30; transform: translateX(-50%); display: none; }
.game-bg:hover { transform: translateX(-50%) translateY(-2px); }
body.previewing .game-bg { display: inline-flex; animation: dropInC .4s var(--ease) both; }
.top-actions { animation: dropIn .5s var(--ease) .1s both; }
.layers { animation: slideInL .5s var(--ease) .14s both; }
.inspector { animation: slideIn .5s var(--ease) .16s both; }
.dock { animation: riseIn .6s var(--spring) .2s both; }
.bottom-left { animation: fadeUp .5s var(--ease) .28s both; }
.status { animation: fadeUp .5s var(--ease) .34s both; }
.empty-state .es-title { animation: fadeUp .5s var(--ease) .3s both; }
.empty-state .pill { animation: fadeUp .5s var(--ease) both; }
.empty-state .pill:nth-child(1) { animation-delay: .36s; }
.empty-state .pill:nth-child(2) { animation-delay: .41s; }
.empty-state .pill:nth-child(3) { animation-delay: .46s; }
.empty-state .pill:nth-child(4) { animation-delay: .51s; }
.empty-state .es-hint { animation: fadeUp .5s var(--ease) .58s both; }

.modal-root.closing { animation: fadeOut .16s var(--ease) forwards; }
.modal-root.closing .modal { animation: popOut .16s var(--ease) forwards; }
.canvas-fade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .35s var(--ease); z-index: 1; }

/* ---------- узкие окна ---------- */
@media (max-width: 1180px) {
  .layers { width: 196px; }
  .inspector { width: 240px; }
  .status { display: none; }
  /* док занимает низ целиком — история и масштаб встают столбиком слева */
  .bottom-left { flex-direction: column; align-items: flex-start; }
  .mini { flex-direction: column; height: auto; width: 40px; padding: 4px 0; }
  .zoom-val { min-width: 0; width: 36px; font-size: 10.5px; }
}
@media (max-width: 1000px) {
  .layers { display: none; }
  #btnPublish, #btnImport { font-size: 0; gap: 0; width: 38px; padding: 0; }
}
@media (max-width: 800px) {
  .seg-switch { top: 68px; }
  .layers, .inspector { top: 124px; }
  .inspector { max-height: calc(100vh - 220px); }
  .dock button { width: 34px; height: 34px; }
  .dock button svg.i { width: 18px; height: 18px; }
  .bottom-left { bottom: 76px; }
  .help-btn, .mini:first-child { display: none !important; }
}
@media (max-width: 640px) {
  .inspector { display: none; }
  .title-input { width: 110px; }
  .dock { left: 8px; right: 8px; transform: none; overflow-x: auto; }
  @keyframes riseIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}

/* ---------- блок «для профиля Steam» в режиме Брайля ---------- */
.steam-box { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--field); }
.steam-box .btn:not(.primary) { background: var(--panel-solid); }
.steam-box .btn:not(.primary):hover { background: var(--field-hover); }
.steam-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.steam-head .badge { margin: 0; background: var(--panel-solid); }
.steam-head .badge.bad { background: var(--bad-bg); }

/* ---------- публикация в Мастерскую ---------- */
textarea.input.plain { min-height: 76px; font: 13px/1.45 var(--font); white-space: pre-wrap; }
.pub-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-tags button { height: 30px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--field); color: var(--muted); font-size: 12.5px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.pub-tags button:hover { color: var(--ink); background: var(--field-hover); }
.pub-tags button.on { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.pub-18 { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.pub-18 input { margin-top: 2px; accent-color: var(--accent); }
.pub-18 b { color: var(--ink); }
.pub-thumb { position: relative; border-radius: 12px; overflow: hidden; background: #1d140e; aspect-ratio: 1204 / 612; border: 1px solid var(--line); }
.pub-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pub-thumb span { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 7px; background: rgba(0, 0, 0, .55); color: #dfe4ea; font: 500 11px var(--mono); backdrop-filter: blur(4px); }
.pub-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 0 6px; }
.pub-done b { font-size: 16px; font-weight: 600; }
.pub-done > span { color: var(--muted); max-width: 380px; }
.pub-ok { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 20px; font-weight: 700; margin-bottom: 4px; animation: bump .5s var(--spring); }
.pub-link { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.pub-link .input { font: 12px var(--mono); }

/* ---------- первое знакомство: окно приветствия ---------- */
.modal.welcome-modal { width: min(640px, calc(100vw - 32px)); }
.welcome { gap: 16px; }
.wl-lead { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--spring); animation: fadeUp .4s var(--ease) both; }
.wl-card:nth-child(2) { animation-delay: .05s; }
.wl-card:nth-child(3) { animation-delay: .1s; }
.wl-card:nth-child(4) { animation-delay: .15s; }
.wl-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.wl-card b { font-size: 14.5px; font-weight: 600; }
.wl-card > span:last-child { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.wl-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 11px; background: var(--panel-solid); color: var(--accent); transition: transform .3s var(--spring); }
.wl-ico svg.i { width: 19px; height: 19px; }
.wl-card:hover .wl-ico { transform: rotate(-8deg) scale(1.06); }
.wl-card.hot .wl-ico { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px -8px oklch(0.68 0.19 38 / .8); }

/* ---------- тур: подсветка элемента и попап с шагом ---------- */
.tour { position: fixed; inset: 0; z-index: 150; }
.tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px oklch(0.08 0.004 60 / .62), 0 0 0 2px var(--accent), 0 0 30px 4px oklch(0.68 0.19 38 / .5); pointer-events: none; transition: left .4s var(--ease), top .4s var(--ease), width .4s var(--ease), height .4s var(--ease); }
.tour-pop { position: fixed; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: var(--shadow-lg); transition: left .35s var(--ease), top .35s var(--ease); }
.tour-pop.in { animation: pop .25s var(--ease); }
.tour-pop b { font-size: 15px; }
.tour-pop p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.tour-pop kbd { color: var(--ink-2); }
.tp-step { color: var(--accent-hi); font: 600 11px var(--mono); }
.tp-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tp-actions .link { margin-right: auto; color: var(--muted); }
.tp-actions .btn.primary { background: var(--accent); color: var(--accent-ink); }

/* ---------- подсказка к месту ---------- */
.hint-pop { position: fixed; z-index: 140; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--accent-line); box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-soft); animation: pop .25s var(--ease); }
.hint-pop::before { content: ""; position: absolute; left: calc(var(--ax, 50%) - 7px); width: 12px; height: 12px; background: var(--panel-solid); border: 1px solid var(--accent-line); transform: rotate(45deg); }
.hint-pop.below::before { top: -7px; border-right: 0; border-bottom: 0; }
.hint-pop.above::before { bottom: -7px; border-left: 0; border-top: 0; }
.hint-pop p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.hint-pop a { color: var(--accent-hi); }
.hp-actions { display: flex; justify-content: flex-end; gap: 6px; }
.hp-actions .btn.primary { background: var(--accent); color: var(--accent-ink); }
.hint-pop.out { animation: popOut .2s var(--ease) forwards; }
@media (max-width: 640px) { .wl-grid { grid-template-columns: 1fr; } }

/* ---------- вкладки холстов ---------- */
.doc-tabs { left: 50%; top: 64px; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 2px; padding: 3px; max-width: min(720px, calc(100vw - 460px)); overflow-x: auto; scrollbar-width: none; border-radius: 12px; }
.doc-tabs::-webkit-scrollbar { display: none; }
.doc-tabs[hidden] { display: none; }
.dtab { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; max-width: 180px; height: 30px; padding: 0 6px 0 12px; border-radius: 9px; color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .18s, color .18s; }
.dtab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtab:not(:has(.dx)) { padding-right: 12px; }
.dtab:hover { color: var(--ink); background: var(--field); }
.dtab.on { color: var(--ink); background: var(--active); }
:root[data-theme="light"] .dtab.on { background: #fff; box-shadow: var(--shadow-sm); }
.dtab .dx { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.dtab.on .dx, .dtab:hover .dx { opacity: 1; }
.dtab .dx:hover { background: var(--line); color: var(--ink); }
.dtab .dx svg.i { width: 12px; height: 12px; }
.dtab-add { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; transition: background .18s, color .18s; }
.dtab-add:hover { background: var(--field); color: var(--accent); }
.dtab-add svg.i { width: 16px; height: 16px; }
body.previewing .doc-tabs { display: none; }
@media (max-width: 1000px) { .doc-tabs { max-width: calc(100vw - 32px); } }
@media (max-width: 800px) { .doc-tabs { top: 116px; } }

/* ---------- стили line-art под превью ---------- */
.pv-presets { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 112px; border-top: 1px solid var(--line); background: color-mix(in oklab, var(--panel) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); user-select: none; }
.split-preview[data-presets="1"] .pv-presets { display: block; }
.split-preview[data-presets="1"] > canvas { bottom: 112px; height: calc(100% - 112px); }
.split-preview[data-presets="1"] .pv-zoom, .split-preview[data-presets="1"] .pv-busy { bottom: 126px; }
/* без скроллбара: листается колесом и свайпом, край гаснет, только когда за ним есть карточки */
.pv-track { --fl: 0px; --fr: 0px; display: flex; gap: 8px; height: 100%; padding: 10px 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.pv-track::-webkit-scrollbar { display: none; }
.pv-track.fl { --fl: 40px; }
.pv-track.fr { --fr: 40px; }
.pcard { flex: 0 0 120px; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: 600 12px/16px var(--font); cursor: pointer; text-align: left; animation: fadeUp .4s var(--ease) both; animation-delay: calc(var(--i) * 45ms); transition: color .18s; }
.split-preview .pcard canvas { position: static; display: block; width: 100%; height: auto; aspect-ratio: 132 / 70; border-radius: 9px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; touch-action: pan-x; transition: box-shadow .2s, transform .25s var(--spring); }
.split-preview .pcard:not(.ready) canvas { background: linear-gradient(100deg, var(--field) 35%, var(--field-hover) 50%, var(--field) 65%) 0 0 / 300% 100%; animation: shimmer 1.3s linear infinite; }
.pcard span { display: flex; align-items: center; gap: 6px; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard span::before { content: ""; flex: none; width: 0; height: 6px; margin-right: -6px; border-radius: 50%; background: var(--accent); transition: width .25s var(--spring), margin .25s var(--spring); }
.pcard:hover, .pcard.on { color: var(--ink); }
.split-preview .pcard:hover canvas { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--field-hover), 0 8px 18px -10px rgba(0, 0, 0, .7); }
.split-preview .pcard.on canvas { box-shadow: 0 0 0 2px var(--accent); }
.pcard.on span::before { width: 6px; margin-right: 0; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* «+» в панели категорий: мягкая акцентная плитка, счётчик — рядом с заголовком. Наведение доворачивает плюс,
   открытое меню превращает его в «×»; на пустом холсте плюс «дышит» кольцом — подсказка, с чего начать */
.layers-head { min-height: 28px; }
.layers-head > span:first-child { margin-right: 0; font-weight: 500; color: var(--ink-2); }
.layers-head #catCount { margin-right: auto; }
.layers-head #btnAdd { position: relative; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px oklch(0.68 0.19 38 / .3); transition: background .2s, color .2s, box-shadow .25s, transform .3s var(--spring); }
.layers-head #btnAdd svg.i { width: 16px; height: 16px; stroke-width: 2.4; transition: transform .4s var(--spring); }
.layers-head #btnAdd:hover, .layers-head #btnAdd.open { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px transparent, 0 6px 16px -6px oklch(0.68 0.19 38 / .8); }
.layers-head #btnAdd:hover svg.i { transform: rotate(90deg); }
.layers-head #btnAdd.open svg.i { transform: rotate(135deg); }
.layers-head #btnAdd:active { transform: scale(.9); }
.layers:has(.layers-list:empty) #btnAdd:not(.open)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: addRing 2.4s var(--ease) infinite; }
@keyframes addRing { 0% { box-shadow: 0 0 0 0 oklch(0.68 0.19 38 / .45); } 70%, 100% { box-shadow: 0 0 0 9px oklch(0.68 0.19 38 / 0); } }

/* ---------- импорт: заставка до картинки, потом окно раскрывается в редактор ---------- */
.modal.ip { transition: width .5s var(--ease), height .5s var(--ease); }
.modal.ip.ip-start { width: min(660px, calc(100vw - 32px)); height: min(540px, calc(100vh - 40px)); }
.ip-intro { display: none; }
.modal.ip-start .ip-intro { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 2px 20px 20px; overflow: auto; }
.modal.ip-start .split, .modal.ip-start .modal-foot { display: none; }
.modal.ip-start .modal-head { border-bottom-color: transparent; }
.modal.ip-start .ip-modes { visibility: hidden; }
.modal.ip-leaving .ip-intro { animation: popOut .2s var(--ease) forwards; }
.ipi-drop { flex: 1; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; border: 1.5px dashed var(--line); border-radius: 18px; text-align: center; cursor: pointer; outline: none; transition: border-color .25s, background .25s; animation: fadeUp .45s var(--ease) both; }
.ipi-drop:hover, .ipi-drop:focus-visible, .ipi-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.ipi-stage { position: relative; width: 150px; height: 105px; margin-bottom: 14px; transition: transform .35s var(--spring); }
.ipi-drop:hover .ipi-stage, .ipi-drop.over .ipi-stage { transform: translateY(-3px) scale(1.05); }
.ipi-glow { position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.68 0.19 38 / .22), transparent); animation: ipiGlow 5s ease-in-out infinite; }
.ipi-art { position: relative; display: block; width: 100%; height: 100%; overflow: visible; animation: ipiFloat 5s ease-in-out infinite; }
.ipi-frame { fill: color-mix(in oklab, var(--bg) 75%, transparent); stroke: var(--line); stroke-width: 1.5; }
.ipi-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: ipiDraw 5s var(--ease) infinite; }
.ipi-dot { fill: var(--ink); transform-box: fill-box; transform-origin: center; animation: ipiDot 5s var(--ease) infinite both; animation-delay: calc(var(--i) * 16ms); }
.ipi-badge { position: absolute; right: -10px; bottom: -10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--panel-solid), 0 8px 20px -6px oklch(0.68 0.19 38 / .8); animation: ipiBob 2.4s ease-in-out infinite; }
.ipi-badge svg.i { width: 17px; height: 17px; stroke-width: 2.4; }
.ipi-drop h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.ipi-drop p { margin: 0; font-size: 13px; color: var(--muted); }
.ipi-drop .btn { margin-top: 12px; height: 36px; padding: 0 18px; pointer-events: none; }
.ipi-drop small { margin-top: 4px; font: 10.5px var(--mono); letter-spacing: .06em; color: var(--faint); }
.ipi-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ipi-modes button { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: color-mix(in oklab, var(--field) 55%, transparent); color: var(--ink-2); text-align: left; cursor: pointer; animation: fadeUp .45s var(--ease) both; transition: border-color .2s, background .2s, transform .25s var(--spring); }
.ipi-modes button:nth-child(1) { animation-delay: .08s; }
.ipi-modes button:nth-child(2) { animation-delay: .14s; }
.ipi-modes button:nth-child(3) { animation-delay: .2s; }
.ipi-modes i { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--field); color: var(--muted); transition: background .2s, color .2s; }
.ipi-modes i svg.i { width: 16px; height: 16px; }
.ipi-modes b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ipi-modes span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipi-modes button:hover { border-color: var(--line); transform: translateY(-2px); }
.ipi-modes button.on { border-color: var(--accent-line); background: var(--accent-soft); }
.ipi-modes button.on i { background: var(--accent); color: var(--accent-ink); }
.modal.ip-reveal .split-controls > * { animation: fadeUp .45s var(--ease) both; }
.modal.ip-reveal .split-controls > :nth-child(2) { animation-delay: .06s; }
.modal.ip-reveal .split-controls > :nth-child(3) { animation-delay: .12s; }
.modal.ip-reveal .split-preview { animation: ipiPreviewIn .55s var(--ease) .05s both; }
.modal.ip-reveal .modal-foot, .modal.ip-reveal .ip-modes { animation: fadeIn .4s var(--ease) .2s both; }
@keyframes ipiDraw { 0% { stroke-dashoffset: 1; opacity: 1; } 34%, 50% { stroke-dashoffset: 0; opacity: 1; } 62%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ipiDot { 0%, 44% { opacity: 0; transform: scale(0); } 52% { opacity: 1; transform: scale(1.5); } 58%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes ipiFloat { 50% { transform: translateY(-5px); } }
@keyframes ipiGlow { 50% { opacity: .55; transform: scale(.9); } }
@keyframes ipiBob { 50% { transform: translateY(-4px); } }
@keyframes ipiPreviewIn { from { opacity: 0; transform: scale(.985); } }
@media (max-width: 600px) { .ipi-modes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .ipi-art, .ipi-glow, .ipi-badge, .ipi-line, .ipi-dot, .split-preview .pcard canvas, .layers-head #btnAdd::after { animation: none !important; }
  .ipi-line { opacity: 0; }
}