/*
  Оформление дашборда наблюдения за разработкой (ADR-0049, TASK-0056).
  Палитра, шрифтовые роли, состояния и структура страницы заданы стандартом
  ui/standard.md и воспроизведены здесь без новых цветов и шрифтов.
*/

:root{
  --bg:#03070e;
  --ink:#e8eef6;
  --ink-2:#a7b4c9;
  --muted:#5c6b83;
  --muted-2:#3a475e;
  --gold:#d9b07a;
  --gold-2:#f0c987;
  --gold-glow:rgba(240,201,135,.55);
  --cyan:#7fd8ff;
  --cyan-2:#a8e4ff;
  --green:#35c46b;
  --red:#ff5f6d;
  --amber:#ffb454;
  --line:rgba(140,180,220,.18);
  --line-2:rgba(140,180,220,.32);
  --card-bg:linear-gradient(160deg,rgba(11,20,36,.92),rgba(6,12,24,.86));
  --font-display:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --font-sans:"Inter","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}

*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;font:14px/1.5 var(--font-sans);color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;
}

/* ====== Сцена наблюдения ======
   Главное окно статично: страница занимает ровно высоту окна, прокрутки нет.
   Раскладка тянется по высоте (flex), содержимое остаётся целиком видимым. */
.stage{
  position:relative;height:100vh;height:100dvh;
  background:radial-gradient(ellipse at 50% 42%, #0a1526 0%, #03070e 58%, #01030a 100%);
  overflow:hidden;
}
.scene{
  position:relative;margin:0 auto;max-width:1720px;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding:16px 26px 12px;gap:10px;
}
.scene.dim{transform:scale(.97);opacity:.3;filter:blur(7px);pointer-events:none}
.stars,.stars::after{
  position:absolute;inset:-10%;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 22% 72%, rgba(200,220,255,.5), transparent 60%),
    radial-gradient(1px 1px at 42% 12%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 68% 82%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 78% 30%, rgba(200,220,255,.5), transparent 60%),
    radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 8% 55%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 55% 92%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 32% 42%, rgba(140,200,255,.35), transparent 60%),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,.4), transparent 60%);
  animation:twinkle 6s ease-in-out infinite alternate;opacity:.7;
}
.stars::after{content:"";transform:scale(1.4) rotate(45deg);opacity:.4;animation-duration:9s}
@keyframes twinkle{0%{opacity:.35}100%{opacity:.9}}

/* ====== Голова ====== */
.head{
  position:relative;z-index:6;display:flex;align-items:flex-start;
  justify-content:space-between;gap:24px;flex-wrap:nowrap;flex:0 0 auto;
}
.brand .mini{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:5px;
  color:var(--muted);text-transform:uppercase;margin-bottom:8px;
}
.brand .logo{
  font-family:var(--font-display);font-weight:500;font-size:44px;
  line-height:1;letter-spacing:-.5px;margin:0;
  background:linear-gradient(180deg,#fff,#c9d6e8 55%,#7d8ea6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(180,210,255,.15);
}
.brand .sub{
  font-size:11px;letter-spacing:6px;color:var(--ink-2);
  margin-top:8px;text-transform:uppercase;
}
.brand .line{width:70px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-top:16px}

.head-side{display:flex;flex-direction:row;gap:12px;align-items:stretch;flex-wrap:nowrap}
.head-note{
  font-family:var(--font-mono);font-size:10px;color:var(--muted);
  letter-spacing:1px;max-width:340px;text-align:right;line-height:1.6;
}

/* ====== Состояние ====== */
.state{
  display:flex;align-items:center;gap:11px;
  padding:9px 14px;border-radius:12px;
  background:linear-gradient(160deg,rgba(11,20,36,.9),rgba(6,12,24,.85));
  border:1px solid var(--line);min-width:240px;
  box-shadow:0 0 40px rgba(100,160,240,.1);
}
.state .dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 30% 30%, #b8ffd0, var(--green));
  box-shadow:0 0 8px var(--green), 0 0 20px rgba(53,196,107,.7);
  animation:pulse-dot 2.2s ease-in-out infinite;
}
.state.err .dot{background:radial-gradient(circle at 30% 30%, #ffd0d4, var(--red));box-shadow:0 0 8px var(--red),0 0 20px rgba(255,95,109,.7)}
.state.wait .dot{background:radial-gradient(circle at 30% 30%, #ffe0b8, var(--amber));box-shadow:0 0 8px var(--amber),0 0 20px rgba(255,180,84,.7)}
/* Живое обновление: выключено, подключается и включено. */
.state.live.off .dot{background:radial-gradient(circle at 30% 30%, #8b98ad, var(--muted));box-shadow:0 0 6px rgba(92,107,131,.8)}
.state.live.on .dot{background:radial-gradient(circle at 30% 30%, #d8fbff, var(--cyan));box-shadow:0 0 8px var(--cyan),0 0 20px rgba(127,216,255,.7);animation:pulse-dot 2.4s ease-in-out infinite}
.state.live.pending .dot{background:radial-gradient(circle at 30% 30%, #ffe0b8, var(--amber));box-shadow:0 0 8px var(--amber),0 0 20px rgba(255,180,84,.7);animation:pulse-dot 1.2s ease-in-out infinite}
.state.live.on .state-text{color:var(--cyan-2)}
/* Кратковременная вспышка сцены в момент перерисовки: видно, что данные
   обновились, и при этом ничего не сбрасывается. */
.scene.live-flash{animation:live-flash 1.1s ease-out 1}
@keyframes live-flash{0%{filter:brightness(1.18) saturate(1.08)}100%{filter:none}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(.9)}}
.state-text{font-size:13px;letter-spacing:1px;color:#fff}
.state-sub{font-family:var(--font-mono);font-size:10px;color:var(--muted);display:block;margin-top:3px}

/* ====== Полоса сводных показателей ====== */
.summary{
  position:relative;z-index:5;margin-top:0;flex:0 0 auto;
  display:grid;grid-template-columns:repeat(7,1fr);gap:10px;
  align-items:stretch;
}
.skpi{
  padding:9px 12px;border-radius:12px;position:relative;
  background:var(--card-bg);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  transition:transform .3s,border-color .3s,box-shadow .3s;
  min-width:0;overflow:hidden;
}
.skpi:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 40px rgba(140,190,255,.18)}
.skpi .lbl{
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.8px;
  color:var(--muted);text-transform:uppercase;margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.skpi .val{
  font-family:var(--font-display);font-size:23px;font-weight:500;line-height:1.05;
  background-image:linear-gradient(180deg,#fff 0%,#ead6b3 45%,#b8935c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.skpi.ok .val{background-image:linear-gradient(180deg,#fff,#9ff0bf 45%,#35c46b 100%)}
.skpi.warn .val{background-image:linear-gradient(180deg,#fff,#ffd9a5 45%,#ffb454 100%)}
.skpi.err .val{background-image:linear-gradient(180deg,#fff,#ffb3ba 45%,#ff5f6d 100%)}
.skpi.info .val{background-image:linear-gradient(180deg,#fff,#cdeeff 45%,#7fd8ff 100%)}
.skpi .sub{
  font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-top:5px;
  letter-spacing:.4px;line-height:1.45;
}
.skpi.wide{grid-column:span 2}
/* Полоса признаков внимания: одна строка во всю ширину, без пустот. */
.skpi.strip{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;
  padding:6px 12px;flex-wrap:nowrap;
}
.skpi.strip .lbl{margin-bottom:0;flex:0 0 auto}
.skpi.strip .val{font-size:18px;flex:0 0 auto}
.skpi.strip .sub{margin-top:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ====== Ядро ======
   Ядро квадратное и не выходит за свою колонку: его размер задаёт высота
   ячейки, а ширина колонки ограничивает тот же предел. */
.core-wrap{
  position:relative;z-index:3;margin:0 auto;flex:1 1 auto;min-height:200px;
  overflow:hidden;
  display:grid;grid-template-columns:1fr minmax(190px,260px) 1fr;
  align-items:stretch;gap:14px;
}
.core-col{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.core{
  position:relative;height:min(100%,260px);width:auto;max-width:100%;
  aspect-ratio:1;
  margin:0 auto;pointer-events:none;align-self:center;flex:0 0 auto;
}
.rings{position:absolute;inset:0}
.ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(150,190,230,.14);
  box-shadow:inset 0 0 30px rgba(120,180,255,.06);
}
.ring.r1{width:46%;height:46%;border-color:rgba(200,225,255,.25)}
.ring.r2{width:60%;height:60%;border-color:rgba(150,190,230,.16)}
.ring.r3{width:74%;height:74%;border-color:rgba(120,160,220,.1)}
.ring.r4{width:88%;height:88%;border-color:rgba(110,150,210,.08)}
.ring.r5{width:102%;height:102%;border-color:rgba(110,150,210,.06)}
.ring.dashed{border-style:dashed;border-color:rgba(200,225,255,.14);animation:spin 90s linear infinite}
.ring.dashed.rev{animation-direction:reverse;animation-duration:130s}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.halo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44%;height:44%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,220,170,.42) 0%, rgba(255,180,110,.18) 22%, rgba(120,160,220,.05) 42%, transparent 65%);
  filter:blur(2px);animation:breathe 5s ease-in-out infinite;
}
.halo.outer{
  width:88%;height:88%;
  background:radial-gradient(circle, rgba(140,200,255,.12) 0%, rgba(90,150,230,.05) 45%, transparent 70%);
  animation-duration:8s;
}
@keyframes breathe{
  0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
}
.rays{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(200,225,255,.12) 2deg, transparent 4deg,
    transparent 44deg, rgba(200,225,255,.1) 46deg, transparent 48deg,
    transparent 88deg, rgba(200,225,255,.12) 90deg, transparent 92deg,
    transparent 132deg, rgba(200,225,255,.1) 134deg, transparent 136deg,
    transparent 176deg, rgba(200,225,255,.12) 178deg, transparent 180deg,
    transparent 220deg, rgba(200,225,255,.1) 222deg, transparent 224deg,
    transparent 264deg, rgba(200,225,255,.12) 266deg, transparent 268deg,
    transparent 308deg, rgba(200,225,255,.1) 310deg, transparent 312deg,
    transparent 352deg, rgba(200,225,255,.12) 354deg, transparent 356deg);
  -webkit-mask:radial-gradient(circle, transparent 22%, #000 30%, #000 92%, transparent 100%);
  mask:radial-gradient(circle, transparent 22%, #000 30%, #000 92%, transparent 100%);
  animation:spin 240s linear infinite;opacity:.6;
}
.core-text{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;width:74%;
}
.core-text .label{
  font-size:9px;letter-spacing:4px;color:var(--ink-2);text-transform:uppercase;
  margin-bottom:9px;text-shadow:0 0 20px rgba(200,225,255,.4);
}
.core-text .title{
  font-family:var(--font-display);font-weight:500;font-size:40px;line-height:.95;
  background:linear-gradient(180deg,#fff 0%,#ead6b3 45%,#b8935c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(240,201,135,.35));
}
.core-text .subtitle{
  font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:#fff;
  margin-top:6px;text-transform:uppercase;opacity:.9;
}
.core-text .desc{font-size:11px;color:var(--ink-2);margin-top:9px;line-height:1.55;font-weight:300}
.core-text .desc b{color:#fff;font-weight:500}

/* Соединительные линии ядро → карточки */
.wires{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}

/* ====== Карточки-входы ======
   Левая и правая колонки: сетка 2×2. Карточка берёт высоту по содержимому и
   не растягивается: пустоты внутри карточки не остаётся, а ряды стоят по
   центру колонки. Наложения на подвал при этом невозможны. */
.fan{
  position:relative;z-index:4;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto;
  align-content:center;
  gap:10px;min-width:0;min-height:0;align-self:stretch;
}
.fan.left,.fan.right{align-items:center}
.entry{
  position:relative;width:100%;max-width:100%;padding:11px 14px 10px;
  background:var(--card-bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 20px 40px rgba(0,0,0,.6), 0 0 30px rgba(100,160,240,.06);
  backdrop-filter:blur(8px);
  transition:transform .35s ease, box-shadow .3s, border-color .3s;
  cursor:pointer;user-select:none;text-align:left;
  opacity:0;animation:slideIn .55s cubic-bezier(.2,.7,.3,1) forwards;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.fan.left .entry{animation-name:slideInLeft}
.fan.right .entry{animation-name:slideInRight}
@keyframes slideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.entry::before,.entry::after{
  content:"";position:absolute;width:12px;height:12px;
  border:1px solid rgba(200,225,255,.35);pointer-events:none;transition:border-color .3s;
}
.entry::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.entry::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.entry:hover,.entry:focus-visible{
  transform:translateY(-3px) scale(1.012);outline:none;
  box-shadow:0 0 0 1px rgba(200,225,255,.14) inset, 0 24px 60px rgba(0,0,0,.7), 0 0 60px rgba(140,190,255,.25);
  border-color:var(--line-2);
}
.entry:hover::before,.entry:hover::after,.entry:focus-visible::before,.entry:focus-visible::after{border-color:var(--gold-2)}
.entry-row{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.entry .num{
  font-family:var(--font-display);font-size:15px;font-weight:500;
  color:#c8d4e6;letter-spacing:1px;flex-shrink:0;width:20px;
}
.entry .icon{
  width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;
  color:#cfe0f5;border:1px solid rgba(180,210,240,.25);border-radius:10px;
  background:radial-gradient(circle at 30% 30%, rgba(120,180,255,.14), transparent 60%),
             linear-gradient(160deg,rgba(20,32,54,.9),rgba(10,18,34,.9));
  box-shadow:inset 0 0 12px rgba(120,180,255,.14), 0 0 20px rgba(120,180,255,.12);
  transition:color .3s, box-shadow .3s;
}
.entry:hover .icon{color:var(--gold-2);box-shadow:inset 0 0 14px rgba(240,201,135,.25), 0 0 24px rgba(240,201,135,.35)}
.entry .icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(180,220,255,.5))}
.entry .title{font-size:11.5px;font-weight:600;letter-spacing:1.8px;color:#fff;text-transform:uppercase;line-height:1.25}
.entry .hint{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:.5px;margin-top:2px;line-height:1.35}
.entry .body{
  font-size:11px;color:var(--ink-2);line-height:1.45;font-weight:300;margin-top:6px;
  flex:1 1 auto;min-height:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.entry .foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:6px;padding-top:6px;border-top:1px solid rgba(140,180,220,.12);
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.6px;color:var(--ink-2);text-transform:uppercase;
  flex:0 0 auto;
}
.entry .foot .arr{color:#cfe0f5;font-size:12px;transition:transform .3s,color .3s}
.entry:hover .foot .arr{transform:translateX(4px);color:var(--gold-2)}

/* ====== Подвал сцены ====== */
.foot-bar{
  position:relative;z-index:4;margin-top:0;padding-top:8px;flex:0 0 auto;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:nowrap;
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:.8px;
}
.foot-bar b{color:var(--ink-2);font-weight:500}

/* ====== Нижний ряд: AI-команда, выдача прав и кнопка «Запуск» ======
   Ряд не создаёт прокрутки: он занимает фиксированную высоту сцены. */
.band{
  position:relative;z-index:5;flex:0 0 auto;
  display:grid;grid-template-columns:minmax(280px,420px) 1fr auto;
  gap:16px;align-items:center;min-height:0;
}
.band .entry{max-width:100%;height:100%}
.band-ai .icon{color:var(--gold-2)}
/* Карточка выдачи прав стоит рядом с кнопкой перехода в рабочую область тем же
   визуальным классом, что прочие карточки наблюдения (ADR-0070, пункт 9;
   ADR-0071). Ряд сохраняет прежние три столбца и высоту полосы: карточка
   AI-команды занимает первый столбец, карточка выдачи прав — второй, а подпись
   снимка и кнопка перехода делят третий столбец и стоят друг под другом. Числа
   сцены не сдвигаются, прокрутки не появляется, а новые цвета и шрифтовые роли
   не заводятся — берутся роли палитры (ADR-0049). */
.band.band-access{grid-template-columns:minmax(240px,340px) minmax(240px,340px) minmax(280px,1fr)}
.band.band-access .band-ai{grid-column:1;grid-row:1}
.band.band-access .band-grant{grid-column:2;grid-row:1}
.band.band-access .band-note{grid-column:3;grid-row:1;align-self:start}
.band.band-access .launch-wrap{grid-column:3;grid-row:1;align-self:end}
.band-grant .icon{color:var(--cyan)}
.band-grant:hover .icon{color:var(--cyan-2);box-shadow:inset 0 0 14px rgba(127,216,255,.25), 0 0 24px rgba(127,216,255,.35)}
.band-note{
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted);
  letter-spacing:.8px;line-height:1.6;text-align:right;
}

/* Кнопка «Запуск» воспроизводит роль и вид образца владельца: переход в
   главный дашборд продуктового контура. */
.launch-wrap{text-align:right;flex:0 0 auto}
.launch-wrap .ready{
  font-size:9.5px;letter-spacing:4px;color:var(--ink-2);text-transform:uppercase;
  margin-bottom:6px;display:flex;align-items:center;justify-content:flex-end;gap:10px;
}
.launch-wrap .ready::before,.launch-wrap .ready::after{
  content:"";width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6;
}
.launch{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:9px 24px 11px;
  background:linear-gradient(180deg,rgba(18,28,48,.95),rgba(8,14,26,.95));
  border:1px solid rgba(240,201,135,.45);border-radius:8px;cursor:pointer;
  font-family:var(--font-display);font-size:30px;font-weight:500;
  color:#f0c987;letter-spacing:2px;line-height:1;
  text-shadow:0 0 30px rgba(240,201,135,.5), 0 0 60px rgba(240,201,135,.25);
  box-shadow:0 0 0 1px rgba(240,201,135,.15) inset, 0 0 40px rgba(240,201,135,.22),
             0 0 80px rgba(240,201,135,.12), 0 20px 40px rgba(0,0,0,.6);
  transition:all .35s ease;
}
.launch::before,.launch::after{
  content:"";position:absolute;width:12px;height:12px;
  border:1.5px solid var(--gold);filter:drop-shadow(0 0 6px var(--gold-glow));
}
.launch::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.launch::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.launch .arrow{
  font-family:var(--font-sans);font-size:22px;color:#f0c987;
  transform:translateY(-2px);transition:transform .3s;
}
.launch:hover,.launch:focus-visible{
  color:#fff;border-color:var(--gold-2);outline:none;
  box-shadow:0 0 0 1px rgba(240,201,135,.3) inset, 0 0 60px rgba(240,201,135,.4),
             0 0 120px rgba(240,201,135,.2), 0 20px 50px rgba(0,0,0,.7);
  transform:translateY(-2px);
}
.launch:hover .arrow{transform:translate(6px,-2px)}

/* ====== Бесшовный переход между экранами домена ======
   Подписи настоящих карточек растворяются и собираются заново: буквы
   появляются поочерёдно. Служебные узлы букв живут только в подписях сцены и
   снимаются после сборки — текстового слоя поверх экрана нет. При системной
   настройке уменьшенного движения эффект сокращается до простого затухания. */
.transition-char{opacity:0;animation:charIn .34s ease forwards}
@keyframes charIn{to{opacity:1}}
.veil{position:fixed;inset:0;z-index:70;background:#03070e;opacity:0;pointer-events:none;transition:opacity .4s ease}
.veil.on{opacity:1}

/* ====== Окно выдачи прав в рабочую область (ADR-0070, пункт 9; ADR-0071) ======
   Своё окно поверх сцены наблюдения тем же визуальным классом, что окно
   подробностей: разметка и роли палитры общие, новых цветов и шрифтовых ролей
   не заводится. Открывается карточкой выдачи прав рядом с кнопкой перехода. */
.access-overlay{opacity:0;pointer-events:none;transition:opacity .3s ease}
.access-overlay.open{opacity:1;pointer-events:auto}
.access-shell{max-width:1100px}
.access-secret{
  font-family:var(--font-mono);font-size:12.5px;color:var(--gold-2);
  letter-spacing:.6px;word-break:break-all;line-height:1.6;
  padding:12px 14px;border:1px dashed rgba(240,201,135,.45);border-radius:10px;
  background:rgba(240,201,135,.06);box-shadow:0 0 24px rgba(240,201,135,.15);
}
.access-state-ok{color:var(--green)}
.access-state-warn{color:var(--amber)}
.access-actions{display:flex;gap:8px;flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){
  .transition-char{animation:none;opacity:1;transform:none}
  .entry,.scene.live-flash{animation:none}
  .launch{transition:none}
}

/* ============================================================
   Окно подробностей
   ============================================================ */
.overlay{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:26px;
  background:rgba(2,5,12,.72);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.overlay.open{opacity:1;pointer-events:auto}
.shell{
  width:min(1500px,100%);height:min(920px,94vh);
  background:linear-gradient(160deg,rgba(9,16,30,.99),rgba(4,8,18,.99));
  border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 0 0 1px rgba(240,201,135,.1) inset, 0 40px 120px rgba(0,0,0,.8), 0 0 100px rgba(140,190,255,.15);
  display:grid;grid-template-rows:auto 1fr;
  transform:scale(.94) translateY(20px);transition:transform .45s cubic-bezier(.2,.7,.3,1);
  overflow:hidden;position:relative;
}
.overlay.open .shell{transform:none}
.shell::before,.shell::after{
  content:"";position:absolute;width:20px;height:20px;
  border:1.5px solid var(--gold-2);filter:drop-shadow(0 0 8px var(--gold-glow));pointer-events:none;z-index:3;
}
.shell::before{top:8px;left:8px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.shell::after{bottom:8px;right:8px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.shell-head{
  padding:18px 26px;display:flex;align-items:center;gap:20px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(15,24,44,.6),transparent);
}
.back{
  all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:8px;border:1px solid var(--line-2);
  color:var(--ink-2);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  font-family:var(--font-mono);transition:all .2s;flex-shrink:0;
}
.back:hover,.back:focus-visible{color:#fff;border-color:var(--gold-2);box-shadow:0 0 20px rgba(240,201,135,.25);outline:none}
.back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shell-head .h-title{flex:1;text-align:center}
.shell-head .h-lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:5px;color:var(--muted);text-transform:uppercase}
.shell-head .h-name{
  font-family:var(--font-display);font-size:30px;font-weight:500;color:#fff;
  letter-spacing:1px;line-height:1.1;margin-top:4px;text-shadow:0 0 24px rgba(200,225,255,.35);
}
.shell-head .h-status{
  display:flex;align-items:center;gap:9px;flex-shrink:0;
  font-family:var(--font-mono);font-size:10px;color:var(--ink-2);letter-spacing:1px;
}
.shell-head .h-status .dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulse-dot 2s ease-in-out infinite;
}
.shell-body{padding:22px 28px 30px;overflow-y:auto}
.shell-body::-webkit-scrollbar{width:8px}
.shell-body::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--gold-2));border-radius:8px}
.shell-body::-webkit-scrollbar-track{background:transparent}
.section{display:none}
.section.active{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ====== Панели и сетки ====== */
.opanel{
  background:linear-gradient(160deg,rgba(12,20,38,.8),rgba(6,11,24,.7));
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative;
}
.opanel::before,.opanel::after{content:"";position:absolute;width:12px;height:12px;border:1px solid rgba(200,225,255,.3)}
.opanel::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:12px}
.opanel::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:12px}
.opanel h3{
  margin:0 0 13px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:4px;
  color:var(--cyan-2);text-transform:uppercase;font-weight:500;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.opanel h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex-shrink:0}
.opanel h3.plain{text-transform:none;letter-spacing:1.6px;font-size:11px}
.opanel .hint{font-size:11.5px;color:var(--muted);line-height:1.6;margin:-6px 0 12px}
.ogrid{display:grid;gap:16px;margin-bottom:16px}
.ogrid:last-child{margin-bottom:0}
.ogrid.c4{grid-template-columns:repeat(4,1fr)}
.ogrid.c3{grid-template-columns:repeat(3,1fr)}
.ogrid.c2{grid-template-columns:repeat(2,1fr)}
.ogrid.c2w{grid-template-columns:1.6fr 1fr}
.ogrid.c2n{grid-template-columns:1fr 1.7fr}

/* ====== Панели разделов рабочей области и экранов домена ======
   Общая раскладка и оформление панелей раздела: ими пользуются рабочая
   область, экран «Инфраструктура» и экран «Аналитика и интеграции». Правила
   живут в общем листе, чтобы геометрия панелей у экранов не расходилась и не
   дублировалась по файлам экранов: расхождение размеров карточек раздела —
   тот же дефект, что и расхождение размеров карточек-входов. */
.work-panels{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-bottom:16px;
}
.work-panels:last-child{margin-bottom:0}
.work-panel{
  background:linear-gradient(160deg,rgba(12,20,38,.8),rgba(6,11,24,.7));
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative;
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.work-panel::before,.work-panel::after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid rgba(200,225,255,.3);
}
.work-panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:12px}
.work-panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:12px}
.work-panel .wp-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.work-panel .wp-code{
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;color:var(--muted);
}
.work-panel h3{
  margin:0;font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  color:#fff;letter-spacing:.4px;
}
.work-panel .wp-show{font-size:11.5px;color:var(--ink-2);line-height:1.6;margin:0}
.work-panel .wp-src{
  font-family:var(--font-mono);font-size:10.5px;color:var(--muted);
  line-height:1.55;margin:0;word-break:break-word;
}
.work-panel .wp-value{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:9px 12px;border-radius:9px;border:1px solid var(--line);
  background:rgba(8,14,28,.6);
}
.work-panel .wp-value .wv-num{
  font-family:var(--font-display);font-size:24px;font-weight:500;color:#fff;line-height:1;
}
.work-panel .wp-value .wv-cap{
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;
  color:var(--muted);text-transform:uppercase;
}

/* ====== Крупные показатели ====== */
.okpi .lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:2.4px;color:var(--muted);text-transform:uppercase;margin-bottom:7px}
.okpi .val{
  font-family:var(--font-display);font-size:30px;font-weight:500;color:#fff;
  letter-spacing:1px;line-height:1;
}
.okpi .val small{font-size:13px;color:var(--ink-2);font-family:var(--font-sans);font-weight:300;margin-left:4px}
.okpi .sub{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:7px;letter-spacing:.6px;line-height:1.5}
.okpi.ok .val{color:#8fe4b0;text-shadow:0 0 20px rgba(53,196,107,.5)}
.okpi.warn .val{color:var(--amber);text-shadow:0 0 20px rgba(255,180,84,.5)}
.okpi.err .val{color:var(--red);text-shadow:0 0 20px rgba(255,95,109,.5)}
.okpi.info .val{color:var(--cyan-2);text-shadow:0 0 20px rgba(168,228,255,.5)}
.okpi.gold .val{color:var(--gold-2);text-shadow:0 0 20px rgba(240,201,135,.5)}

/* ====== Реестр объектов жилищного фонда: карточка, окно, таблица ======
   Общие правила для двух экранов домена: карточка записи реестра `И01-Р` на
   экране «Инфраструктура» (разворачивает окно реестра) и панель А01-9 на экране
   «Аналитика и интеграции» (окно загрузки с временным реестром). Живут в общем
   листе, чтобы оформление окна и таблицы у экранов не расходилось
   ([`ADR-0065`](../../docs/adr/0065-housing-fund-exchange-screens-and-preview-before-save.md)).
   Новых цветов и шрифтовых ролей не заводится. */
.registry-panel{grid-column:1/-1}
.registry-tools{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 6px}
.registry-btn{
  font-family:var(--font-sans);font-size:13px;line-height:1;
  color:var(--ink);background:rgba(127,216,255,.08);
  border:1px solid var(--line-2);border-radius:6px;
  padding:9px 14px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.registry-btn:hover,.registry-btn:focus-visible{
  background:rgba(127,216,255,.16);border-color:var(--cyan);
}
.registry-btn[disabled]{opacity:.5;cursor:not-allowed}
.registry-save{background:rgba(53,196,107,.12);border-color:rgba(53,196,107,.5)}
.registry-save:hover:not([disabled]),.registry-save:focus-visible:not([disabled]){
  background:rgba(53,196,107,.22);border-color:var(--green);
}
.registry-upload{position:relative;display:inline-flex}
/* Поле выбора файла скрыто визуально, но остаётся доступным с клавиатуры и
   через кнопку: нажатие кнопки открывает выбор файла. */
.registry-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.registry-file:focus-visible+*{outline:2px solid var(--cyan)}
.registry-status{
  font-family:var(--font-sans);font-size:12px;line-height:1.5;
  color:var(--ink-2);margin:6px 0 10px;min-height:18px;
}
.registry-summary{
  font-family:var(--font-sans);font-size:12px;color:var(--ink-2);margin:8px 0;
}
.registry-table-wrap{overflow-x:auto;margin-top:8px}
.registry-table{
  width:100%;border-collapse:collapse;
  font-family:var(--font-sans);font-size:12px;color:var(--ink);
}
.registry-table th{
  text-align:left;font-weight:600;color:var(--gold-2);
  border-bottom:1px solid var(--line-2);padding:6px 10px;white-space:nowrap;
}
.registry-table td{
  border-bottom:1px solid var(--line);padding:6px 10px;vertical-align:top;
}
/* Временный реестр: принятые и отклонённые строки различаются, отклонённые несут
   причину отказа (ADR-0065, пункт 8). Цвета берутся из общих значений темы. */
.registry-table tr.row-accepted td{background:rgba(53,196,107,.06)}
.registry-table tr.row-rejected td{background:rgba(255,95,109,.06)}
.registry-table .row-reason{color:var(--red);font-size:11px}
/* Крупное модальное окно реестра и окна загрузки: раскладка берётся из общего
   окна `.shell`, здесь только границы размера и подвал с действиями. */
.registry-window .shell{width:min(1500px,100%);height:min(920px,94vh)}
/* Окно загрузки несёт третий ряд — подвал с действиями «Отмена» и «Сохранить»:
   раскладка общего окна рассчитана на два ряда, поэтому здесь рядов три. */
.registry-window .shell:has(.upload-foot){grid-template-rows:auto 1fr auto}
.upload-foot{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 26px;border-top:1px solid var(--line);
  background:linear-gradient(0deg,rgba(15,24,44,.6),transparent);
}
/* Скрытая подпись: нужна для доступного имени таблицы, на экране не видна. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ====== Метки ====== */
.tag{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:5px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;
  border:1px solid;white-space:nowrap;
}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;flex-shrink:0}
.tag.ok{color:#8fe4b0;border-color:rgba(53,196,107,.45);background:rgba(53,196,107,.08)}
.tag.warn{color:var(--amber);border-color:rgba(255,180,84,.5);background:rgba(255,180,84,.08)}
.tag.err{color:var(--red);border-color:rgba(255,95,109,.5);background:rgba(255,95,109,.1)}
.tag.info{color:var(--cyan-2);border-color:rgba(168,228,255,.5);background:rgba(168,228,255,.08)}
.tag.gold{color:var(--gold-2);border-color:rgba(240,201,135,.5);background:rgba(240,201,135,.08)}

/* ====== Таблица ====== */
.otable{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.otable th,.otable td{text-align:left;padding:9px 11px;border-bottom:1px solid rgba(140,180,220,.1)}
.otable th{
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--muted);
  text-transform:uppercase;font-weight:500;background:rgba(140,180,220,.04);
  position:sticky;top:0;z-index:2;cursor:pointer;user-select:none;white-space:nowrap;
}
.otable th:hover{color:var(--cyan-2)}
.otable th .dir{color:var(--gold-2);margin-left:5px}
.otable thead th:first-child{border-top-left-radius:8px}
.otable thead th:last-child{border-top-right-radius:8px}
.otable tbody tr:hover{background:rgba(140,190,255,.06)}
.otable tbody td.mono{font-family:var(--font-mono);color:var(--ink-2);font-size:11.5px;letter-spacing:.3px}
.otable .fresh-day{color:var(--green);font-weight:500}
.otable .fresh-week{color:var(--amber)}
.otable-wrap{max-height:560px;overflow:auto;border-radius:8px}
.otable-wrap::-webkit-scrollbar{width:8px;height:8px}
.otable-wrap::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--gold-2));border-radius:8px}

/* ====== Поля и кнопки ====== */
.ofield{display:flex;flex-direction:column;gap:6px}
.ofield label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:2.4px;color:var(--muted);text-transform:uppercase}
.ofield input,.ofield select{
  padding:9px 12px;border:1px solid var(--line-2);border-radius:8px;
  background:rgba(4,9,20,.85);color:var(--ink);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.4px;transition:all .2s;
}
.ofield input:focus,.ofield select:focus{
  outline:none;border-color:var(--gold-2);color:#fff;
  box-shadow:0 0 0 1px var(--gold-2),0 0 24px rgba(240,201,135,.25),inset 0 0 12px rgba(240,201,135,.08);
}
.ofield select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),linear-gradient(-45deg,transparent 50%,var(--gold-2) 50%);
  background-position:calc(100% - 16px) center, calc(100% - 11px) center;
  background-size:5px 5px;background-repeat:no-repeat;
}
.obar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.obtn{
  all:unset;cursor:pointer;padding:9px 16px;border-radius:8px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--ink-2);
  background:linear-gradient(180deg,rgba(140,180,220,.05),rgba(140,180,220,.02));
  transition:all .25s;
}
.obtn:hover,.obtn:focus-visible{color:#fff;border-color:var(--cyan);box-shadow:0 0 20px rgba(127,216,255,.3);outline:none}
.obtn.primary{
  color:var(--gold-2);border-color:rgba(240,201,135,.5);
  background:linear-gradient(180deg,rgba(240,201,135,.12),rgba(240,201,135,.04));
  box-shadow:0 0 20px rgba(240,201,135,.18);
}
.obtn.primary:hover{color:#fff;box-shadow:0 0 40px rgba(240,201,135,.5),0 0 80px rgba(240,201,135,.2)}
.obtn.sm{padding:6px 11px;font-size:9.5px;letter-spacing:1.4px}
.obtn.on{color:var(--gold-2);border-color:var(--gold-2);box-shadow:0 0 18px rgba(240,201,135,.3)}

/* ====== Легенда контуров ====== */
.legend{display:flex;flex-wrap:wrap;gap:8px}
.legend .lg{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;
  border:1px solid var(--line);background:rgba(8,14,28,.7);
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);letter-spacing:.6px;
  cursor:pointer;transition:all .2s;
}
.legend .lg:hover{border-color:var(--line-2);color:#fff}
.legend .lg.off{opacity:.35}
.legend .lg i{width:11px;height:11px;border-radius:3px;flex-shrink:0;box-shadow:0 0 10px currentColor;background:currentColor}
.legend .lg small{color:var(--muted);font-size:9.5px}

/* ====== Дерево проекта ====== */
.tree-wrap{max-height:600px;overflow:auto;padding-right:6px}
.tree-wrap::-webkit-scrollbar{width:8px}
.tree-wrap::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--gold-2));border-radius:8px}
.tree ul{list-style:none;margin:0;padding-left:18px;border-left:1px dashed rgba(140,180,220,.16)}
.tree > ul{padding-left:0;border-left:0}
.tree li{position:relative}
.tnode{
  display:flex;align-items:center;gap:9px;padding:4px 8px;border-radius:6px;
  font-family:var(--font-mono);font-size:12px;cursor:default;transition:background .2s;
}
.tnode:hover{background:rgba(140,190,255,.07)}
.tnode.dir{cursor:pointer}
.tnode .tgl{
  width:14px;height:14px;flex-shrink:0;display:grid;place-items:center;
  color:var(--muted);font-size:10px;transition:transform .25s;
}
.tnode.collapsed .tgl{transform:rotate(-90deg)}
.tnode .dotc{width:9px;height:9px;border-radius:2px;flex-shrink:0;background:currentColor;box-shadow:0 0 8px currentColor}
.tnode .tname{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnode.dir .tname{color:#fff;font-weight:500}
.tnode .tmeta{font-size:9.5px;color:var(--muted);letter-spacing:.5px;white-space:nowrap;margin-left:auto;padding-left:12px}
.tree li.hidden > ul{display:none}

/* ====== Граф связей ====== */
.graph-wrap{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 50% 50%, rgba(12,22,42,.7), rgba(3,7,15,.9))}
.graph-wrap svg{display:block;width:100%;height:560px;cursor:grab}
.graph-wrap svg:active{cursor:grabbing}
.graph-wrap canvas{display:block;width:100%;height:560px;cursor:grab;touch-action:none}
.graph-wrap canvas:active{cursor:grabbing}
.graph-tools{display:inline-flex;flex-wrap:wrap;gap:8px}
.obtn.sm.on{border-color:var(--gold-2);color:var(--gold-2);box-shadow:0 0 10px rgba(240,201,135,.22)}
.graph-wrap .glink{stroke:rgba(140,180,220,.22);stroke-width:.8}
.graph-wrap .glink.hot{stroke:var(--gold-2);stroke-width:1.6;filter:drop-shadow(0 0 4px var(--gold-glow))}
.graph-wrap .gnode{cursor:pointer}
.graph-wrap .gnode circle{stroke:rgba(220,235,255,.5);stroke-width:.8;transition:r .18s,stroke-width .18s}
.graph-wrap .gnode.hot circle{stroke:var(--gold-2);stroke-width:1.8}
.graph-wrap .gnode.dim{opacity:.16}
.graph-wrap .gnode text{font-family:var(--font-mono);font-size:8px;fill:var(--ink-2);pointer-events:none;opacity:0;transition:opacity .2s}
.graph-wrap .gnode.show-label text,.graph-wrap .gnode.hot text{opacity:.95}
.graph-wrap .glink.dim{opacity:.08}
.graph-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.graph-legend .k{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.6px}
.graph-legend .k i{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.dep-list{list-style:none;margin:0;padding:0;max-height:210px;overflow:auto}
.dep-list li{
  display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);cursor:pointer;
}
.dep-list li:hover{background:rgba(140,190,255,.08);color:#fff}
.dep-list li .dir-arr{color:var(--gold-2);flex-shrink:0}
.dep-list::-webkit-scrollbar{width:7px}
.dep-list::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--gold-2));border-radius:7px}

/* ====== Диаграммы ====== */
.chart-box{position:relative;height:300px}
.chart-box.tall{height:340px}
.chart-box canvas{max-width:100%}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut-box{position:relative;width:230px;height:230px;flex-shrink:0}
.donut-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;
}
.donut-center .dc-val{font-family:var(--font-display);font-size:30px;font-weight:500;color:#fff;line-height:1}
.donut-center .dc-lbl{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:1.6px;text-transform:uppercase;margin-top:5px}

/* ====== Полосы ====== */
.bars{display:flex;flex-direction:column;gap:11px}
.bars .bar-row{display:grid;grid-template-columns:150px 1fr 96px;gap:12px;align-items:center}
.bars .bar-lbl{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);letter-spacing:.4px;display:flex;align-items:center;gap:8px}
.bars .bar-lbl i{width:9px;height:9px;border-radius:2px;background:currentColor;box-shadow:0 0 8px currentColor;flex-shrink:0}
.bars .bar-track{height:8px;border-radius:999px;background:rgba(140,180,220,.1);overflow:hidden}
.bars .bar-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 12px currentColor;width:0;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.bars .bar-val{font-family:var(--font-mono);font-size:11px;color:#fff;text-align:right;letter-spacing:.4px}

/* ====== Шаги ====== */
.osteps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.osteps .s{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  background:rgba(12,20,38,.6);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
}
.osteps .s .n{
  width:24px;height:24px;border-radius:50%;background:rgba(240,201,135,.06);color:var(--gold-2);
  border:1px solid rgba(240,201,135,.4);display:grid;place-items:center;
  font-family:var(--font-display);font-size:12px;font-weight:600;flex-shrink:0;
}
.osteps .s.active{border-color:var(--gold-2);color:#fff;box-shadow:0 0 24px rgba(240,201,135,.3),inset 0 0 20px rgba(240,201,135,.08)}
.osteps .s.active .n{background:var(--gold-2);color:#001}
.osteps .s.done{border-color:rgba(53,196,107,.45);color:#8fe4b0}
.osteps .s.done .n{background:var(--green);color:#001;border-color:var(--green)}
.osteps .s.err{border-color:rgba(255,95,109,.45);color:#ffb3ba}
.osteps .s.err .n{background:var(--red);color:#001;border-color:var(--red)}

/* ====== Явное «нет данных» ====== */
.nodata{
  display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:10px;
  border:1px dashed rgba(255,180,84,.4);background:rgba(255,180,84,.05);
}
.nodata .nd-title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.8px;color:var(--amber);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.nodata .nd-title::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.nodata .nd-why{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.nodata .nd-how{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);line-height:1.6;word-break:break-word}
.zero-note{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.6px;margin-top:8px}

/* ====== Схема Mermaid ====== */
.mermaid-host{overflow:auto;text-align:center;background:rgba(4,9,20,.5);border-radius:10px;padding:18px 12px 22px}
.mermaid-host svg{display:block;margin:0 auto;max-width:100%}

/* ====== Переход между экранами домена ======
   Подписи настоящих карточек собираются заново буквами. Оформление узлов букв
   берётся у подписи, в которой они живут: отдельного слоя поверх экрана нет. */

/* ====== Раздел AI-команды ====== */
.team-rules{
  margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;
}
.team-rules li{font-size:11.5px;color:var(--ink-2);line-height:1.55}
.skill-card{
  padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(12,20,38,.7),rgba(6,11,24,.6));
  margin-bottom:10px;
}
.skill-card:last-child{margin-bottom:0}
.skill-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.skill-head .skill-name{font-size:13px;color:#fff;font-weight:600;letter-spacing:.4px}
.skill-head .skill-slug{font-size:10px}
.skill-head .skill-count{margin-left:auto;font-size:10px;color:var(--gold-2)}
.skill-purpose{font-size:11.5px;color:var(--ink-2);line-height:1.55;margin:6px 0 8px}
.skill-parts{display:flex;flex-wrap:wrap;gap:6px}
.skill-part{
  display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;border-radius:7px;
  border:1px solid var(--line);background:rgba(8,14,28,.6);
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:.4px;
}
.skill-part b{color:var(--cyan-2);font-weight:500;text-transform:uppercase}

.mono{font-family:var(--font-mono);letter-spacing:.6px}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.mt{margin-top:14px}

/* ====== Адаптивность ======
   Главное окно остаётся статичным на всех размерах: меняется плотность и
   размеры, а не наличие прокрутки. */
@media (max-width:1500px){
  .summary{grid-template-columns:repeat(4,1fr)}
  .skpi .val{font-size:21px}
  .core-wrap{grid-template-columns:1fr minmax(200px,260px) 1fr}
  .core-text .title{font-size:34px}
  .head-note{max-width:280px}
}
@media (max-width:1240px){
  .summary{grid-template-columns:repeat(4,1fr)}
  .skpi .val{font-size:19px}
  .brand .logo{font-size:36px}
  .head-note{display:none}
  .entry .body{-webkit-line-clamp:2}
  .core-wrap{grid-template-columns:1fr minmax(180px,220px) 1fr}
  .core-text .desc{display:none}
}
@media (max-width:1100px){
  /* На узком экране колонки карточек становятся шире: прокрутки по-прежнему
     нет, уменьшается только число видимых строк. */
  .summary{grid-template-columns:repeat(3,1fr)}
  .core-wrap{grid-template-columns:1fr 200px 1fr}
  .scene{padding:12px 14px 8px}
  .brand .logo{font-size:30px}
  .core-text .title{font-size:28px}
  .core-text .subtitle{display:none}
  .ogrid.c4{grid-template-columns:repeat(2,1fr)}
  .ogrid.c2w,.ogrid.c2n{grid-template-columns:1fr}
  .bars .bar-row{grid-template-columns:130px 1fr 84px}
  .shell-head .h-name{font-size:22px}
  .shell-body{padding:16px}
  .overlay{padding:8px}
  .osteps{grid-template-columns:1fr}
  .bars .bar-row{grid-template-columns:1fr;gap:6px}
  .bars .bar-val{text-align:left}
  .graph-wrap svg{height:400px}
  .graph-wrap canvas{height:400px}
}
@media (max-height:860px){
  /* Низкий экран: уплотняем полосу показателей и карточки. Содержимое не
     пропадает: сокращаются только пояснения, важные строки остаются. */
  .skpi{padding:7px 10px}
  .skpi .val{font-size:20px}
  .skpi .sub{display:none}
  .skpi.strip .sub{display:block}
  .summary{gap:8px}
  .entry{padding:9px 12px 8px}
  .entry .body{-webkit-line-clamp:2;font-size:10.5px}
  .entry .foot{padding-top:5px;margin-top:5px}
  .core-text .desc{display:none}
  .brand .mini{margin-bottom:5px}
  .brand .logo{font-size:38px}
  /* Карточка выдачи прав на низком экране уплотняется: описание снимается,
     чтобы карточка не выходила за высоту нижней полосы и не налегала на ряд
     карточек сцены. Набор данных при этом не сокращается. */
  .band.band-access .band-grant .body{display:none}
}
@media (max-height:720px){
  .entry .body{display:none}
  .summary{grid-template-columns:repeat(7,1fr)}
  .skpi .val{font-size:18px}
}