:root {
  --bg: #F8F4F1;
  --card: #FFFFFF;
  --desk: #E9E1DB;
  --line: #E6DDD7;
  --ink: #0A0A0A;
  --ink-2: #636363;
  --accent: #F63C04;
  --blue: #1570EF;
  --font: 'Geist', 'Onest', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow: hidden; }
body { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--ink); font: 400 .875rem/1.4 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Верхняя панель */
.e-bar { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.e-brand { font-weight: 700; font-size: 1.125rem; letter-spacing: -.04em; text-transform: uppercase; color: inherit; text-decoration: none; }
.e-brand sup { font-size: .5em; color: var(--accent); margin-left: 2px; }
.e-sub { padding: 3px 9px; border-radius: 7px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.e-name { flex: 0 1 240px; min-width: 90px; min-height: 40px; padding: 0 10px; border-radius: 9px; border: 1px solid transparent; background: transparent; font-weight: 600; }
.e-name:hover { border-color: var(--line); }
.e-name:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.e-acts { display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.e-acts button { flex: none; min-height: 40px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: .8125rem; white-space: nowrap; transition: background-color .15s, color .15s; }
.e-acts button:hover { background: var(--bg); }
.e-acts button:disabled { opacity: .35; cursor: default; }
.e-acts .e-ico { width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.e-ico svg, .e-tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.e-acts .e-primary { background: var(--ink); color: #fff; }
.e-acts .e-primary:hover { background: var(--accent); }
.e-sep { flex: none; width: 1px; height: 22px; margin-inline: 4px; background: var(--line); }
.e-toggle { display: none; }

/* Рабочая область */
.e-work { display: grid; grid-template-columns: 56px minmax(0, 1fr) 296px; min-height: 0; }
.e-tools { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: var(--card); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; }
.e-tools button { position: relative; flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--ink-2); transition: background-color .15s, color .15s; }
.e-tools button:hover { background: var(--bg); color: var(--ink); }
.e-tools button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.e-tools kbd { position: absolute; right: 4px; bottom: 2px; font: 600 .5625rem/1 var(--font); opacity: .6; }
.e-tools hr { width: 28px; margin: 4px auto; border: 0; border-top: 1px solid var(--line); }

.e-canvas { position: relative; min-width: 0; min-height: 0; background: var(--desk); overflow: hidden; }
.e-canvas > svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.e-canvas > svg[data-mode="select"] { cursor: default; }
.e-canvas > svg[data-mode="pan"] { cursor: grab; }
.e-hint { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.e-hint span { max-width: 100%; padding: 8px 12px; border-radius: 10px; background: rgba(10, 10, 10, .86); color: #fff; font-size: .8125rem; }
.e-hint span:empty { display: none; }
.e-hint button { pointer-events: auto; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--card); font-weight: 600; font-size: .8125rem; box-shadow: 0 1px 2px rgba(60, 20, 0, .12); }
.e-hint button[data-act="finish"] { background: var(--accent); color: #fff; }
.e-tip { position: absolute; z-index: 2; padding: 4px 8px; border-radius: 7px; background: var(--blue); color: #fff; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }

/* Правая панель */
.e-side { display: flex; flex-direction: column; min-height: 0; background: var(--card); border-left: 1px solid var(--line); }
.e-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.e-tabs button { flex: 1; min-height: 36px; border-radius: 8px; font-weight: 600; font-size: .8125rem; color: var(--ink-2); }
.e-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.e-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.e-pane h3 { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.e-pane h2 { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; text-transform: uppercase; }
.e-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.e-f { display: flex; flex-direction: column; gap: 4px; font-size: .6875rem; font-weight: 500; color: var(--ink-2); min-width: 0; }
.e-f--wide { grid-column: 1 / -1; }
.e-f input, .e-f select { width: 100%; min-height: 38px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: .875rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.e-f input:focus, .e-f select:focus { outline: none; border-color: var(--accent); background: #fff; }
.e-chk { display: flex; align-items: center; gap: 9px; min-height: 36px; font-size: .8125rem; cursor: pointer; }
.e-chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.e-info { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.e-info div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.e-info dt { color: var(--ink-2); }
.e-info dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.e-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.e-ops button { min-height: 36px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line); font-size: .8125rem; font-weight: 500; }
.e-ops button:hover { border-color: var(--ink); }
.e-ops .is-danger { color: #A8200B; }
.e-keys { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; font-size: .8125rem; color: var(--ink-2); }
.e-keys b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.e-layers { display: flex; flex-direction: column; gap: 4px; }
.e-layers li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 46px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); }
.e-layers li.is-cur { border-color: var(--ink); background: var(--bg); }
.e-layers label { display: flex; flex-direction: column; cursor: pointer; }
.e-layers small { font-size: .6875rem; color: var(--ink-2); }
.e-layers input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.e-note { font-size: .75rem; color: var(--ink-2); }

/* Строка состояния */
.e-status { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px; background: var(--card); border-top: 1px solid var(--line); }
.e-xy { flex: none; min-width: 148px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.e-togs { display: flex; gap: 4px; }
.e-togs button, .e-fit { flex: none; min-height: 36px; padding: 0 11px; border-radius: 8px; font-size: .75rem; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); }
.e-togs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.e-cmd { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 120px; padding-left: 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); }
.e-cmd:focus-within { border-color: var(--accent); background: #fff; }
.e-cmd span { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.e-cmd input { flex: 1; min-width: 0; min-height: 38px; border: 0; background: none; font-weight: 500; }
.e-cmd input:focus { outline: none; }
.e-zoom { flex: none; min-width: 48px; text-align: right; font-size: .75rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.e-print { display: none; }

@media (max-width: 900px) {
  body { grid-template-rows: auto minmax(0, 1fr) auto; }
  .e-sub, .e-name { display: none; }
  .e-toggle { display: inline-flex; align-items: center; order: -1; border: 1px solid var(--line); }
  .e-work { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .e-canvas { grid-row: 1; }
  .e-tools { grid-row: 2; flex-direction: row; border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; padding: 6px 8px; }
  .e-tools hr { width: 1px; height: 28px; margin: auto 4px; border: 0; border-left: 1px solid var(--line); }
  .e-side { position: fixed; z-index: 20; inset: 56px 0 0 auto; width: min(320px, 92vw); translate: 100% 0; transition: translate .35s var(--ease); box-shadow: -18px 0 40px -24px rgba(60, 20, 0, .4); }
  .e-side.is-open { translate: 0 0; }
  .e-status { flex-wrap: wrap; row-gap: 6px; padding-block: 6px; }
  .e-xy { min-width: 0; order: 1; }
  .e-zoom { order: 2; margin-left: auto; }
  .e-fit { order: 3; }
  .e-togs { order: 4; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .e-cmd { order: 5; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

@media print {
  body { display: block; height: auto; overflow: visible; background: #fff; }
  .e-bar, .e-work, .e-status { display: none !important; }
  .e-print { display: block; }
  .e-print svg { display: block; }
}