/* DESTEK — общие стили модалки и фильтра; цвета задаёт каждый вариант через переменные */
.dx-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1),visibility 0s .25s}
.dx-modal.on{visibility:visible;opacity:1;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
.dx-back{position:absolute;inset:0;background:rgba(236,242,236,.78);backdrop-filter:blur(10px)}
.dx-box{position:relative;width:min(1040px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:24px;transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.dx-modal.on .dx-box{transform:none}
.dx-x{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:24px;line-height:1;cursor:pointer}
.dx-body{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;padding:32px}
.dx-stage{aspect-ratio:1;border-radius:16px;background:var(--stage,radial-gradient(circle at 50% 40%,#fff,#eef1ee));display:grid;place-items:center;overflow:hidden}
.dx-stage img{max-width:84%;max-height:84%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.22))}
.dx-stage:not(.cut) img{max-width:100%;max-height:100%;filter:none}
.dx-thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.dx-thumbs button{width:64px;height:64px;border-radius:12px;border:1px solid var(--line);background:var(--stage,#f3f5f3);padding:6px;cursor:pointer}
.dx-thumbs button.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.dx-thumbs img{width:100%;height:100%;object-fit:contain}
.dx-brand{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dx-info h3{font-size:32px;line-height:1.1;letter-spacing:-.02em;margin:12px 0 8px;font-weight:600}
.dx-code{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:14px;padding:4px 10px;border-radius:999px;background:var(--chip,rgba(111,212,74,.14));color:var(--acc-text,var(--fg))}
.dx-info p{color:var(--muted);line-height:1.6;margin:16px 0 24px;font-size:16px}
.dx-docs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.dx-tab{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;font:inherit;font-size:14px}
.dx-tab.on{background:var(--acc);color:var(--on-acc,#0b1a06);border-color:var(--acc)}
.dx-cta{display:flex;gap:8px;flex-wrap:wrap}
.dx-btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:999px;background:var(--acc);color:var(--on-acc,#0b1a06);font-weight:600;text-decoration:none;transition:transform .15s}
.dx-btn:active{transform:scale(.98)}
.dx-btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.dx-doc{grid-column:1/-1}
.dx-doc img{width:100%;border-radius:16px;border:1px solid var(--line);background:#fff}
@media (max-width:760px){.dx-body{grid-template-columns:1fr;padding:20px;gap:20px}.dx-info h3{font-size:24px}.dx-modal{padding:12px}}
[data-tabs]{display:flex;gap:8px;flex-wrap:wrap}
[data-tabs] button{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-size:14px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
[data-tabs] button span{opacity:.5;font-variant-numeric:tabular-nums;margin-left:4px}
[data-tabs] button.on{background:var(--acc);color:var(--on-acc,#0b1a06);border-color:var(--acc)}
[data-id][hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}