/* Украшения: эмблема, радар флота, сияние шапки, иллюстрации пустых
   состояний, значки показателей. Движение ведёт js/art.js (data-art); здесь
   только вид и точки опоры трансформаций. Файл самостоятельный: его берёт и
   панель, где components.css нет, поэтому классы отсюда ни на что чужое не
   опираются. */

/* ——— Сетка точек под содержимым: видна только в зазорах между панелями. ——— */
.page, .login-stage {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1.3px);
  background-size: 22px 22px;
  background-position: -11px -11px;
}

/* ——— Эмблема: щит и огонёк — статичный SVG; орбита и ореол — блоки
   поверх, их трансформацию проигрывает композитор. Координаты блоков —
   доли рисунка 24×24: кольцо орбиты с центром (12; 11,6) и радиусом 5,2. ——— */
.emblem { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; --em: var(--ok); }
.emblem.e-warn, .emblem.e-idle { --em: var(--warn); }
.emblem.e-down { --em: var(--down); }
.emblem.e-unknown { --em: var(--unknown); }
.emblem.e-maint { --em: var(--maint); }
.emblem svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.emblem .em-shield { fill: color-mix(in srgb, var(--em) 13%, transparent); stroke: var(--em); stroke-width: 1.5; stroke-linejoin: round; }
.emblem .em-ring { fill: none; stroke: var(--em); stroke-opacity: .4; stroke-width: .9; stroke-dasharray: 1.6 2.2; }
.emblem .em-core { fill: var(--em); }
.emblem .em-orbit { position: absolute; z-index: 2; left: 28.33%; top: 26.67%; width: 43.33%; height: 43.33%; pointer-events: none; }
.emblem .em-orbit b { position: absolute; left: 50%; top: 0; width: 21%; height: 21%; border-radius: 50%; background: var(--ink); translate: -50% -50%; }
.emblem .em-halo { position: absolute; z-index: 0; left: 41.25%; top: 39.58%; width: 17.5%; height: 17.5%; border-radius: 50%; background: var(--em); opacity: 0; pointer-events: none; }
.emblem.lg { width: 56px; height: 56px; }

/* ——— Комета по нижней кромке шапки: редкий блик слева направо. ——— */
.comet { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; pointer-events: none; }
.comet i { display: block; width: 25%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 80%, transparent), transparent); transform: translateX(-100%); }

/* ——— Подвал с эмблемой ——— */
.foot-brand { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 11.5px; }
.foot-brand .emblem { width: 16px; height: 16px; opacity: .8; }

/* ——— Шапка главной: радар и заголовок — одной невысокой полосой. ——— */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 22px;
  margin-bottom: 14px; padding: 10px 18px 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  --hero-a: var(--accent); --hero-b: var(--ok);
}
.hero.h-warn { --hero-b: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, var(--line)); }
.hero.h-down { --hero-b: var(--down); border-color: color-mix(in srgb, var(--down) 34%, var(--line)); }
.hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-glow i { position: absolute; border-radius: 50%; }
.hero-glow i:nth-child(1) { left: -6%; top: -120%; width: 34%; height: 340%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--hero-a) 16%, transparent), transparent); }
.hero-glow i:nth-child(2) { right: -4%; top: -140%; width: 38%; height: 380%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--hero-b) 12%, transparent), transparent); }
.hero-glow i:nth-child(3) { left: 38%; top: -100%; width: 30%; height: 300%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--drift) 8%, transparent), transparent); }

.hero-art { flex: none; width: 112px; }
.hero-text { min-width: 0; }
.hero-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.hero-title {
  margin: 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em;
  background: linear-gradient(95deg, var(--ink) 40%, color-mix(in srgb, var(--hero-b) 70%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--muted); font-size: 12.5px; }
.hero .statusline { margin: 8px 0 0; padding: 0; background: none; border: 0; border-radius: 0; }

/* География: страны по числу людей, справа в шапке. */
.hero-text { flex: 1 1 520px; }
.hero-geo { flex: 1 1 560px; max-width: 840px; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-left: 20px; border-left: 1px solid var(--line-soft); }
.geo-head { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.geo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; }
.geo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 7px; padding: 2px 0 5px; font-size: 12.5px; color: var(--ink-2); }
.geo .geo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo .dot { width: 6px; height: 6px; }
.geo b { font: 500 13px var(--mono); color: var(--ink); text-align: right; }
.geo-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.geo-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent)); transition: width .8s var(--ease); }
.geo:hover .geo-name { color: var(--ink); }

/* ——— Радар: статичный циферблат, вращающийся корневой SVG луча и HTML-слой
   отметок. Всё, что движется, — отдельные блоки: слой композитора. ——— */
.radar { position: relative; width: 100%; aspect-ratio: 1; }
.radar-face, .radar-sweep { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.radar .r-disc0 { stop-color: var(--accent); stop-opacity: .1; }
.radar .r-disc1 { stop-color: var(--accent); stop-opacity: 0; }
.radar .r-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.radar .r-ring.outer { stroke: color-mix(in srgb, var(--accent) 38%, var(--line)); stroke-width: 1.2; }
.radar .r-cross { stroke: var(--line); stroke-width: .8; stroke-dasharray: 1.5 4; }
.radar .r-ticks { stroke: var(--faint); stroke-width: 1; }
.radar-sweep path { fill: var(--accent); }
.radar-sweep path:nth-child(1) { fill-opacity: .26; }
.radar-sweep path:nth-child(2) { fill-opacity: .17; }
.radar-sweep path:nth-child(3) { fill-opacity: .11; }
.radar-sweep path:nth-child(4) { fill-opacity: .07; }
.radar-sweep path:nth-child(5) { fill-opacity: .04; }
.radar-sweep path:nth-child(6) { fill-opacity: .02; }
.radar-sweep .sweep-edge { stroke: var(--accent); stroke-width: 1.2; stroke-opacity: .8; }
.radar-hub { position: absolute; left: 50%; top: 50%; width: 5%; height: 5%; translate: -50% -50%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px color-mix(in srgb, var(--accent) 50%, var(--line)); pointer-events: none; }
.radar .blips { position: absolute; inset: 0; }

/* Отметка: центр — в left/top, размер — в --d (доли круга, задаёт radar.js). */
.blip { position: absolute; width: var(--d, 3%); height: var(--d, 3%); translate: -50% -50%; border-radius: 50%; cursor: pointer; transition: left .9s var(--ease), top .9s var(--ease), width .6s var(--ease), height .6s var(--ease); outline: none; }
.blip i { position: absolute; inset: 0; border-radius: 50%; background: var(--c); pointer-events: none; }
.blip .blip-core { box-shadow: 0 0 0 1px var(--panel); }
.blip .blip-ping, .blip .blip-alarm { opacity: 0; }
.blip:hover .blip-core, .blip:focus-visible .blip-core { box-shadow: 0 0 0 1.5px var(--ink); }
.blip.b-ok { --c: var(--ok); } .blip.b-warn { --c: var(--warn); } .blip.b-down { --c: var(--down); }
.blip.b-idle { --c: var(--idle); } .blip.b-maint { --c: var(--maint); } .blip.b-drift { --c: var(--drift); } .blip.b-unknown { --c: var(--unknown); }

/* Сервер, к которому привёл радар. */
.srv.is-spot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 12px 40px -12px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ——— Значки показателей ——— */
.kpi { position: relative; }
.kpi-ico { position: absolute; top: 11px; right: 12px; width: 22px; height: 22px; color: var(--faint); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .75; transition: color .2s, opacity .2s; }
.kpi:hover .kpi-ico { color: var(--accent); opacity: 1; }
.kpi-ico .fill { fill: currentColor; stroke: none; }

/* ——— Значок раздела рядом с заголовком: рисунок статичен, блик —
   отдельный блок поверх плитки. ——— */
.headline-mark { display: flex; align-items: center; gap: 14px; }
.sec-art { position: relative; overflow: hidden; flex: none; display: block; width: 44px; height: 44px; padding: 8px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); color: var(--accent); }
.sec-art svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sec-art.tt-warn { color: var(--warn); } .sec-art.tt-down { color: var(--down); }
.sec-art .led { fill: var(--ok); stroke: none; }
.sec-art .fill { fill: currentColor; stroke: none; opacity: .18; }
.sec-glint { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, color-mix(in srgb, currentColor 22%, transparent), transparent); transform: translateX(-100%); pointer-events: none; }

/* ——— Пустое состояние: спокойный щит с галочкой. ——— */
.calm { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); }
.calm-art { flex: none; width: 118px; height: 84px; overflow: visible; }
.calm-art .c-shield { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 1.6; stroke-linejoin: round; }
.calm-art .c-check { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.calm-art .c-orbit { fill: none; stroke: var(--line); stroke-dasharray: 2 4; }
.calm-art .c-star { fill: var(--muted); opacity: .35; }
.calm b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; margin-bottom: 2px; }

/* ——— Сцена входа в панель ——— */
.login-stage { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - 53px); display: grid; place-items: center; padding: 40px 16px; }
.login-stage .stage-radar { position: absolute; z-index: -1; width: min(900px, 130vw); aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; opacity: .55; pointer-events: none; }
.login-stage .hero-glow i:nth-child(1) { left: 5%; top: 10%; width: 50%; height: 70%; }
.login-stage .hero-glow i:nth-child(2) { right: 5%; top: 30%; width: 50%; height: 70%; }
.login-stage .hero-glow i:nth-child(3) { left: 30%; top: auto; bottom: -20%; width: 40%; height: 60%; }
.login-stage { --hero-a: var(--accent); --hero-b: var(--drift); }
.login-mark { display: grid; place-items: center; margin: -4px 0 12px; }

@media (max-width: 1320px) {
  .hero { flex-wrap: wrap; }
  .hero-text { flex-basis: calc(100% - 140px); }
  .hero-geo { flex: 1 1 100%; max-width: none; padding: 8px 0 2px; border-left: 0; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 760px) {
  .hero-text { flex-basis: calc(100% - 100px); }
  .geo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { gap: 14px; padding: 10px 14px 10px 10px; }
  .hero-art { width: 84px; }
  .hero-title { font-size: 18px; }
  .calm { flex-direction: column; text-align: center; }
  .sec-art, .kpi-ico { display: none; }
}