/* Витрина: образы, рейлы, быстрый просмотр. Отдельный слой поверх omnidata-v14: палитра не менялась,
   берутся только существующие переменные --od14-*. Движение короткое, кривая cubic-bezier(.23,1,.32,1),
   на нажатие scale(.97); при prefers-reduced-motion переходы и анимации отключаются. */

.shs-root {
  --shs-ease: cubic-bezier(.23, 1, .32, 1);
  --shs-line: var(--od14-line, #e0e3e7);
  --shs-surface: var(--od14-surface, #fff);
  --shs-soft: var(--od14-surface-soft, #f8f9fa);
  --shs-text: var(--od14-text, #2f3339);
  --shs-muted: var(--od14-text-soft, #626871);
  --shs-accent: var(--od14-accent, #ff5b22);
  --shs-radius: var(--od14-radius, 8px);
}

/* Образы: управление порядком, просмотр «как магазин», переход к матрице */
.od-look-viewas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: var(--od14-text-soft, #626871); }
.od-look-viewas select { min-height: 44px; max-width: min(320px, 60vw); }
.od-look-body .od-inline-actions .button { min-width: 44px; min-height: 44px; }
.od-look-open { min-height: 44px; justify-self: start; padding: 0 12px; border: 1px solid var(--od14-line-strong, #d2d6dc); border-radius: 8px; background: var(--od14-surface, #fff); color: var(--od14-text, #2f3339); font: inherit; font-size: 12px; cursor: pointer; transition: transform .14s cubic-bezier(.23, 1, .32, 1), background-color .14s; }
.od-look-open:hover { background: var(--od14-surface-soft, #f8f9fa); }
.od-look-open:active { transform: scale(.97); }
.od-look-open:focus-visible { outline: 2px solid var(--od14-accent, #ff5b22); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .od-look-open { transition: none; }
  .od-look-open:active { transform: none; }
}

/* ---- Просмотр сцены ------------------------------------------------------------------------- */
.shs-root { display: grid; gap: 18px; margin: 12px 0 20px; color: var(--shs-text); }
.shs-root h3, .shs-root h4 { margin: 0; }
.shs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.shs-version { margin: 0; font-size: 12px; }
.shs-modes { display: inline-flex; border: 1px solid var(--od14-line-strong, #d2d6dc); border-radius: var(--shs-radius); overflow: hidden; }
.shs-mode { min-height: 44px; min-width: 64px; padding: 0 14px; border: 0; background: var(--shs-surface); color: var(--shs-text); font: inherit; font-size: 13px; cursor: pointer; transition: background-color .14s, transform .14s var(--shs-ease); }
.shs-mode[aria-pressed="true"] { background: var(--od14-accent-soft, #fff1eb); color: var(--od14-accent-hover, #e94d14); font-weight: 600; }
.shs-mode:active { transform: scale(.97); }
.shs-section { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--shs-line); border-radius: var(--shs-radius); background: var(--shs-surface); }
.shs-story { margin: 0; max-width: 62ch; color: var(--shs-muted); font-size: 13px; line-height: 1.5; }
.shs-look-head { display: grid; grid-template-columns: minmax(0, 120px) 1fr; gap: 14px; align-items: start; }
.shs-look-head:not(:has(.shs-look-photo)) { grid-template-columns: 1fr; }
.shs-look-photo { aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--shs-soft); }
.shs-look-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shs-soon { display: grid; place-items: center; min-height: 120px; border: 1px dashed var(--od14-line-strong, #d2d6dc); border-radius: var(--shs-radius); color: var(--shs-muted); font-size: 13px; }
.shs-rail-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--shs-muted); margin: 0 0 6px; }

/* Рейл: полоса вешалок со scroll-snap. Инерцию прокрутки даёт браузер. */
.shs-rail-wrap { position: relative; display: grid; gap: 4px; }
.shs-rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0 2px 10px; outline-offset: 2px; scrollbar-width: thin; }
.shs-rail:focus-visible { outline: 2px solid var(--shs-accent); border-radius: 6px; }
.shs-rail-inner { display: flex; gap: 12px; width: max-content; padding: 22px 12px 4px; position: relative; }
.shs-bar { height: 3px; border-radius: 3px; background: var(--od14-line-strong, #d2d6dc); margin-top: -6px; }
.shs-hanger { position: relative; flex: 0 0 auto; display: block; width: 168px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; scroll-snap-align: center; scroll-margin-inline: 12px; transition: transform .18s var(--shs-ease); }
.shs-size-compact .shs-hanger { width: 132px; }
.shs-size-wide .shs-hanger { width: 224px; }
.shs-hook { position: absolute; left: 50%; top: -18px; width: 18px; height: 18px; margin-left: -9px; border: 2px solid var(--od14-line-strong, #b6bcc5); border-bottom: 0; border-radius: 9px 9px 0 0; }
.shs-hook::after { content: ""; position: absolute; left: 50%; top: 16px; width: 2px; height: 6px; margin-left: -1px; background: var(--od14-line-strong, #b6bcc5); }
.shs-hanger-body { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--shs-line); border-radius: var(--shs-radius); background: var(--shs-surface); box-shadow: var(--od14-shadow, none); transition: border-color .14s, box-shadow .18s var(--shs-ease); }
.shs-hanger:hover .shs-hanger-body { border-color: var(--od14-line-strong, #d2d6dc); }
.shs-hanger:active { transform: scale(.97); }
.shs-hanger:focus-visible { outline: 2px solid var(--shs-accent); outline-offset: 3px; border-radius: var(--shs-radius); }
.shs-img { aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--shs-soft); display: grid; place-items: center; }
.shs-img img, .shs-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shs-ph { color: var(--od14-muted, #8a9099); font-size: 22px; font-weight: 700; }
.shs-hanger-meta { display: grid; gap: 3px; }
.shs-hanger-meta strong { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.shs-price { font-size: 13px; color: var(--shs-text); font-variant-numeric: tabular-nums; }
.shs-swatches { display: flex; gap: 4px; }
.shs-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); background: var(--od14-line, #e0e3e7); flex: 0 0 auto; }
.shs-flag { font-size: 11px; color: var(--od14-warning, #a47625); }

/* Запасной вид и узкие экраны: сетка */
.shs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding-top: 18px; }
.shs-grid .shs-hanger, .shs-size-wide .shs-grid .shs-hanger, .shs-size-compact .shs-grid .shs-hanger { width: auto; }
.shs-size-compact.shs-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.shs-size-wide.shs-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 480px) { .shs-grid, .shs-size-compact.shs-grid, .shs-size-wide.shs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Быстрый просмотр ----------------------------------------------------------------------- */
.shs-quick { width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--shs-line); border-radius: 12px; background: var(--od14-surface, #fff); color: var(--od14-text, #2f3339); overflow: auto; }
.shs-quick[open] { animation: shs-pop .2s cubic-bezier(.23, 1, .32, 1); }
.shs-quick::backdrop { background: rgba(30, 34, 40, .45); }
@keyframes shs-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.shs-quick-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; background: var(--od14-surface, #fff); border-bottom: 1px solid var(--od14-line, #e0e3e7); }
.shs-quick-head h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.shs-quick-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px 18px; }
@media (min-width: 720px) { .shs-quick-body { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.shs-gallery { display: grid; gap: 8px; align-content: start; }
.shs-stage { aspect-ratio: 3 / 4; max-height: 62dvh; border-radius: 8px; overflow: hidden; background: var(--od14-surface-soft, #f8f9fa); display: grid; place-items: center; }
.shs-gallery-nav { display: flex; align-items: center; justify-content: space-between; }
.shs-iconbtn { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--od14-line-strong, #d2d6dc); border-radius: 8px; background: var(--od14-surface, #fff); color: inherit; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; transition: transform .14s cubic-bezier(.23, 1, .32, 1), background-color .14s; }
.shs-iconbtn:hover:not(:disabled) { background: var(--od14-surface-soft, #f8f9fa); }
.shs-iconbtn:active:not(:disabled) { transform: scale(.97); }
.shs-iconbtn:disabled { opacity: .4; cursor: default; }
.shs-iconbtn:focus-visible, .shs-colour:focus-visible, .shs-handle:focus-visible { outline: 2px solid var(--od14-accent, #ff5b22); outline-offset: 2px; }
.shs-quick-info { display: grid; gap: 10px; align-content: start; min-width: 0; }
.shs-quick-info p { margin: 0; }
.shs-quick-price { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.shs-colours { display: flex; flex-wrap: wrap; gap: 8px; }
.shs-colour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--od14-line-strong, #d2d6dc); border-radius: 22px; background: var(--od14-surface, #fff); color: inherit; font: inherit; font-size: 13px; cursor: pointer; transition: transform .14s cubic-bezier(.23, 1, .32, 1), border-color .14s; }
.shs-colour[aria-pressed="true"] { border-color: var(--od14-accent, #ff5b22); background: var(--od14-accent-soft, #fff1eb); }
.shs-colour:active { transform: scale(.97); }
.shs-matrix-wrap { overflow-x: auto; border: 1px solid var(--od14-line, #e0e3e7); border-radius: 8px; }
.shs-matrix { border-collapse: collapse; width: 100%; font-size: 12px; }
.shs-matrix th, .shs-matrix td { padding: 4px 6px; border-bottom: 1px solid var(--od14-line, #e0e3e7); text-align: center; white-space: nowrap; }
.shs-matrix thead th { background: var(--od14-surface-soft, #f8f9fa); font-weight: 600; }
.shs-matrix tbody th { text-align: left; display: table-cell; font-weight: 500; }
.shs-matrix tbody th .shs-dot { margin-right: 6px; vertical-align: -1px; }
.shs-matrix tr.is-active th, .shs-matrix tr.is-active td { background: var(--od14-accent-soft, #fff1eb); }
.shs-qty { width: 64px; min-height: 44px; padding: 0 6px; text-align: center; border: 1px solid var(--od14-line-strong, #d2d6dc); border-radius: 6px; font: inherit; font-size: 14px; background: var(--od14-surface, #fff); color: inherit; }
.shs-qty[aria-invalid="true"] { border-color: var(--od14-danger, #ad464b); }
.shs-qty:disabled { background: var(--od14-surface-soft, #f8f9fa); }
.shs-status { min-height: 18px; margin: 0; font-size: 12px; color: var(--shs-muted); }
.shs-status[data-tone="error"] { color: var(--od14-danger, #ad464b); }
.shs-status[data-tone="ok"] { color: var(--od14-success, #527a55); }
.shs-totals { font-size: 13px; }
.shs-quick-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 10px 18px; background: var(--od14-surface, #fff); border-top: 1px solid var(--od14-line, #e0e3e7); }
.shs-quick-foot:empty { display: none; }
.shs-add { min-height: 44px; }

/* ---- Композитор бренда ---------------------------------------------------------------------- */
.shs-composer { gap: 14px; }
.shs-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.shs-toolbar .button, .shs-toolbar select, .shs-add-row .button { min-height: 44px; }
.shs-status-text { flex: 1 1 220px; font-size: 13px; color: var(--shs-muted); align-self: center; }
.shs-edit { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--shs-line); border-radius: var(--shs-radius); background: var(--shs-surface); }
.shs-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shs-tools { display: flex; gap: 6px; }
.shs-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.shs-rail-edit { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--od14-line-strong, #d2d6dc); border-radius: 8px; background: var(--shs-soft); }
.shs-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 8px; min-height: 64px; list-style: none; border-radius: 8px; background: var(--shs-surface); border: 1px solid var(--shs-line); }
.shs-slots.is-target-end { outline: 2px dashed var(--shs-accent); }
.shs-chip { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--od14-line-strong, #d2d6dc); border-radius: 8px; background: var(--shs-surface); transition: transform .16s var(--shs-ease), opacity .16s; }
.shs-chip.is-dragging { opacity: .55; transform: scale(.97); }
.shs-chip.is-target-before { box-shadow: -3px 0 0 var(--shs-accent); }
.shs-chip.is-target-after { box-shadow: 3px 0 0 var(--shs-accent); }
.shs-handle { min-width: 44px; min-height: 44px; border: 0; background: none; cursor: grab; font-size: 20px; color: var(--shs-muted); touch-action: none; }
.shs-handle:active { cursor: grabbing; }
.shs-chip-label { display: grid; max-width: 150px; font-size: 12px; }
.shs-chip-label strong, .shs-chip-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shs-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.shs-preview, .shs-summary { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--shs-line); border-radius: var(--shs-radius); background: var(--shs-surface); }
.shs-summary-list { margin: 0; padding-left: 18px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .shs-rail { scroll-behavior: auto; }
  .shs-hanger, .shs-mode, .shs-iconbtn, .shs-colour, .shs-chip, .shs-hanger-body { transition: none; }
  .shs-hanger:active, .shs-mode:active, .shs-iconbtn:active:not(:disabled), .shs-colour:active { transform: none; }
  .shs-quick[open] { animation: none; }
}

.shs-fullscreen { width: min(1120px, calc(100vw - 16px)); height: calc(100dvh - 16px); max-height: none; padding: 0; border: 1px solid var(--od14-line, #e0e3e7); border-radius: 12px; background: var(--od14-bg, #f3f4f5); color: var(--od14-text, #2f3339); overflow: hidden; }
.shs-fullscreen[open] { display: flex; flex-direction: column; animation: shs-pop .2s cubic-bezier(.23, 1, .32, 1); }
.shs-fullscreen::backdrop { background: rgba(30, 34, 40, .45); }
.shs-fs-body { flex: 1; overflow: auto; padding: 4px 16px 24px; }
@media (prefers-reduced-motion: reduce) { .shs-fullscreen[open] { animation: none; } }
.shs-slots .shs-chip { width: auto !important; flex: 0 0 auto; }
.shs-chip-label { max-width: 230px; }
.shs-chip-label strong, .shs-chip-label small { white-space: normal; overflow-wrap: anywhere; }
.shs-root .shs-hanger { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; }
body.omnidata-role-system .shs-root .shs-hanger.shs-hanger,
body.omnidata-v14 .shs-root .shs-hanger.shs-hanger { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; border-radius: 0 !important; }
body.omnidata-role-system .shs-root .shs-handle.shs-handle,
body.omnidata-v14 .shs-root .shs-handle.shs-handle { border: 0 !important; background: none !important; padding: 0 !important; }
body.omnidata-role-system .shs-quick .shs-qty.shs-qty,
body.omnidata-v14 .shs-quick .shs-qty.shs-qty { width: 64px !important; min-width: 0 !important; padding: 0 6px !important; box-sizing: border-box; }
body.omnidata-role-system .shs-quick .shs-matrix th, body.omnidata-role-system .shs-quick .shs-matrix td { padding: 4px 6px !important; }

/* ---- Горячие точки ---- */
.shs-look-photo { position: relative; }
.shs-look-head:has(.shs-has-spots) { grid-template-columns: minmax(0, 340px) 1fr; }
@media (max-width: 600px) { .shs-look-head:has(.shs-has-spots) { grid-template-columns: 1fr; } }
.shs-spot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--od14-accent, #ff5b22); color: #fff; font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(30, 34, 40, .35); transition: transform .16s cubic-bezier(.23, 1, .32, 1); }
.shs-spot:hover { transform: scale(1.06); }
.shs-spot:active { transform: scale(.97); }
.shs-spot:focus-visible { outline: 3px solid var(--od14-text, #2f3339); outline-offset: 2px; }
.shs-spot-edit { pointer-events: none; width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 13px; }
.shs-spot-stage { position: relative; width: min(320px, 100%); aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--shs-soft); cursor: crosshair; touch-action: manipulation; }
.shs-spot-stage img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.shs-spots-edit { display: grid; gap: 8px; }
.shs-spots-edit h5 { margin: 0; font-size: 13px; }
.shs-spots-edit input[type="number"] { min-height: 44px; width: 84px; }
@media (prefers-reduced-motion: reduce) { .shs-spot { transition: none; } .shs-spot:hover, .shs-spot:active { transform: none; } }

/* Позиция точки по долям кадра с шагом 1%: ODS не допускает element.style, поэтому классы. */
.shs-x-0 { left: 0%; }
.shs-y-0 { top: 0%; }
.shs-x-1 { left: 1%; }
.shs-y-1 { top: 1%; }
.shs-x-2 { left: 2%; }
.shs-y-2 { top: 2%; }
.shs-x-3 { left: 3%; }
.shs-y-3 { top: 3%; }
.shs-x-4 { left: 4%; }
.shs-y-4 { top: 4%; }
.shs-x-5 { left: 5%; }
.shs-y-5 { top: 5%; }
.shs-x-6 { left: 6%; }
.shs-y-6 { top: 6%; }
.shs-x-7 { left: 7%; }
.shs-y-7 { top: 7%; }
.shs-x-8 { left: 8%; }
.shs-y-8 { top: 8%; }
.shs-x-9 { left: 9%; }
.shs-y-9 { top: 9%; }
.shs-x-10 { left: 10%; }
.shs-y-10 { top: 10%; }
.shs-x-11 { left: 11%; }
.shs-y-11 { top: 11%; }
.shs-x-12 { left: 12%; }
.shs-y-12 { top: 12%; }
.shs-x-13 { left: 13%; }
.shs-y-13 { top: 13%; }
.shs-x-14 { left: 14%; }
.shs-y-14 { top: 14%; }
.shs-x-15 { left: 15%; }
.shs-y-15 { top: 15%; }
.shs-x-16 { left: 16%; }
.shs-y-16 { top: 16%; }
.shs-x-17 { left: 17%; }
.shs-y-17 { top: 17%; }
.shs-x-18 { left: 18%; }
.shs-y-18 { top: 18%; }
.shs-x-19 { left: 19%; }
.shs-y-19 { top: 19%; }
.shs-x-20 { left: 20%; }
.shs-y-20 { top: 20%; }
.shs-x-21 { left: 21%; }
.shs-y-21 { top: 21%; }
.shs-x-22 { left: 22%; }
.shs-y-22 { top: 22%; }
.shs-x-23 { left: 23%; }
.shs-y-23 { top: 23%; }
.shs-x-24 { left: 24%; }
.shs-y-24 { top: 24%; }
.shs-x-25 { left: 25%; }
.shs-y-25 { top: 25%; }
.shs-x-26 { left: 26%; }
.shs-y-26 { top: 26%; }
.shs-x-27 { left: 27%; }
.shs-y-27 { top: 27%; }
.shs-x-28 { left: 28%; }
.shs-y-28 { top: 28%; }
.shs-x-29 { left: 29%; }
.shs-y-29 { top: 29%; }
.shs-x-30 { left: 30%; }
.shs-y-30 { top: 30%; }
.shs-x-31 { left: 31%; }
.shs-y-31 { top: 31%; }
.shs-x-32 { left: 32%; }
.shs-y-32 { top: 32%; }
.shs-x-33 { left: 33%; }
.shs-y-33 { top: 33%; }
.shs-x-34 { left: 34%; }
.shs-y-34 { top: 34%; }
.shs-x-35 { left: 35%; }
.shs-y-35 { top: 35%; }
.shs-x-36 { left: 36%; }
.shs-y-36 { top: 36%; }
.shs-x-37 { left: 37%; }
.shs-y-37 { top: 37%; }
.shs-x-38 { left: 38%; }
.shs-y-38 { top: 38%; }
.shs-x-39 { left: 39%; }
.shs-y-39 { top: 39%; }
.shs-x-40 { left: 40%; }
.shs-y-40 { top: 40%; }
.shs-x-41 { left: 41%; }
.shs-y-41 { top: 41%; }
.shs-x-42 { left: 42%; }
.shs-y-42 { top: 42%; }
.shs-x-43 { left: 43%; }
.shs-y-43 { top: 43%; }
.shs-x-44 { left: 44%; }
.shs-y-44 { top: 44%; }
.shs-x-45 { left: 45%; }
.shs-y-45 { top: 45%; }
.shs-x-46 { left: 46%; }
.shs-y-46 { top: 46%; }
.shs-x-47 { left: 47%; }
.shs-y-47 { top: 47%; }
.shs-x-48 { left: 48%; }
.shs-y-48 { top: 48%; }
.shs-x-49 { left: 49%; }
.shs-y-49 { top: 49%; }
.shs-x-50 { left: 50%; }
.shs-y-50 { top: 50%; }
.shs-x-51 { left: 51%; }
.shs-y-51 { top: 51%; }
.shs-x-52 { left: 52%; }
.shs-y-52 { top: 52%; }
.shs-x-53 { left: 53%; }
.shs-y-53 { top: 53%; }
.shs-x-54 { left: 54%; }
.shs-y-54 { top: 54%; }
.shs-x-55 { left: 55%; }
.shs-y-55 { top: 55%; }
.shs-x-56 { left: 56%; }
.shs-y-56 { top: 56%; }
.shs-x-57 { left: 57%; }
.shs-y-57 { top: 57%; }
.shs-x-58 { left: 58%; }
.shs-y-58 { top: 58%; }
.shs-x-59 { left: 59%; }
.shs-y-59 { top: 59%; }
.shs-x-60 { left: 60%; }
.shs-y-60 { top: 60%; }
.shs-x-61 { left: 61%; }
.shs-y-61 { top: 61%; }
.shs-x-62 { left: 62%; }
.shs-y-62 { top: 62%; }
.shs-x-63 { left: 63%; }
.shs-y-63 { top: 63%; }
.shs-x-64 { left: 64%; }
.shs-y-64 { top: 64%; }
.shs-x-65 { left: 65%; }
.shs-y-65 { top: 65%; }
.shs-x-66 { left: 66%; }
.shs-y-66 { top: 66%; }
.shs-x-67 { left: 67%; }
.shs-y-67 { top: 67%; }
.shs-x-68 { left: 68%; }
.shs-y-68 { top: 68%; }
.shs-x-69 { left: 69%; }
.shs-y-69 { top: 69%; }
.shs-x-70 { left: 70%; }
.shs-y-70 { top: 70%; }
.shs-x-71 { left: 71%; }
.shs-y-71 { top: 71%; }
.shs-x-72 { left: 72%; }
.shs-y-72 { top: 72%; }
.shs-x-73 { left: 73%; }
.shs-y-73 { top: 73%; }
.shs-x-74 { left: 74%; }
.shs-y-74 { top: 74%; }
.shs-x-75 { left: 75%; }
.shs-y-75 { top: 75%; }
.shs-x-76 { left: 76%; }
.shs-y-76 { top: 76%; }
.shs-x-77 { left: 77%; }
.shs-y-77 { top: 77%; }
.shs-x-78 { left: 78%; }
.shs-y-78 { top: 78%; }
.shs-x-79 { left: 79%; }
.shs-y-79 { top: 79%; }
.shs-x-80 { left: 80%; }
.shs-y-80 { top: 80%; }
.shs-x-81 { left: 81%; }
.shs-y-81 { top: 81%; }
.shs-x-82 { left: 82%; }
.shs-y-82 { top: 82%; }
.shs-x-83 { left: 83%; }
.shs-y-83 { top: 83%; }
.shs-x-84 { left: 84%; }
.shs-y-84 { top: 84%; }
.shs-x-85 { left: 85%; }
.shs-y-85 { top: 85%; }
.shs-x-86 { left: 86%; }
.shs-y-86 { top: 86%; }
.shs-x-87 { left: 87%; }
.shs-y-87 { top: 87%; }
.shs-x-88 { left: 88%; }
.shs-y-88 { top: 88%; }
.shs-x-89 { left: 89%; }
.shs-y-89 { top: 89%; }
.shs-x-90 { left: 90%; }
.shs-y-90 { top: 90%; }
.shs-x-91 { left: 91%; }
.shs-y-91 { top: 91%; }
.shs-x-92 { left: 92%; }
.shs-y-92 { top: 92%; }
.shs-x-93 { left: 93%; }
.shs-y-93 { top: 93%; }
.shs-x-94 { left: 94%; }
.shs-y-94 { top: 94%; }
.shs-x-95 { left: 95%; }
.shs-y-95 { top: 95%; }
.shs-x-96 { left: 96%; }
.shs-y-96 { top: 96%; }
.shs-x-97 { left: 97%; }
.shs-y-97 { top: 97%; }
.shs-x-98 { left: 98%; }
.shs-y-98 { top: 98%; }
.shs-x-99 { left: 99%; }
.shs-y-99 { top: 99%; }
.shs-x-100 { left: 100%; }
.shs-y-100 { top: 100%; }
body.omnidata-role-system .shs-root .shs-mode.shs-mode,
body.omnidata-v14 .shs-root .shs-mode.shs-mode { min-height: 44px !important; min-width: 64px !important; }
body.omnidata-role-system .shs-root .shs-spot.shs-spot:not(.shs-spot-edit),
body.omnidata-v14 .shs-root .shs-spot.shs-spot:not(.shs-spot-edit) { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; }
body.omnidata-role-system .shs-quick .shs-spot.shs-spot { width: 44px !important; height: 44px !important; }
body.omnidata-role-system .shs-root .shs-spot.shs-spot:not(.shs-spot-edit),
body.omnidata-v14 .shs-root .shs-spot.shs-spot:not(.shs-spot-edit),
body.omnidata-role-system .shs-quick .shs-spot.shs-spot { border: 2px solid #fff !important; border-radius: 50% !important; background: var(--od14-accent, #ff5b22) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(30, 34, 40, .35) !important; font-size: 18px !important; }
body.omnidata-role-system .shs-root .shs-spot-edit.shs-spot-edit { border-radius: 50% !important; background: var(--od14-accent, #ff5b22) !important; color: #fff !important; border: 2px solid #fff !important; }
.shs-quick .shs-quick-foot { z-index: 6; }
.shs-quick .shs-quick-head { z-index: 7; }
.shs-quick .shs-matrix-wrap, .shs-quick .shs-matrix thead th, .shs-quick .shs-matrix tbody th { position: static !important; }
@media (max-width: 719px) { .shs-stage { aspect-ratio: 4 / 3; max-height: 34dvh; } }
body.omnidata-role-system .shs-quick .shs-matrix tbody th, body.omnidata-role-system .shs-quick .shs-matrix thead th:first-child { width: 96px !important; min-width: 0 !important; max-width: 110px !important; white-space: normal !important; overflow-wrap: anywhere; text-align: left !important; font-size: 12px !important; }
body.omnidata-role-system .shs-quick .shs-matrix tbody th .shs-dot, body.omnidata-role-system .shs-quick .shs-matrix tbody th svg { display: block; margin: 0 0 4px; }
body.omnidata-role-system .shs-quick .shs-status:empty { display: none !important; }

/* ---- Страница гостя (/guest) ---- */
.shs-guest-body { margin: 0; background: var(--od14-bg, #f3f4f5); color: var(--od14-text, #2f3339); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.shs-guest { max-width: 1080px; margin: 0 auto; padding: 20px 16px 48px; }
.shs-guest h1 { margin: 0; font-size: 22px; }
.shs-guest .muted { color: var(--od14-text-soft, #626871); font-size: 13px; margin: 4px 0 0; }
.shs-guest-form { display: grid; gap: 12px; max-width: 420px; margin: 12vh auto 0; padding: 20px; border: 1px solid var(--od14-line, #e0e3e7); border-radius: 12px; background: var(--od14-surface, #fff); }
.shs-guest-form label { display: grid; gap: 6px; font-size: 13px; }
.shs-guest-form input { min-height: 44px; padding: 0 12px; border: 1px solid var(--od14-line-strong, #d2d6dc); border-radius: 8px; font: inherit; font-size: 16px; }
.shs-guest-go { min-height: 44px; border: 0; border-radius: 8px; background: var(--od14-accent-hover, #e94d14); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .14s cubic-bezier(.23, 1, .32, 1); }
.shs-guest-go:active { transform: scale(.97); }
.shs-guest-go:disabled { opacity: .6; }
.shs-guest-error { min-height: 16px; margin: 0; font-size: 13px; color: var(--od14-danger, #ad464b); }
.shs-guest-head { display: grid; gap: 2px; }
.shs-hanger-static { cursor: default; }
.shs-hanger-static:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .shs-guest-go { transition: none; } .shs-guest-go:active { transform: none; } }

/* ---- Ссылки для гостей в редакторе бренда ---- */
.shs-links { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--shs-line); border-radius: var(--shs-radius); background: var(--shs-surface); }
.shs-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.shs-link-new { padding: 10px; border: 1px dashed var(--od14-accent, #ff5b22); border-radius: 8px; overflow-wrap: anywhere; font-size: 13px; }