/* Конструктор герба: превью слева (липкое), панель управления справа. */

.kon{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:32px; align-items:start; }
@media (max-width:980px){ .kon{ grid-template-columns:1fr; } }

.kon-stage{ position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:980px){ .kon-stage{ position:static; } }
.kon-canvas{ border:1px solid var(--line); border-radius:var(--r-card); padding:16px;
  background:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%) 0 0/24px 24px,
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%) 12px 12px/24px 24px,
    var(--bg); }
.kon-canvas svg{ width:100%; height:auto; max-height:72vh; margin:0 auto; }
.kon-info{ display:flex; flex-direction:column; gap:12px; }
.kon-blazon{ margin:0; font-size:16px; line-height:1.65; border-left:3px solid var(--accent); padding-left:16px; }
.kon-warn:empty{ display:none; }
.kon-warn li{ font-size:14px; color:var(--clay-deep); background:var(--clay-soft); border-radius:10px; padding:8px 12px; }
.kon-warn{ display:flex; flex-direction:column; gap:6px; }
.kon-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.kon-actions .btn{ display:inline-flex; align-items:center; gap:6px; }
.kon-order{ align-self:flex-start; }

.kon-panel{ border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); overflow:hidden; }
.kon-tabs{ display:flex; overflow-x:auto; border-bottom:1px solid var(--line); background:var(--surface); scrollbar-width:none; }
.kon-tabs button{ flex:none; border:0; background:none; padding:14px 16px; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-soft);
  cursor:pointer; border-bottom:2px solid transparent; }
.kon-tabs button[aria-selected="true"]{ color:var(--accent); border-bottom-color:var(--accent); background:var(--bg); }
.kon-body{ padding:20px; display:flex; flex-direction:column; gap:22px; max-height:calc(100vh - 160px); overflow-y:auto; }
@media (max-width:980px){ .kon-body{ max-height:none; } }
.kon-group{ display:flex; flex-direction:column; gap:10px; }
.kon-h{ font-family:var(--f-text); font-size:13.5px; font-weight:600; color:var(--ink-faint); margin:0; text-transform:none; letter-spacing:0; }

.kon-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px; }
.kon-tiles-sm{ grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); }
.kon-tiles-charges{ grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
.kon-tiles-crowns{ grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
.kon-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border:1px solid var(--line);
  border-radius:12px; background:var(--bg); cursor:pointer; font:inherit; font-size:11.5px; line-height:1.2; color:var(--ink-soft); text-align:center; }
.kon-tile span{ max-width:100%; hyphens:auto; -webkit-hyphens:auto; font-size:11px; }
.kon-tile svg{ width:40px; height:46px; }
.kon-tiles-charges .kon-tile svg{ width:46px; height:46px; background:#274E72; border-radius:8px; padding:3px; }
.kon-tiles-crowns .kon-tile svg{ width:72px; height:48px; }
.kon-tiles-ribbons{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.kon-tiles-ribbons .kon-tile svg{ width:110px; height:38px; }
.kon-tile:hover{ border-color:#C9C9C2; background:var(--surface); }
.kon-tile[aria-checked="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); color:var(--accent-deep); }

.kon-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.kon-sw{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg); cursor:pointer; font:inherit; font-size:13.5px; }
.kon-sw i{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.2); background-size:8px 8px !important; }
.kon-sw[aria-checked="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); font-weight:600; }

.kon-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.kon-seg button{ border:1px solid var(--line); background:var(--bg); border-radius:var(--r-btn); padding:8px 12px; font:inherit; font-size:14px; cursor:pointer; }
.kon-seg button[aria-checked="true"]{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-deep); font-weight:600; }

.kon-row{ display:flex; gap:8px; flex-wrap:wrap; }
.kon-row .field{ flex:1; min-width:140px; }
.kon-chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.kon-chip{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; }
.kon-chip.is-active{ border-color:var(--accent); background:var(--accent-soft); }
.kon-chip button{ border:0; background:none; font:inherit; font-size:14px; cursor:pointer; padding:7px 10px; }
.kon-chip-del{ color:var(--ink-faint); padding-left:4px !important; }
.kon-chip-del:hover{ color:var(--clay-deep); }
.kon-switch{ display:flex; gap:10px; align-items:center; cursor:pointer; }
.kon-switch input{ width:18px; height:18px; accent-color:var(--accent); }

.kon-order-forms .order{ position:static; max-width:620px; }

/* ---------- Работа прямо на щите ---------- */
.kon-canvas{ position:relative; }
.kon-canvas [data-slot]{ cursor:pointer; }
.kon-canvas [data-charge]{ cursor:grab; touch-action:none; }
.kon-canvas [data-charge]:active{ cursor:grabbing; }
.kon-sel{ fill:none; stroke:#0E4D40; stroke-width:1.5; stroke-dasharray:5 4; pointer-events:none; }
.kon-tip{ margin:0; font-size:14px; color:var(--ink-faint); }

/* Палитра, всплывающая у места клика. */
.kon-pop{ position:absolute; z-index:5; width:min(330px, calc(100% - 16px)); padding:12px; border:1px solid var(--line);
  border-radius:14px; background:var(--bg); box-shadow:0 10px 30px rgba(20,20,15,.16); }
.kon-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:14px; }
.kon-pop-x{ border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:var(--ink-faint); padding:0 4px; }
.kon-swatches-sm{ gap:6px; }
.kon-swatches-sm .kon-sw{ padding:4px; border-radius:50%; }
.kon-swatches-sm .kon-sw span{ display:none; }
.kon-swatches-sm .kon-sw i{ width:26px; height:26px; }
.kon-pop-tools{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.kon-pop-tools button{ border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:6px 10px; font:inherit; font-size:13.5px; cursor:pointer; }
.kon-pop-tools button:hover{ background:var(--surface-2); }
.kon-pop-tools [data-t="del"]{ color:var(--clay-deep); margin-left:auto; }

.kon-note{ margin:-4px 0 0; font-size:13.5px; color:var(--ink-faint); }
.kon-parts{ display:flex; flex-wrap:wrap; gap:8px; }
.kon-part{ display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg); font:inherit; font-size:14px; cursor:pointer; text-align:left; }
.kon-part:hover{ border-color:var(--accent); }
.kon-part i{ width:28px; height:28px; border-radius:8px; border:1px solid rgba(0,0,0,.2); flex:none; background-size:9px 9px !important; }
.kon-part span{ font-weight:600; }
.kon-part small{ color:var(--ink-faint); font-size:12.5px; }
.kon-selected{ display:flex; flex-direction:column; gap:14px; }
.kon-range{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-soft); }
.kon-range input{ flex:1; accent-color:var(--accent); }
.kon-bg{ display:block; width:40px; height:46px; border-radius:6px; border:1px solid var(--line); }
.kon-bg-none{ background:repeating-conic-gradient(#EEE 0 25%, #FFF 0 50%) 0 0/12px 12px; }
.kon-bg-parchment,.kon-bg-frame{ background:radial-gradient(circle, #F7EFDC, #D6C193); }
.kon-bg-frame{ box-shadow:inset 0 0 0 3px #F7EFDC, inset 0 0 0 4px #8C6E12; }
.kon-bg-velvet{ background:radial-gradient(circle, #1B4A3E, #06201A); }
.kon-bg-white{ background:#fff; }