/* Раздел «Возможности» — шесть нарисованных сцен (лэндинг). Каждый корень сцены —
   .gs.gs-<id> (id: plots, limits, registry, tasks, reporting, market), нарисован
   плавностями js/landing-scenes/*.js внутри «эталонного кадра» 1100×619 (телефон — 480×600).
   Источник — макеты docs/superpowers/mockups/2026-09-25-landing-showcase/
   (scenes2-6.html строки 6–244, scene1.html строки 6–72). Значения — как в макете,
   ничего не «улучшено»; список переноса — план Task 6.
   Без backdrop-filter (пересчитывается каждый кадр поверх карты) и без внешних адресов —
   шрифты грузит styles/fonts.css, картинки/данные несёт сам скрипт сцены. */

.gs {
  --f1000: #01140f; --f950: #021b15; --f900: #03271f;
  --g300: #7fd3a8; --g200: #a9e4c2; --muted: rgba(232, 245, 238, .68);
  --red: #ff7d72; --amber: #f2b35b; --blue: #8fb4ff;
  --glass: rgba(3, 30, 23, .92); --edge: rgba(169, 228, 194, .2);
  position: absolute; inset: 0; overflow: hidden; background: #041c16; color: #fff;
  font: 16px/1.55 Onest, 'Segoe UI', sans-serif; text-rendering: auto;
}
/* гасим общие правила лэндинга (body — text-rendering: optimizeLegibility, как в макетах — auto); его h3 { letter-spacing: -.025em; text-wrap: balance } сцены не наследуют */
.gs h3 { letter-spacing: normal; text-wrap: wrap; }

/* ---------- каркас сцены: эталонный кадр, карта-плоскость, подписи, виньетка ---------- */
.gs .fix { position: absolute; left: 0; top: 0; width: 1100px; height: 619px; transform-origin: 0 0; }
.gs .plane-wrap { position: absolute; inset: 0; perspective: 1150px; perspective-origin: 50% 38%; }
.gs .plane { position: absolute; left: -35%; top: -35%; width: 170%; height: 170%; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.gs .plane canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs .slice { position: absolute; left: 0; top: 0; overflow: visible; transform-origin: 0 0; will-change: transform, opacity; }
.gs .post { position: absolute; left: 0; top: 0; width: 1.5px; transform-origin: 0 0; background: linear-gradient(rgba(255,255,255,.75), rgba(169,228,194,.15)); }
.gs .lab3d { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; white-space: nowrap; }
.gs .tag { padding: 6px 10px; border-radius: 8px; background: rgba(3,30,23,.9); border: 1px solid rgba(169,228,194,.35); font: 600 12px/1.2 Onest, sans-serif; color: #fff; box-shadow: 0 8px 20px rgba(0,12,8,.4); }
.gs .tag i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
.gs .vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,28,22,.7), rgba(4,28,22,0) 20%), radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(2,20,15,.72) 100%); }
.gs .ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ---------- общие элементы интерфейса сцен ---------- */
.gs .glass { background: var(--glass); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,12,8,.45); }
.gs .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 11px; color: rgba(255,255,255,.86); background: rgba(3,30,23,.9); border: 1px solid var(--edge); box-shadow: 0 10px 26px rgba(0,14,10,.35); font: 600 12.5px Onest, sans-serif; white-space: nowrap; transition: border-color .25s, background .25s, box-shadow .25s; }
.gs .chip.on { border-color: rgba(169,228,194,.7); background: rgba(10,70,52,.82); box-shadow: 0 10px 26px rgba(0,14,10,.35), 0 0 22px rgba(127,211,168,.22); }
.gs .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gs .gs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 11px; font: 700 13.5px Onest, sans-serif; white-space: nowrap; }
.gs .gs-btn.pri { color: var(--f1000); background: var(--g300); box-shadow: 0 12px 30px rgba(127,211,168,.25); }
.gs .gs-btn.sec { color: #fff; background: rgba(3,30,23,.72); border: 1px solid rgba(169,228,194,.35); }
.gs .pill { position: absolute; padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.95); color: #03271f; box-shadow: 0 10px 28px rgba(0,12,8,.4); font: 700 13px/1 'JetBrains Mono', monospace; white-space: nowrap; }
.gs .pill small { margin-left: 6px; font: 600 11px Onest, sans-serif; color: #0a6b4d; }
.gs .cursor { position: absolute; left: 0; top: 0; width: 26px; height: 32px; opacity: 0; filter: drop-shadow(0 6px 8px rgba(0,16,11,.5)); z-index: 50; will-change: transform, opacity; }
.gs .ripple { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(127,211,168,.18); opacity: 0; z-index: 49; will-change: transform, opacity; }
.gs .mono { font-family: 'JetBrains Mono', monospace; }

/* ---------- сцена «plots» (scene1.html) — своя надстройка над каркасом ----------
   .chip слит с общим .chip выше (одно правило); все расхождения scene1.html
   с общим .chip/.pill/.cursor/.ripple/.lab3d/.slice (в т.ч. размер шрифта чипов
   тулбара) собраны отдельным блоком «сцена «plots» — точные значения» ближе к концу
   файла, под .gs.gs-plots — так они не задевают сцены 02–06. */
.gs .toolbar { position: absolute; top: 18px; left: 50%; display: flex; gap: 8px; transform: translateX(-50%); }
.gs .chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--g300); box-shadow: 0 0 0 3px rgba(127,211,168,.14); transition: box-shadow .3s; }
.gs .chip.on i { box-shadow: 0 0 0 4px rgba(127,211,168,.25), 0 0 12px rgba(127,211,168,.9); }
.gs .chip.red i { background: #ff7d72; box-shadow: 0 0 0 3px rgba(255,125,114,.14); }
.gs .chip.red.on { border-color: rgba(255,150,140,.65); box-shadow: 0 10px 26px rgba(0,14,10,.35), 0 0 0 3px rgba(255,125,114,.12), 0 0 24px rgba(255,125,114,.2); }
.gs .chip.red.on i { box-shadow: 0 0 0 4px rgba(255,125,114,.25), 0 0 12px rgba(255,125,114,.9); }
.gs .chip.draw i { width: 14px; height: 14px; border-radius: 0; background: none; box-shadow: none; }
.gs .basemap { position: absolute; top: 18px; right: 18px; display: flex; padding: 4px; border-radius: 12px; background: rgba(3,30,23,.9); border: 1px solid rgba(169,228,194,.2); font: 600 12px Onest, sans-serif; opacity: 0; }
.gs .basemap span { position: relative; z-index: 1; width: 78px; padding: 6px 0; text-align: center; color: rgba(255,255,255,.72); transition: color .3s; }
.gs .basemap .sel { position: absolute; z-index: 0; left: 4px; top: 4px; width: 78px; height: calc(100% - 8px); border-radius: 9px; background: var(--g300); }
.gs .fog { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, #041c16 0%, rgba(4,28,22,.8) 7%, rgba(4,28,22,0) 20%); }
/* подписи-карточки над пластами есть только в scene1.html; в scenes2-6.html у .lab3d внутри — .tag с <b class="mono">,
   поэтому правила ниже — только для сцены 01 (иначе <b> гектаров сцены 02 становился блоком и шрифтом Onest) */
.gs.gs-plots .lab3d .card { padding: 8px 11px 9px; border-radius: 11px; background: rgba(3,30,23,.94); border: 1px solid rgba(169,228,194,.3); box-shadow: 0 12px 30px rgba(0,12,8,.45); white-space: nowrap; }
.gs.gs-plots .lab3d b { display: block; font: 700 13px/1.2 Onest, sans-serif; color: #fff; }
.gs.gs-plots .lab3d span { display: block; margin-top: 3px; font: 500 10.5px/1.2 'JetBrains Mono', monospace; color: var(--g200); letter-spacing: .02em; }
.gs.gs-plots .lab3d.red span { color: #ffb1a9; }
.gs.gs-plots .lab3d .stem { width: 1px; height: 38px; margin: 0 auto; background: linear-gradient(rgba(169,228,194,.8), rgba(169,228,194,0)); }
.gs.gs-plots .lab3d.red .stem { background: linear-gradient(rgba(255,160,150,.8), rgba(255,160,150,0)); }
/* сцена 01: координаты нарисованного участка — таблица в левом нижнем углу и номера у вершин
   (спека docs/superpowers/specs/2026-10-01-scene01-plot-coordinates-design.md) */
.gs.gs-plots .pc-card { position: absolute; left: 22px; bottom: 22px; padding: 11px 14px 10px; border-radius: 12px; background: rgba(3,30,23,.92); border: 1px solid rgba(169,228,194,.22); box-shadow: 0 14px 34px rgba(0,12,8,.5); font: 500 12px/1 'JetBrains Mono', monospace; color: #e9fff5; opacity: 0; }
.gs.gs-plots .pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.gs.gs-plots .pc-head b { font: 600 12.5px Onest, sans-serif; color: #fff; }
.gs.gs-plots .pc-head span { font: 500 11.5px Onest, sans-serif; color: rgba(232,245,238,.6); }
.gs.gs-plots .pc-cols, .gs.gs-plots .pc-row { display: flex; align-items: center; gap: 12px; }
.gs.gs-plots .pc-cols span, .gs.gs-plots .pc-row span { flex: none; }
.gs.gs-plots .pc-cols span:first-child, .gs.gs-plots .pc-row span:first-child { width: 16px; }
.gs.gs-plots .pc-cols span:nth-child(2), .gs.gs-plots .pc-row span:nth-child(2) { width: 88px; }
.gs.gs-plots .pc-cols { margin-bottom: 2px; font: 500 11.5px Onest, sans-serif; color: rgba(232,245,238,.55); }
.gs.gs-plots .pc-row { height: 18.5px; padding: 0 6px; margin: 0 -6px; border-radius: 6px; opacity: 0; }
.gs.gs-plots .pc-row span:first-child { color: rgba(232,245,238,.5); }
.gs.gs-plots .pc-row.cur { background: rgba(127,211,168,.16); }
.gs.gs-plots .pc-num { position: absolute; left: 0; top: 0; font: 700 11.5px/1 'JetBrains Mono', monospace; color: #fff; text-shadow: 0 0 3px #02180f, 0 0 3px #02180f, 0 1px 2px #02180f; opacity: 0; }
/* Правило макета scene1.html «@media (max-width: 760px) { .chip — мельче; .basemap — нет }» не перенесено: в макете кнопки
   стоят в пикселях окна и на узком окне не помещались, а в сцене они внутри эталонного кадра и уменьшаются вместе с ним.
   Перенесённое, оно на окнах 561–760 px прятало переключатель «Схема | Спутник» (курсор уезжал к несуществующей кнопке)
   и уменьшало фильтры сцены «Биржа», у которой в макете такого правила нет. */

/* ---------- сцена «limits» (в макете — s2, «Ограничения») ---------- */
.gs .s2-panel { position: absolute; left: 22px; top: 22px; width: 250px; padding: 12px 14px; }
.gs .s2-panel h4 { margin: 0 0 8px; font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--g200); text-transform: uppercase; }
.gs .s2-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: 600 13px Onest, sans-serif; color: rgba(255,255,255,.8); }
.gs .sw { width: 30px; height: 17px; flex: none; border-radius: 9px; background: rgba(255,255,255,.14); position: relative; transition: background .25s; }
.gs .sw b { position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .25s; }
.gs .s2-row.on .sw b { transform: translateX(13px); }
.gs .s2-row .dot { margin-left: auto; }
.gs .s2-btn { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); }
.gs .s2-card { position: absolute; right: 22px; top: 22px; width: 318px; padding: 16px 16px 12px; }
.gs .s2-card h3 { margin: 0; font: 700 16px Onest, sans-serif; }
.gs .s2-card .k { font: 600 11px 'JetBrains Mono', monospace; color: var(--g200); letter-spacing: .06em; text-transform: uppercase; }
.gs .s2-item { padding: 10px 0 8px; border-top: 1px solid rgba(255,255,255,.08); }
.gs .s2-item:first-of-type { border-top: 0; }
.gs .s2-item .top { display: flex; align-items: center; gap: 9px; font: 600 13px/1.3 Onest, sans-serif; }
.gs .s2-item .v { margin-left: auto; white-space: nowrap; padding-left: 10px; font: 700 13px 'JetBrains Mono', monospace; }
.gs .s2-item .bar { height: 4px; margin-top: 7px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.gs .s2-item .bar b { display: block; height: 100%; transform-origin: 0 50%; border-radius: 2px; }
.gs .s2-item .pc { margin-top: 3px; font: 500 10.5px 'JetBrains Mono', monospace; color: rgba(255,255,255,.5); }
.gs .s2-foot { margin-top: 6px; font: 500 10.5px/1.4 Onest, sans-serif; color: rgba(255,255,255,.45); }
/* как выглядит утверждённый макет: в scenes2-6.html на полоску доли действует и правило панели страницы
   .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px } — заполнение
   (<b> без ширины во flex-контейнере) не видно, под каждой строкой 16 px воздуха. Убрать правило — появятся
   цветные полоски долей (их анимирует scaleX сцены), карточка станет ниже. */
.gs .s2-item .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }

/* ---------- сцена «registry» (в макете — sr, «Реестр и аукционы») ---------- */
.gs .sr-sync { position: absolute; left: 50%; top: 20px; display: flex; align-items: center; gap: 10px; padding: 9px 15px; font: 600 12.5px Onest, sans-serif; color: rgba(255,255,255,.85); white-space: nowrap; }
.gs .sr-sync b { color: #c4b5fd; font-weight: 700; }
.gs .sr-sync b.t { color: #67e8f9; }
.gs .spin { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid rgba(169,228,194,.25); border-top-color: var(--g300); display: grid; place-items: center; }
.gs .spin.ok { border-color: transparent; background: var(--g300); }
.gs .spin.ok::after { content: ''; width: 7px; height: 4px; margin-top: -2px; border-left: 2px solid #01140f; border-bottom: 2px solid #01140f; transform: rotate(-45deg); }
.gs .sr-cnt { position: absolute; left: 22px; top: 22px; padding: 10px 14px; }
.gs .sr-cnt .k { display: block; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--g200); }
.gs .sr-cnt b { font-size: 24px; line-height: 1.1; }
.gs .pin .lbl.sr-new { border-color: rgba(167,139,250,.55); color: #ddd6fe; }
.gs .pin .lbl.sr-auc { border-color: rgba(34,184,214,.55); color: #a5f3fc; }
.gs .sr-meta { margin-top: 3px; font: 500 12px Onest, sans-serif; color: rgba(255,255,255,.6); }
.gs .sr-price { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; font: 500 11.5px Onest, sans-serif; color: rgba(255,255,255,.6); }
.gs .sr-price b { margin-left: auto; font-size: 18px; color: #fff; }
.gs .sr-steps { position: relative; display: flex; justify-content: space-between; margin: 16px 6px 6px; }
.gs .sr-steps::before { content: ''; position: absolute; left: 6px; right: 6px; top: 5px; height: 2px; background: rgba(255,255,255,.12); }
.gs .sr-steps i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: #06241c; }
.gs .sr-steps i.on { border-color: #22b8d6; background: #22b8d6; box-shadow: 0 0 0 4px rgba(34,184,214,.2); }
.gs .sr-fill { position: absolute; left: 6px; right: 6px; top: 5px; height: 2px; background: #22b8d6; transform-origin: 0 50%; }
.gs .sr-stl { display: flex; justify-content: space-between; font: 600 10px Onest, sans-serif; color: rgba(255,255,255,.5); }
.gs .sr-stl span.on { color: #a5f3fc; }
.gs .sr-left { margin-top: 12px; font: 500 12px Onest, sans-serif; color: rgba(255,255,255,.75); }
.gs .sr-left b { font-size: 17px; color: #67e8f9; margin-right: 4px; }
.gs .sr-dates { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font: 500 11px Onest, sans-serif; color: rgba(255,255,255,.55); }
.gs .sr-dates b { display: block; font-size: 12.5px; color: #fff; }
/* в макете .ad .docs span (сцена «Биржа») объявлен раньше .sr-card .docs span — при равном весе бирюзовые ссылки карточки
   аукциона побеждают; здесь блок «market» идёт ниже, поэтому у правила на класс больше (иначе ссылки становились зелёными) */
.gs .ad.sr-card .docs span { background: rgba(34,184,214,.14); color: #a5f3fc; }
.gs .sr-reg { position: absolute; left: 34px; top: 22px; right: 34px; bottom: 30px; padding: 18px 20px; opacity: 0; background: rgba(4,31,25,.95); }
.gs .sr-rh { display: flex; align-items: center; gap: 16px; }
.gs .sr-rh h3 { margin: 0 4px 0 0; font: 700 20px Onest, sans-serif; }
.gs .sr-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.gs .sr-seg span { padding: 7px 12px; border-radius: 8px; font: 600 12.5px Onest, sans-serif; color: rgba(255,255,255,.65); white-space: nowrap; transition: background .2s, color .2s; }
.gs .sr-seg span b { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.1); font-size: 11px; }
/* у вкладки «Участки» прибавка «+N» появляется вместе со строками новых участков; пока их нет — плашки нет */
.gs .sr-seg span b:empty { display: none; }
.gs .sr-seg span.on { color: #01140f; background: var(--g300); }
.gs .sr-seg span.on b { background: rgba(1,20,15,.15); }
.gs .sr-search { margin-left: auto; width: 250px; padding: 8px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.38); font: 500 12px Onest, sans-serif; white-space: nowrap; }
.gs .sr-view { position: absolute; left: 20px; right: 20px; top: 76px; bottom: 16px; }
.gs .sr-th { display: flex; align-items: center; height: 28px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.gs .sr-body { position: relative; margin-top: 8px; }
.gs .sr-row { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; font: 500 12.5px Onest, sans-serif; color: rgba(255,255,255,.8); background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); }
.gs .sr-row b { color: #fff; font-weight: 650; }
.gs .sr-row.fresh { background: rgba(124,58,237,.16); border-color: rgba(167,139,250,.45); box-shadow: inset 3px 0 0 #a78bfa; }
.gs .sr-row.hot { background: rgba(8,145,178,.15); border-color: rgba(34,184,214,.45); box-shadow: inset 3px 0 0 #22b8d6; }
.gs .sr-row em { margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(167,139,250,.28); color: #ede9fe; font: 700 10px Onest, sans-serif; font-style: normal; }
.gs .sr-row em.t { background: rgba(34,184,214,.28); color: #cffafe; }
.gs .sr-row small { display: block; font: 500 10.5px Onest, sans-serif; color: #c4b5fd; }
.gs .c1 { width: 48px; flex: none; }
.gs .c2 { flex: 1.5; min-width: 0; padding-right: 12px; white-space: nowrap; overflow: hidden; }
.gs .c3 { width: 92px; flex: none; }
.gs .c4 { width: 110px; flex: none; }
.gs .c5 { width: 96px; flex: none; text-align: right; padding-right: 20px; }
.gs .c6 { width: 150px; flex: none; }
.gs .c7 { width: 118px; flex: none; }
.gs .c8 { width: 120px; flex: none; }
.gs .c9 { flex: 1.7; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; }
.gs .st { padding: 3px 9px; border-radius: 999px; font: 600 11px Onest, sans-serif; font-style: normal; white-space: nowrap; }
.gs .st-act { background: rgba(46,204,143,.16); color: #86efac; }
.gs .st-una { background: rgba(255,125,114,.16); color: #fca5a5; }
.gs .st-aucr { background: rgba(34,184,214,.2); color: #a5f3fc; }
.gs .st-auct { background: rgba(242,179,91,.16); color: #fcd34d; }
.gs .st-aucok { background: rgba(127,211,168,.18); color: var(--g200); }
.gs .st-aucno { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.gs #srV2 .c2 { flex: 1; }
.gs #srV2 .c3 { width: 76px; }
.gs #srV2 .c6 { width: 138px; }
.gs #srV2 .c7 { width: 108px; }
.gs #srV2 .c8 { width: 110px; }
.gs #srV2 .c9 { flex: 2.4; }
.gs .win i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; background: #0a8a62; vertical-align: -1px; }

/* ---------- сцена «tasks» (в макете — s3, «Сроки и задачи») ---------- */
.gs.gs-tasks { background: radial-gradient(circle at 80% 10%, rgba(31,137,100,.18), transparent 45%), #041c16; }
.gs .s3-head { position: absolute; left: 40px; right: 40px; top: 24px; display: flex; align-items: center; gap: 12px; }
.gs .s3-head h3 { margin: 0; font: 700 21px Onest, sans-serif; letter-spacing: -.01em; }
.gs .s3-head .org { color: rgba(255,255,255,.5); font: 500 13px Onest, sans-serif; }
.gs .today { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font: 600 12.5px Onest, sans-serif; color: rgba(255,255,255,.75); }
.gs .today b { display: inline-block; min-width: 70px; color: #fff; font: 700 13px 'JetBrains Mono', monospace; }
.gs .bell { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transform-origin: 50% 20%; }
.gs .bell .badge { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 700 11px/18px Onest, sans-serif; text-align: center; transform: scale(0); }
.gs .toast { position: absolute; right: 40px; top: 72px; width: 330px; padding: 12px 14px; display: flex; gap: 11px; align-items: flex-start; z-index: 20; }
.gs .toast .ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(242,179,91,.16); color: var(--amber); }
.gs .toast b { display: block; font: 700 13px Onest, sans-serif; }
.gs .toast span { display: block; margin-top: 2px; font: 500 12px/1.35 Onest, sans-serif; color: rgba(255,255,255,.7); }
.gs .tiles { position: absolute; left: 40px; right: 40px; top: 82px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gs .tile { padding: 12px 14px; border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.gs .tile .n { display: block; height: 30px; overflow: hidden; font: 700 25px/30px 'JetBrains Mono', monospace; }
.gs .tile .n i { display: block; font-style: normal; }
.gs .tile .l { font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.gs .tile.red .n { color: var(--red); }
.gs .tile.amber .n { color: var(--amber); }
.gs .tile.blue .n { color: var(--blue); }
.gs .tile.green .n { color: var(--g300); }
.gs .yl { position: absolute; left: 40px; right: 40px; top: 170px; height: 70px; padding: 12px 18px; border-radius: 13px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); }
.gs .yl .cap { display: flex; font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .08em; color: rgba(255,255,255,.72); text-transform: uppercase; }
.gs .yl .cap span { margin-left: auto; letter-spacing: 0; text-transform: none; font: 600 12px Onest, sans-serif; color: rgba(255,255,255,.6); }
.gs .track { position: absolute; left: 18px; right: 18px; top: 44px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); }
.gs .track .fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, rgba(127,211,168,.25), var(--g300)); }
.gs .mk { position: absolute; top: -5px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #0b2e25; border: 2px solid rgba(255,255,255,.4); }
.gs .mk em { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); font: 600 9.5px 'JetBrains Mono', monospace; font-style: normal; color: rgba(255,255,255,.55); }
.gs .mk.near { border-color: var(--amber); background: #3a2a10; box-shadow: 0 0 0 4px rgba(242,179,91,.18); }
.gs .mk.done { border-color: var(--g300); background: var(--g300); }
.gs .nowh { position: absolute; top: -9px; width: 2px; height: 21px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.7); }
.gs .list { position: absolute; left: 40px; right: 40px; top: 256px; }
.gs .row { position: absolute; left: 0; right: 0; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 16px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.gs .row .sd { width: 9px; height: 9px; border-radius: 50%; background: #9fb3c8; flex: none; }
.gs .row .tt { font: 650 14.5px Onest, sans-serif; }
.gs .row .mt { margin-top: 2px; font: 500 11.5px Onest, sans-serif; color: rgba(255,255,255,.5); }
.gs .row .auto { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(127,211,168,.15); color: var(--g200); font: 600 10.5px Onest, sans-serif; }
.gs .due { margin-left: auto; min-width: 150px; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); text-align: right; }
.gs .due b { display: block; font: 700 12.5px 'JetBrains Mono', monospace; }
.gs .due span { display: block; font: 600 11px Onest, sans-serif; color: rgba(255,255,255,.55); }
.gs .due.amber { border-color: rgba(242,179,91,.55); background: rgba(242,179,91,.1); }
.gs .due.amber span { color: var(--amber); }
.gs .due.red { border-color: rgba(255,125,114,.6); background: rgba(255,125,114,.1); }
.gs .due.red span { color: var(--red); }
.gs .due.done { border-color: rgba(127,211,168,.55); background: rgba(127,211,168,.1); }
.gs .due.done span { color: var(--g300); }
.gs .ck { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.gs .ck path { fill: none; stroke: var(--g300); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }

/* ---------- сцена «reporting» (в макете — s4, «Отчётность») ---------- */
.gs.gs-reporting { background: radial-gradient(circle at 20% 80%, rgba(31,137,100,.16), transparent 45%), #041c16; }
.gs .mv { position: absolute; left: 36px; top: 40px; width: 360px; padding: 18px 18px 14px; }
.gs .mv h3 { margin: 0; font: 700 16px Onest, sans-serif; }
.gs .mv .s { margin: 3px 0 12px; font: 500 12px Onest, sans-serif; color: rgba(255,255,255,.55); }
.gs .mvr { position: relative; display: flex; align-items: baseline; padding: 10px 10px; margin: 0 -10px; border-radius: 9px; font: 500 13px Onest, sans-serif; color: rgba(255,255,255,.75); }
.gs .mvr b { margin-left: auto; color: #fff; font: 700 14px 'JetBrains Mono', monospace; }
.gs .mvr.hl { background: rgba(127,211,168,.12); box-shadow: inset 0 0 0 1px rgba(127,211,168,.35); }
.gs .mvr + .mvr { border-top: 1px solid rgba(255,255,255,.06); }
/* отклонение от макета ради плавности: у строк 2–6 рамка сверху 1 px, и при радиусе 9 px внутренние верхние углы (по ним
   идёт кольцо подсветки .mvr.hl — inset box-shadow) эллиптические 9 × 8 px, а нижние круглые 9 × 9. Такое смешанное скругление
   Ganesh (Chrome, растр видеокартой) рисует так, что прогрев под заставкой его не покрывает (пробовались точный момент,
   плотная серия кадров, прогон после въезда панели, без заставки): на первом круге подсветка второй строки (1,85 с) давала
   кадр 49–139 мс в 8 прогонах из 8. Внешние верхние радиусы 9 × 10 px делают внутренние углы круглыми 9 × 9 — этого кадра
   больше нет (1440 × 900: 6 прогонов Ganesh/Graphite из 6 без медленных кадров); на снимке против макета разница в углах
   строк — до 12 из 255 по каналу, средняя по кадру не изменилась. */
.gs .mvr + .mvr { border-radius: 9px 9px 9px 9px / 10px 10px 9px 9px; }
.gs .prog4 { margin-top: 10px; font: 600 11.5px 'JetBrains Mono', monospace; color: var(--g200); }
.gs .sheet { position: absolute; left: 432px; top: 26px; width: 630px; height: 468px; padding: 22px 24px; border-radius: 6px; background: #f7f8f6; color: #1c2a24; box-shadow: 0 30px 70px rgba(0,10,7,.6), 0 0 0 1px rgba(255,255,255,.2); transform-origin: 50% 50%; }
.gs .sheet .fh { display: flex; justify-content: space-between; font: 600 9.5px 'JetBrains Mono', monospace; color: #6b7a73; letter-spacing: .04em; }
.gs .sheet h4 { margin: 12px 0 2px; font: 800 17px Onest, sans-serif; letter-spacing: .01em; color: #0b2e25; }
.gs .sheet .fs { font: 500 11.5px/1.35 Onest, sans-serif; color: #4d5c55; }
.gs .sheet .ln { display: flex; gap: 8px; margin-top: 12px; font: 500 11px Onest, sans-serif; color: #4d5c55; }
.gs .sheet .ln u { flex: 1; text-decoration: none; border-bottom: 1px solid #b8c2bd; color: #0b2e25; font-weight: 700; }
.gs .ftab { width: 100%; margin-top: 18px; border-collapse: collapse; font: 500 11px Onest, sans-serif; }
.gs .ftab th { padding: 7px 6px; border: 1px solid #b8c2bd; background: #e9eeeb; color: #3d4d45; font: 700 10px Onest, sans-serif; text-align: center; }
.gs .ftab td { height: 42px; border: 1px solid #b8c2bd; text-align: center; font: 700 14px 'JetBrains Mono', monospace; color: #0b2e25; position: relative; }
.gs .ftab td.cat { font: 700 12px Onest, sans-serif; color: #3d4d45; background: #f0f3f1; }
.gs .ftab td .fl { position: absolute; inset: 0; background: rgba(23,162,118,.25); opacity: 0; }
.gs .sheet .scan { position: absolute; left: 0; right: 0; height: 60px; background: linear-gradient(rgba(23,162,118,0), rgba(23,162,118,.22) 70%, rgba(23,162,118,.6)); border-bottom: 2px solid #17a276; opacity: 0; pointer-events: none; }
.gs .checks { position: absolute; left: 24px; right: 24px; bottom: 70px; display: grid; gap: 7px; }
.gs .checks div { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 8px; background: #e7f5ee; color: #0a5c43; font: 600 12px Onest, sans-serif; opacity: 0; }
.gs .sbtns { position: absolute; right: 24px; bottom: 18px; display: flex; gap: 8px; }
.gs .sbtns .b { padding: 9px 14px; border-radius: 8px; font: 700 12.5px Onest, sans-serif; }
.gs .sbtns .b.sec { border: 1px solid #b8c2bd; color: #0b2e25; background: #fff; }
.gs .sbtns .b.pri { color: #fff; background: #087f5b; }
.gs .tray { position: absolute; left: 432px; right: 38px; top: 514px; height: 74px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; border: 1px dashed rgba(169,228,194,.28); }
.gs .tray .cap { position: absolute; left: 16px; top: -11px; padding: 0 6px; background: #041c16; font: 600 10.5px 'JetBrains Mono', monospace; color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase; }
.gs .file { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 9px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font: 600 12px Onest, sans-serif; white-space: nowrap; opacity: 0; }
.gs .file .fi { width: 26px; height: 30px; flex: none; }
/* отклонение от макета ради плавности: окно сцены стало крупнее (раздел «Возможности» шире, на 1440 — 994 px вместо 784),
   и на Graphite файлы лотка, пока проявляются (8,55–9,4 с: прозрачность, сдвиг и масштаб), дали на первом круге новый
   конвейер видеокарты для слоя с прозрачностью и кадр 60–150 мс около 8,6 с — в 3 трассах из 3 и в 2 прогонах проверки
   плавности из 3 (§6: худший ≤ 60 мс). Прогон под заставкой его не снимал: те же моменты в warm (8,59–8,67 через 0,01 с,
   с повтором кадра, в конце списка) — трассы по-прежнему с компиляцией; без файлов — ни одной. Вероятно, та же причина,
   что у значков «Биржи» ниже: частичная перерисовка соседей (веер форм, лист) режет файл, и такой разрез прогрев не
   повторяет. Файл — свой слой (will-change: opacity): 0 медленных кадров на Graphite в 3 трассах из 3. Цена — край текста
   файла чуть мягче (слой в дробных пикселях): на плакате против прежнего — средняя разница 0,05 (телефон 0,11), до 8
   (телефон 12) из 255 в худшем квадрате 16 × 16; на глаз не отличить.
   Побочно — повторный показ сцены (без прогона): на Graphite кадр 90–150 мс на 0,42–0,51 с (7 прогонов из 7) — переход
   панели витрины (прозрачность .45 с и сдвиг .55 с, index.html) совпадает с проявлением сцены из-под заставки; без перехода
   панели его нет (0 из 9). Но переход держать: на первом показе он идёт во время прогона под заставкой и делает прогон
   действенным для этих файлов. Без него первый показ на Graphite снова даёт кадр 160–360 мс на 8,8 с — и без перехода вовсе,
   и с невидимыми заменами на время прогона (панель в своём проходе, прозрачность .999; сдвиг на полпикселя; масштаб .999
   всей панели; масштаб .99 только окна сцены): 26 первых показов из 39; с переходом — 2 из 30. Помогает лишь тот же сдвиг
   и масштаб всей панели (14 px, .99) — а он виден. §6 — про первый показ; повторный — для сведения (2026-09-26). */
.gs.gs-reporting .file { will-change: opacity; }
.gs .mini { position: absolute; left: 432px; top: 26px; width: 630px; height: 468px; padding: 26px 28px; border-radius: 6px; background: #eef2ef; color: #1c2a24; box-shadow: 0 24px 60px rgba(0,10,7,.55), 0 0 0 1px rgba(255,255,255,.2); transform-origin: 50% 50%; opacity: 0; }
.gs .mini .mh { font: 800 26px Onest, sans-serif; color: #0b2e25; }
.gs .mini .ms { margin: 6px 0 26px; font: 500 17px Onest, sans-serif; color: #4d5c55; }
.gs .mini i { display: block; width: 100%; height: 14px; margin-bottom: 22px; border-radius: 3px; background: #d5ddd8; }
.gs .deckcap { position: absolute; left: 747px; top: 470px; transform: translateX(-50%); padding: 7px 13px; border-radius: 10px; background: rgba(127,211,168,.14); border: 1px solid rgba(127,211,168,.35); color: var(--g200); font: 600 13px Onest, sans-serif; white-space: nowrap; opacity: 0; }
.gs .fly { position: absolute; left: 0; top: 0; padding: 5px 9px; border-radius: 8px; background: var(--g300); color: var(--f1000); font: 700 13px 'JetBrains Mono', monospace; box-shadow: 0 0 22px rgba(127,211,168,.7); white-space: nowrap; opacity: 0; z-index: 30; }
.gs .fly.ghost { background: rgba(127,211,168,.35); color: transparent; box-shadow: none; z-index: 29; }

/* ---------- сцена «market» (в макете — s5, «Биржа») ---------- */
.gs .s5-chips { position: absolute; left: 22px; top: 22px; display: flex; gap: 8px; }
.gs .pin { position: absolute; left: 0; top: 0; width: 28px; height: 36px; margin: -36px 0 0 -14px; transform-origin: 50% 100%; }
.gs .pin svg { display: block; filter: drop-shadow(0 6px 6px rgba(0,14,10,.5)); }
.gs .pin .lbl { position: absolute; left: 24px; top: -2px; padding: 4px 8px; border-radius: 7px; background: rgba(3,30,23,.88); border: 1px solid rgba(255,255,255,.14); font: 600 11px Onest, sans-serif; white-space: nowrap; color: #fff; opacity: 0; }
.gs .pin .lbl em { font-style: normal; font-family: 'JetBrains Mono', monospace; color: var(--amber); }
.gs .pin.buy .lbl em { color: var(--blue); }
.gs .shadow { position: absolute; left: 0; top: 0; width: 18px; height: 6px; margin: -3px 0 0 -9px; border-radius: 50%; background: rgba(0,10,7,.55); }
.gs .pulse { position: absolute; left: 0; top: 0; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; }
.gs .ad { position: absolute; right: 22px; top: 22px; width: 300px; overflow: hidden; padding: 0 0 14px; }
.gs .ad .rib { padding: 9px 14px; background: #d97706; color: #fff; font: 800 11px 'JetBrains Mono', monospace; letter-spacing: .08em; }
.gs .ad .in { padding: 12px 14px 0; }
.gs .ad h3 { margin: 0; font: 700 17px Onest, sans-serif; }
.gs .ad .pr { margin-top: 4px; font: 800 22px 'JetBrains Mono', monospace; color: #fff; }
.gs .ad .pr small { font: 600 11px Onest, sans-serif; color: rgba(255,255,255,.55); margin-left: 4px; }
.gs .ad .fx { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font: 500 11.5px Onest, sans-serif; color: rgba(255,255,255,.62); }
.gs .ad .fx b { display: block; color: #fff; font: 700 12.5px Onest, sans-serif; }
.gs .ad .docs { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.gs .ad .docs span { padding: 4px 8px; border-radius: 7px; background: rgba(127,211,168,.14); color: var(--g200); font: 600 11px Onest, sans-serif; }
.gs .ad .who { margin-top: 11px; display: flex; align-items: center; gap: 8px; font: 600 12px Onest, sans-serif; color: rgba(255,255,255,.8); }
.gs .ad .who i { width: 16px; height: 16px; border-radius: 50%; background: #0a8a62; display: grid; place-items: center; }
.gs .ad .rbtn { margin: 12px 14px 0; display: flex; justify-content: center; }
.gs .route-pill { position: absolute; left: 0; top: 0; }
/* отклонение от макета ради плавности: на Ganesh (Chrome, растр видеокартой) значок объявления (путь SVG с обводкой) давал
   на первом круге новые шейдеры там, где частичная перерисовка соседей (подписи, пульс, плашка километров, карточка)
   разрезала значок, — прогрев под заставкой таких разрезов не повторяет: 2–3 кадра по 35–70 мс за круг (около 3,5, 3,8,
   4,8, 7,8, 8,1 с); без значков — ни одного. Значок — свой слой (will-change: opacity), соседи его не разрезают: 0 медленных
   кадров. Цена — слой стоит в дробных пикселях экрана, края значка чуть мягче (пересэмплирование до ½ пикселя; на снимке
   против макета — до 105 из 255 в отдельных пикселях контура, средняя разница по кадру ≤ 0,06). Масштаб значка (фильтр
   «Песок» — 0,82, выбор продавца — 1,18) сцена ставит содержимому, а не слою: иначе слой растягивался бы картинкой и
   выбранный значок расплывался. Центр масштаба — низ значка (14px 36px в координатах .pin); у подписи — та же точка
   в её координатах (слева 24px, сверху −2px). */
.gs.gs-market .pin { will-change: opacity; }
.gs.gs-market .pin svg { transform-origin: 50% 100%; }
.gs.gs-market .pin .lbl { transform-origin: -10px 38px; }

/* ---------- сцена «plots» — точные значения scene1.html там, где они разошлись с общим
   правилом scenes2-6.html (сохранённым выше ради сцен 02–06). Только различающиеся
   объявления, значения — дословно из scene1.html; общие свойства (family/weight шрифта,
   базовые цвета фона/тени и т. п.) не переобъявляются второй раз.
   .toolbar в макетах встречается только у сцены 01 — сюда же перенесён font-size чипов
   тулбара (единственный источник этого значения, было отдельным .gs .toolbar .chip).
   При переносе самой сцены (Task 13) замером вычисленных стилей найдены и добавлены ещё: .chip.on (белый текст, фон .8,
   кольцо 3px и свечение 24px — у общего правила сцен 02–06 фон .82 и свечение 22px), .vignette (.75 и 22 % вместо .7 и 20 %),
   white-space: normal у .chip и .lab3d (общие правила — nowrap). Переходы .chip и .chip i считает сцена (scene-01-plots.js). ---------- */
.gs.gs-plots .chip { gap: 9px; padding: 9px 14px 9px 12px; border-radius: 12px; font-size: 13px; white-space: normal; opacity: 0; transition: border-color .25s, background .25s, box-shadow .25s, color .25s; }
.gs.gs-plots .chip.on { color: #fff; background: rgba(10,70,52,.8); }
.gs.gs-plots .chip.on:not(.red) { box-shadow: 0 10px 26px rgba(0,14,10,.35), 0 0 0 3px rgba(127,211,168,.12), 0 0 24px rgba(127,211,168,.25); }
.gs.gs-plots .vignette { background: linear-gradient(180deg, rgba(4,28,22,.75), rgba(4,28,22,0) 22%), radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(2,20,15,.72) 100%); }
.gs.gs-plots .pill { left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.gs.gs-plots .cursor { will-change: transform, opacity; }
.gs.gs-plots .ripple { will-change: transform, opacity; }
.gs.gs-plots .lab3d { white-space: normal; will-change: transform, opacity; }
.gs.gs-plots .slice { pointer-events: none; }

/* ---------- Телефон: общие приёмы ----------
   Окно страницы ≤ 800 px — окно сцены вертикальное 4 : 5 (index.html; контроллер решает по фактической форме окна),
   на 390 px оно ~356 px, на планшете — не шире 560 px (кадр увеличен до 1,17 раза; index.html), эталонный кадр 480 × 600,
   корень сцены — .gs.is-portrait, плотность пикселей подложки ≤ 1,25. Сцена включает свою раскладку через env.portrait
   (var P = env.portrait; значения P ? … : …); правила телефона — только под .gs.is-portrait (свои — под
   .gs.is-portrait.gs-<id>), широкий кадр не меняется ни на пиксель. Сцены 03–06 берут отсюда то же самое.
   1. Кегль. На телефоне 390 px окно сцены ~356 px, кадр 480 уменьшается в k ≈ 0,74 (на 360 px — 0,68). Всё, что зритель
      должен прочесть (числа, подписи слоёв и кнопок, заголовки карточек), — не меньше 13,5 px кадра (≥ 10 px экрана на
      390). Мелкие надписи-украшения (подпись капсом над заголовком, сноска «по открытым данным…») — не меньше 12 px кадра.
   2. Низ окна. Кнопка паузы и атрибуция карты лэндинга стоят в строке под окном сцены (index.html, .scene-controls) и
      окно не накрывают. Сцены с картой (01, 02, 03, 06) держат интерфейс не ниже bottom: 88px кадра (≈ 65 px экрана):
      кнопки, переключатели, листы; нижняя полоса кадра — карта без интерфейса (раскладки сделаны, когда там лежали пауза
      и атрибуция, и приняты в таком виде: карта под полосой продолжается и смотрится цельно). Сцены без карты (04, 05)
      заполняют окно до низа — поле 16 px (последняя строка, лист, лоток кончаются на 584 из 600): пустая тёмная полоса
      читалась бы как недоделка. Новой раскладке полоса не обязательна.
   3. Строка сверху: top 12–14 px, по центру, поля от краёв ≥ 12 px — строка не шире 456 px кадра. Блок строки — на всю
      ширину (left/right, justify-content: center): у блока с left: 50% без right доступна лишь половина кадра (240 px),
      и содержимое сжимается с переносом подписей.
   4. Лист снизу (.psheet, ниже) вместо карточки сбоку: на всю ширину с полями 12 px, над нижней полосой кадра
      (bottom: 88px, приём 2) и потому скруглён со всех сторон; вид — как у карточек (--glass, --edge, та же тень), без
      backdrop-filter. Главное действие не накрывает: камера ставит участок/объект сцены в верхнюю половину кадра (до
      ~300 px кадра), лист встаёт ниже; кнопка, на место которой встаёт лист, гаснет перед его появлением. Содержимое —
      3 строки вместо 7 (.prow: точка · название · значение · доля), без полосок долей. Имя — .psheet, не .sheet:
      .sheet — лист формы 5-ГР сцены «Отчётность».
   5. Курсор: цели — только замером (GS.centerIn) по настоящим элементам; своими числами — лишь точки появления и ухода,
      в пределах кадра. Правый нижний угол больше не запретен (пауза — под окном); у сцен 01–06 точки остались прежними
      (x ≤ ~400, y ≤ ~480 кадра) — менять незачем.
   6. Подписи в плоскости карты (.lab3d с .card или .tag, подписи посёлков) — в пикселях экрана, не кадра: на телефоне
      они относительно вдвое крупнее окна; их раскладывают по окну (ярусами, сдвигом вбок) или укорачивают.
   7. Камера: по ширине телефон показывает те же 1000 / z единиц карты, по высоте — 1,25 ширины (широкое окно — 0,56).
      Главный объект — в верхней половине; мелкий — ближе (z больше); проверять, что карта и снимок накрывают кадр.
   8. Сюжет и тайминги — те же, что на широком кадре; меняются раскладка, камера и количество содержимого. */
.gs.is-portrait .fix { width: 480px; height: 600px; }
.gs.is-portrait .pill { font-size: 14.5px; }
.gs.is-portrait .pill small { font-size: 13.5px; }
/* лист снизу: сам класс встречается только на телефоне, правила — без .is-portrait, чтобы проверка протечек стилей
   (tools/check-landing-showcase.mjs, leaks) видела заголовок листа со своим правилом */
.gs .psheet { position: absolute; left: 12px; right: 12px; bottom: 88px; padding: 12px 14px 11px; background: var(--glass); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,12,8,.45); }
.gs .psheet .k { font: 600 12px 'JetBrains Mono', monospace; color: var(--g200); letter-spacing: .06em; text-transform: uppercase; }
.gs .psheet h3 { margin: 2px 0 0; font: 700 18px/1.3 Onest, sans-serif; }
.gs .psheet .prow { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); font: 600 14.5px/1.3 Onest, sans-serif; }
.gs .psheet h3 + .prow { margin-top: 6px; border-top: 0; }
.gs .psheet .prow .nm { flex: 1; min-width: 0; }
.gs .psheet .prow .v { white-space: nowrap; font: 700 14.5px 'JetBrains Mono', monospace; }
.gs .psheet .prow .pc { width: 56px; text-align: right; white-space: nowrap; font: 500 13.5px 'JetBrains Mono', monospace; color: rgba(255,255,255,.55); }
.gs .psheet .foot { margin-top: 5px; font: 500 12px/1.35 Onest, sans-serif; color: rgba(255,255,255,.5); }

/* ---------- сцена «plots» на телефоне ---------- */
/* кнопки слоёв — одной строкой по центру (приём 3); «Нарисовать участок» на телефоне — «Нарисовать» (задаёт сцена);
   «Схема | Спутник» — снизу справа над нижней полосой кадра (приём 2) */
.gs.is-portrait.gs-plots .toolbar { top: 14px; left: 0; right: 0; justify-content: center; gap: 6px; transform: none; }
.gs.is-portrait.gs-plots .chip { flex: none; gap: 7px; padding: 8px 11px 8px 10px; font-size: 14px; }
.gs.is-portrait.gs-plots .basemap { top: auto; bottom: 88px; right: 20px; font-size: 13.5px; }
/* подписи над пластами — в пикселях экрана (приём 6), ярусы и сдвиг вбок задаёт сцена; поля карточки чуть уже */
.gs.is-portrait.gs-plots .lab3d .card { padding: 7px 9px 8px; }
.gs.is-portrait.gs-plots .pc-card { left: 12px; bottom: 12px; padding: 9px 12px 8px; font-size: 13.5px; }
.gs.is-portrait.gs-plots .pc-head b { font-size: 13.5px; }
.gs.is-portrait.gs-plots .pc-head span { font-size: 12px; }
.gs.is-portrait.gs-plots .pc-row { gap: 10px; height: 17px; }
.gs.is-portrait.gs-plots .pc-row span:nth-child(2) { width: 98px; }
.gs.is-portrait.gs-plots .pc-num { font-size: 12px; }

/* ---------- сцена «limits» на телефоне ---------- */
/* «Кадастровая карта» — строка из трёх переключателей во всю ширину сверху (подпись «Охранные зоны ЛЭП» — «ЛЭП»,
   задаёт сцена); кнопка проверки — над нижней полосой кадра; результат — лист .psheet .s2-sheet */
.gs.is-portrait .s2-panel { left: 12px; right: 12px; top: 12px; width: auto; display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; padding: 9px 14px 7px; }
.gs.is-portrait .s2-panel h4 { flex: 0 0 100%; margin: 0 0 3px; font-size: 12px; }
.gs.is-portrait .s2-row { gap: 8px; padding: 4px 0; font-size: 14px; }
.gs.is-portrait .s2-row .dot { margin-left: 0; }
.gs.is-portrait .s2-btn { bottom: 88px; }
/* площадь участка — справа в строке заголовка листа (доли строк считаются от неё; на широком кадре — в сноске) */
.gs .s2-sheet h3 { display: flex; align-items: baseline; gap: 6px; }
.gs .s2-sheet h3 .of { margin-left: auto; font: 500 13.5px 'JetBrains Mono', monospace; color: rgba(255,255,255,.55); white-space: nowrap; }

/* ---------- сцена «tasks» на телефоне ---------- */
/* шапка без организации (задаёт сцена); плитки 2 × 2 — число и подпись в строку; строка задачи — название и под ним одна
   плашка срока «дата · отсчёт» (разметку .rc задаёт сцена); пять строк с шагом 68, как на широком кадре (шаг задаёт сцена),
   от top 252 — последняя кончается на 584, в 16 px от низа окна; промежутки шапка → плитки → год → список 10 · 12 · 12 */
.gs.is-portrait.gs-tasks .s3-head { left: 12px; right: 12px; top: 12px; gap: 10px; }
.gs.is-portrait.gs-tasks .s3-head h3 { font-size: 20px; }
.gs.is-portrait.gs-tasks .today { gap: 7px; padding: 7px 11px; font-size: 13.5px; }
.gs.is-portrait.gs-tasks .today b { min-width: 78px; font-size: 14px; }
.gs.is-portrait.gs-tasks .bell .badge { min-width: 21px; height: 21px; border-radius: 11px; font-size: 13.5px; line-height: 21px; }
.gs.is-portrait.gs-tasks .toast { left: 12px; right: 12px; top: 60px; width: auto; background: rgba(3,30,23,.98); }
.gs.is-portrait.gs-tasks .toast b { font-size: 14.5px; }
.gs.is-portrait.gs-tasks .toast span { font-size: 13.5px; }
.gs.is-portrait.gs-tasks .tiles { left: 12px; right: 12px; top: 60px; grid-template-columns: 1fr 1fr; gap: 8px; }
.gs.is-portrait.gs-tasks .tile { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.gs.is-portrait.gs-tasks .tile .n { flex: none; }
.gs.is-portrait.gs-tasks .tile .l { font-size: 13.5px; letter-spacing: .03em; line-height: 1.2; }
.gs.is-portrait.gs-tasks .yl { left: 12px; right: 12px; top: 176px; height: 64px; padding: 11px 16px; }
.gs.is-portrait.gs-tasks .yl .cap { font-size: 12px; }
.gs.is-portrait.gs-tasks .yl .cap span { font-size: 13.5px; }
.gs.is-portrait.gs-tasks .track { left: 16px; right: 16px; top: 38px; }
.gs.is-portrait.gs-tasks .mk em { top: 13px; font-size: 12px; }
.gs.is-portrait.gs-tasks .list { left: 12px; right: 12px; top: 252px; }
.gs.is-portrait.gs-tasks .row { height: 60px; gap: 12px; padding: 0 12px 0 14px; }
.gs.is-portrait.gs-tasks .row .rc { flex: 1; min-width: 0; }
.gs.is-portrait.gs-tasks .row .tt { font-size: 15px; line-height: 1.3; white-space: nowrap; }
.gs.is-portrait.gs-tasks .row .auto { margin-left: 7px; font-size: 13.5px; }
.gs.is-portrait.gs-tasks .due { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; margin: 4px 0 0; padding: 2px 9px; text-align: left; }
.gs.is-portrait.gs-tasks .due b { font-size: 13.5px; }
.gs.is-portrait.gs-tasks .due span { font-size: 13.5px; }
.gs.is-portrait.gs-tasks .due span::before { content: '·'; margin-right: 7px; color: rgba(255,255,255,.4); }

/* ---------- сцена «registry» на телефоне ---------- */
/* строка обновления — во всю ширину сверху, в две строки (перенос задаёт сцена); счётчик Перечня — под ней слева;
   подписи булавок крупнее, у правой — слева от булавки (.pin.lft задаёт сцена); карточка лота — лист .psheet .sr-sheet;
   реестр — на всё окно выше нижней полосы кадра: заголовок, под ним вкладки, в таблицах по три поля */
.gs.is-portrait.gs-registry .sr-sync { left: 12px; right: 12px; top: 12px; justify-content: center; padding: 8px 14px; font-size: 13.5px; line-height: 1.35; white-space: normal; text-align: center; }
.gs.is-portrait.gs-registry .sr-cnt { left: 12px; top: 78px; }
.gs.is-portrait.gs-registry .sr-cnt .k { font-size: 12px; }
.gs.is-portrait.gs-registry .pin .lbl { font-size: 13.5px; }
.gs.is-portrait.gs-registry .pin.lft .lbl { left: auto; right: 24px; }
.gs.is-portrait.gs-registry .sr-reg { left: 12px; right: 12px; top: 12px; bottom: 88px; padding: 14px; }
.gs.is-portrait.gs-registry .sr-rh { flex-wrap: wrap; row-gap: 8px; }
.gs.is-portrait.gs-registry .sr-rh h3 { flex: 0 0 100%; line-height: 1.3; }
.gs.is-portrait.gs-registry .sr-seg span { padding: 7px 11px; font-size: 13.5px; }
.gs.is-portrait.gs-registry .sr-seg span b { font-size: 13.5px; }
.gs.is-portrait.gs-registry .sr-view { left: 14px; right: 14px; top: 98px; bottom: 14px; }
.gs.is-portrait.gs-registry .sr-th { height: 26px; padding: 0 10px; font-size: 12px; }
.gs.is-portrait.gs-registry .sr-row { height: 46px; padding: 0 10px; font-size: 14.5px; }
.gs.is-portrait.gs-registry .sr-row em { font-size: 13.5px; }
.gs.is-portrait.gs-registry .sr-row small { font-size: 13.5px; }
.gs.is-portrait.gs-registry .sr-reg .c1 { width: 44px; }
.gs.is-portrait.gs-registry .sr-reg .c2 { padding-right: 8px; }
.gs.is-portrait.gs-registry .sr-reg .c6 { width: auto; margin-left: auto; text-align: right; }
.gs.is-portrait.gs-registry .st { padding: 3px 9px; font-size: 13.5px; }
/* лоты: «№ · лот · статус» первой строкой, итог — второй, под лотом во всю ширину */
.gs.is-portrait.gs-registry #srV2 .sr-row.auc { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-content: center; row-gap: 1px; }
.gs.is-portrait.gs-registry #srV2 .sr-row.auc .c1 { grid-row: 1 / 3; }
.gs.is-portrait.gs-registry #srV2 .sr-row.auc .c9 { grid-column: 2 / 4; font-size: 13.5px; line-height: 1.3; color: rgba(255,255,255,.62); }
/* лист лота */
.gs .sr-sheet .k { color: #67e8f9; }
.gs .sr-sheet .sr-meta { font-size: 13.5px; }
.gs .sr-sheet .sr-price { margin-top: 8px; font-size: 13.5px; }
.gs .sr-sheet .sr-price b { font-size: 19px; }
.gs .sr-sheet .sr-steps { margin: 12px 6px 6px; }
.gs .sr-sheet .sr-stl { font-size: 13.5px; }
.gs .sr-sheet .sr-left { margin-top: 9px; font-size: 13.5px; }
.gs .sr-sheet .sr-dates { margin-top: 8px; font-size: 13.5px; }
.gs .sr-sheet .sr-dates b { font-size: 14px; }
.gs .sr-sheet .docs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.gs .sr-sheet .docs span { padding: 4px 9px; border-radius: 7px; background: rgba(34,184,214,.14); color: #a5f3fc; font: 600 13.5px Onest, sans-serif; }

/* ---------- сцена «reporting» на телефоне ---------- */
/* «Движение запасов» — во всю ширину сверху: заголовок и «Заполнено N из 6 граф» одной строкой (.mvh), под ними — столбцы
   А+В+С₁ / С₂ (.mvc) и четыре строки по два числа (разметку задаёт сцена); лист 5-ГР — ниже, во всю ширину до низа окна
   (200–584, поле 16 px; высота 384 — её же знает сцена: ход сканера), под названием формы — строки «Недропользователь»
   и «Участок недр», проверки и кнопки — внизу листа; лоток — под листом у низа окна (открывается, когда лист уменьшается),
   в нём три файла и «ещё 2» (.fmore); веер форм — между «Движением» и подписью, подпись — над лотком. Формы веера — того же
   размера, что лист (полоски — как на широком кадре) */
.gs.is-portrait.gs-reporting .mv { left: 12px; right: 12px; top: 12px; width: auto; padding: 10px 14px 8px; }
.gs.is-portrait.gs-reporting .mvh { display: flex; align-items: baseline; gap: 10px; }
.gs.is-portrait.gs-reporting .mv h3 { font-size: 17px; }
.gs.is-portrait.gs-reporting .mvh .prog4 { margin: 0 0 0 auto; font-size: 13.5px; }
.gs.is-portrait.gs-reporting .mvc { display: flex; align-items: baseline; margin: 4px 0 1px; }
.gs.is-portrait.gs-reporting .mvc .s { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; }
.gs.is-portrait.gs-reporting .mvc .c { width: 84px; text-align: right; font: 700 13.5px Onest, sans-serif; color: var(--g200); }
.gs.is-portrait.gs-reporting .mvr { padding: 4px 10px; font-size: 14.5px; }
.gs.is-portrait.gs-reporting .mvr b { width: 84px; margin-left: 0; text-align: right; font-size: 15px; }
.gs.is-portrait.gs-reporting .mvr b:first-of-type { margin-left: auto; }
.gs.is-portrait.gs-reporting .mvr .nv { width: 84px; text-align: right; font: 700 15px 'JetBrains Mono', monospace; color: rgba(255,255,255,.28); }
.gs.is-portrait.gs-reporting .fly { font-size: 14.5px; }
.gs.is-portrait.gs-reporting .sheet { left: 12px; right: 12px; top: 200px; width: auto; height: 384px; padding: 12px 14px; }
.gs.is-portrait.gs-reporting .sheet .fh { font-size: 13.5px; }
.gs.is-portrait.gs-reporting .sheet h4 { margin: 7px 0 0; font-size: 15px; line-height: 1.28; }
.gs.is-portrait.gs-reporting .sheet .ln { margin-top: 9px; font-size: 13.5px; }
.gs.is-portrait.gs-reporting .ftab { margin-top: 10px; }
.gs.is-portrait.gs-reporting .ftab th { padding: 4px 3px; font-size: 13.5px; line-height: 1.2; }
.gs.is-portrait.gs-reporting .ftab td { height: 32px; font-size: 15px; }
.gs.is-portrait.gs-reporting .ftab td.cat { font-size: 13.5px; }
.gs.is-portrait.gs-reporting .checks { left: 14px; right: 14px; bottom: 52px; gap: 5px; }
.gs.is-portrait.gs-reporting .checks div { padding: 4px 10px; font-size: 13.5px; }
.gs.is-portrait.gs-reporting .sbtns { right: 14px; bottom: 12px; }
.gs.is-portrait.gs-reporting .sbtns .b { padding: 7px 13px; font-size: 13.5px; }
.gs.is-portrait.gs-reporting .tray { left: 12px; right: 12px; top: auto; bottom: 16px; height: 56px; gap: 8px; padding: 0 10px; }
.gs.is-portrait.gs-reporting .tray .cap { top: -10px; font-size: 12px; }
.gs.is-portrait.gs-reporting .file { gap: 7px; padding: 7px 10px 7px 7px; font-size: 13.5px; }
.gs.is-portrait.gs-reporting .file .fi { width: 22px; height: 26px; }
.gs.is-portrait.gs-reporting .fmore { display: flex; align-items: center; height: 42px; padding: 0 13px; border-radius: 11px; border: 1px dashed rgba(169,228,194,.35); color: var(--g200); font: 600 13.5px Onest, sans-serif; white-space: nowrap; opacity: 0; }
.gs.is-portrait.gs-reporting .mini { left: 12px; top: 200px; width: 456px; height: 384px; padding: 20px 22px; }
.gs.is-portrait.gs-reporting .mini .mh { font-size: 32px; }
.gs.is-portrait.gs-reporting .mini .ms { margin: 6px 0 18px; font-size: 20px; }
.gs.is-portrait.gs-reporting .deckcap { left: 240px; top: 474px; font-size: 13.5px; }

/* ---------- сцена «market» на телефоне ---------- */
/* фильтры — одной строкой по центру сверху; подписи значков крупнее; счётчик и итог маршрута — плашка кадра крупнее
   (общее правило .pill телефона); карточка объявления — лист .psheet .s5-sheet (разметку задаёт сцена) */
.gs.is-portrait.gs-market .s5-chips { left: 0; right: 0; top: 14px; justify-content: center; gap: 6px; }
.gs.is-portrait.gs-market .chip { gap: 7px; padding: 8px 12px 8px 10px; font-size: 14px; }
.gs.is-portrait.gs-market .pin .lbl { font-size: 13.5px; }
.gs .s5-sheet .s5-top { display: flex; align-items: center; gap: 10px; }
.gs .s5-sheet .rib { color: #f5b25c; }
.gs .s5-sheet .who { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 600 13.5px Onest, sans-serif; color: rgba(255,255,255,.8); white-space: nowrap; }
.gs .s5-sheet .who i { width: 16px; height: 16px; flex: none; border-radius: 50%; background: #0a8a62; display: grid; place-items: center; }
.gs .s5-sheet .s5-tt { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; }
.gs .s5-sheet h3 { margin: 0; }
.gs .s5-sheet .pr { margin-left: auto; white-space: nowrap; font: 800 20px 'JetBrains Mono', monospace; color: #fff; }
.gs .s5-sheet .pr small { margin-left: 5px; font: 600 13.5px Onest, sans-serif; color: rgba(255,255,255,.55); }
.gs .s5-sheet .fx { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font: 500 13.5px/1.3 Onest, sans-serif; color: rgba(255,255,255,.62); }
.gs .s5-sheet .fx b { display: block; color: #fff; font: 700 14.5px/1.3 Onest, sans-serif; }
.gs .s5-sheet .docs { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.gs .s5-sheet .docs span { padding: 3px 9px; border-radius: 7px; background: rgba(127,211,168,.14); color: var(--g200); font: 600 13.5px Onest, sans-serif; }
.gs .s5-sheet .rbtn { margin-top: 11px; display: flex; justify-content: center; }