/* ============================================================
     ТОКЕНЫ. Командный центр SOLIX: глубокий navy/slate, спокойный
     индиго для интерактива + сдержанное фирменное золото SOLIX как
     «солидный» акцент (перекликается со сметой, не кислотно).
     Статусные цвета — семантические. Без маркетинговых градиентов.
     ============================================================ */
  :root{
    /* поверхности (выверенная шкала глубины) */
    --bg:#03050e;
    --bg-2:#060a17;
    --bg-grad:#0f1c3c;
    --panel:#0d152b;
    --panel-2:#121d38;
    --panel-3:#1b2750;
    --line:#26345e;
    --line-strong:#3a4d86;

    /* текст */
    --ink:#f0f3fc;
    --ink-2:#c5cde6;
    --muted:#8b96bc;
    --muted-2:#6a759c;

    /* интерактивный акцент (спокойный индиго) */
    --accent:#5b7cfa;
    --accent-soft:#22305a;
    --focus:#9db1ff;

    /* неоновая голо-кромка (командный центр / голограмма) */
    --neon:#3ee6ff;
    --neon-2:#7c5cff;
    --neon-soft:#0a2733;
    --glow-accent:0 0 20px rgba(91,124,250,.55);
    --glow-neon:0 0 24px rgba(62,230,255,.45);
    --glow-gold:0 0 22px rgba(227,179,65,.42);

    /* фирменное золото SOLIX (солидный, не кислотный акцент) */
    --gold:#e3b341;
    --gold-soft:#3a2f12;
    --gold-line:#6d551f;
    --gold-ink:#ffdf9e;

    /* статусы (семантические токены) */
    --st-live:#34d399;     --st-live-ink:#06281c;   --st-live-soft:#11362a;
    --st-human:#4aa3ff;    --st-human-ink:#08314f;  --st-human-soft:#15314c;
    --st-plan:#f5a623;     --st-plan-ink:#3d2a07;   --st-plan-soft:#3a2d12;
    --st-vacant:#fb6470;   --st-vacant-ink:#46101a; --st-vacant-soft:#3a161c;
    --st-director:#a594ff; --st-director-soft:#262048;

    /* радиусы / отступы (шкала 4) */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

    /* тени (сдержанная глубина, мягкие слои) */
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-card:0 18px 48px -22px rgba(0,0,0,.75), 0 2px 8px -2px rgba(0,0,0,.4);
    --shadow-pop:0 24px 60px -20px rgba(0,0,0,.8);

    --ring-focus:0 0 0 3px rgba(91,124,250,.28);
  }

  *{box-sizing:border-box}

  html{ -webkit-text-size-adjust:100% }

  body{
    margin:0;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
    font-size:16px;
    line-height:1.5;
    color:var(--ink);
    background:
      radial-gradient(1100px 520px at 50% -14%, var(--bg-grad), transparent 60%),
      radial-gradient(900px 600px at 100% 0%, rgba(62,230,255,.06), transparent 55%),
      radial-gradient(900px 600px at 0% 100%, rgba(124,92,255,.06), transparent 55%),
      linear-gradient(180deg, var(--bg-2), var(--bg));
    background-attachment:fixed;
    padding:var(--sp-6) var(--sp-4) 64px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    position:relative;
    overflow-x:hidden;
  }
  /* дрейфующая голо-сетка на фоне всего интерфейса */
  body::before{
    content:""; position:fixed; inset:-2px; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(62,230,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(62,230,255,.05) 1px, transparent 1px);
    background-size:46px 46px;
    mask-image:radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 85%);
    -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 85%);
    animation:gridDrift 22s linear infinite;
  }
  @keyframes gridDrift{ from{background-position:0 0,0 0} to{background-position:46px 46px,46px 46px} }
  /* медленный сканлайн-свип сверху вниз (HUD) */
  body::after{
    content:""; position:fixed; left:0; right:0; height:30vh; top:-30vh; z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(62,230,255,.06) 60%, rgba(62,230,255,.12));
    animation:scanSweep 7.5s ease-in-out infinite;
  }
  @keyframes scanSweep{ 0%{transform:translateY(0)} 60%,100%{transform:translateY(160vh)} }

  .wrap{ max-width:1340px; margin:0 auto; position:relative; z-index:1 }

  /* видимый фокус для всех интерактивных элементов (доступность) */
  :focus-visible{
    outline:2px solid var(--focus);
    outline-offset:2px;
    border-radius:6px;
  }

  /* ---------------- шапка ---------------- */
  header{
    display:flex; align-items:center; gap:var(--sp-4);
    padding-bottom:var(--sp-4);
    border-bottom:1px solid var(--line);
    margin-bottom:var(--sp-5);
  }
  .logo{
    flex:0 0 auto; width:52px; height:52px; border-radius:14px;
    background:
      radial-gradient(120% 120% at 30% 20%, rgba(227,179,65,.20), transparent 60%),
      linear-gradient(155deg, var(--panel-3), var(--panel));
    border:1px solid var(--line-strong);
    display:grid; place-items:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-sm);
  }
  .logo svg{ width:27px; height:27px }
  .head-text{ min-width:0 }
  header h1{
    font-size:1.6rem; line-height:1.15; font-weight:800; margin:0 0 4px;
    letter-spacing:-0.02em;
    text-shadow:0 0 22px rgba(91,124,250,.25);
  }
  header h1 .accentword{
    color:var(--gold);
    text-shadow:0 0 18px rgba(227,179,65,.45);
  }
  .logo{ animation:logoGlow 4.5s ease-in-out infinite }
  @keyframes logoGlow{
    0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-sm) }
    50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 22px rgba(227,179,65,.35) }
  }
  .sub{ color:var(--muted); font-size:.875rem; line-height:1.5; max-width:80ch }
  .head-meta{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2);
    flex:0 0 auto; align-self:flex-start }
  .pill-live{
    display:inline-flex; align-items:center; gap:7px;
    font-size:.72rem; font-weight:700; letter-spacing:.02em;
    color:var(--st-live); background:var(--st-live-soft);
    border:1px solid rgba(52,211,153,.32);
    padding:6px 11px; border-radius:999px; white-space:nowrap;
  }
  .pill-live .blip{ width:8px; height:8px; border-radius:50%; background:var(--st-live);
    box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:blip 2.2s ease-out infinite }
  @keyframes blip{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)} 70%{box-shadow:0 0 0 7px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }

  .banner{
    display:flex; gap:var(--sp-3); align-items:flex-start;
    background:linear-gradient(180deg, var(--gold-soft), rgba(58,47,18,.55));
    border:1px solid var(--gold-line);
    color:var(--gold-ink);
    padding:12px 15px;
    border-radius:var(--r-md);
    font-size:.8rem; line-height:1.5;
    margin:0 0 var(--sp-5);
    box-shadow:var(--shadow-sm);
  }
  .banner svg{ flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:var(--gold) }

  /* ---------------- тулбар ---------------- */
  .toolbar{
    display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;
    margin-bottom:var(--sp-4);
    padding:var(--sp-3);
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);
  }

  .search{ position:relative; flex:1 1 280px; min-width:220px }
  .search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%);
    width:17px; height:17px; color:var(--muted-2); pointer-events:none;
    transition:color .18s ease }
  .search input{
    width:100%; height:44px;
    background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
    border-radius:var(--r-md); padding:0 14px 0 40px; font-size:.9rem;
    outline:none; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .search input::placeholder{ color:var(--muted-2) }
  .search input:hover{ border-color:var(--line-strong) }
  .search input:focus{ border-color:var(--accent); box-shadow:var(--ring-focus); background:var(--panel) }
  .search:focus-within svg{ color:var(--accent) }

  .filters{ display:flex; flex-wrap:wrap; gap:var(--sp-2) }
  .chip{
    display:inline-flex; align-items:center; gap:8px;
    min-height:44px; padding:0 15px;
    background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2);
    border-radius:999px; font-size:.82rem; font-weight:600; line-height:1;
    font-family:inherit; cursor:pointer; user-select:none;
    transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  }
  .chip .swatch{ width:9px; height:9px; border-radius:50%; flex:0 0 auto;
    box-shadow:0 0 0 2px rgba(0,0,0,.25) }
  .chip:hover{ border-color:var(--line-strong); color:var(--ink); background:var(--panel-2) }
  .chip:active{ transform:translateY(1px) }
  .chip[aria-pressed="true"]{
    background:var(--accent-soft); border-color:var(--accent); color:#fff;
    box-shadow:inset 0 0 0 1px rgba(91,124,250,.5);
  }

  .count{ color:var(--muted); font-size:.78rem; font-weight:600; margin-left:auto;
    white-space:nowrap; padding-right:var(--sp-1) }
  .count b{ color:var(--ink); font-weight:700 }

  /* ---------------- раскладка ---------------- */
  .layout{ display:flex; gap:var(--sp-4); align-items:flex-start }
  .floor{ flex:1 1 auto; min-width:0 }
  .floor-frame{
    position:relative;
    background:
      radial-gradient(140% 120% at 50% 0%, rgba(62,230,255,.08), transparent 55%),
      linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line-strong);
    border-radius:var(--r-xl); padding:10px;
    box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04),
      0 0 0 1px rgba(62,230,255,.08), 0 0 38px -6px rgba(62,230,255,.22);
    overflow:hidden;
  }
  /* бегущая неоновая кромка по периметру голо-стола */
  .floor-frame::before{
    content:""; position:absolute; inset:0; border-radius:var(--r-xl);
    padding:1px; pointer-events:none;
    background:linear-gradient(120deg, transparent 20%, var(--neon) 45%, var(--neon-2) 55%, transparent 80%);
    background-size:300% 300%;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.5; animation:edgeRun 6s linear infinite;
  }
  @keyframes edgeRun{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
  svg.plan{ width:100%; height:auto; display:block; border-radius:var(--r-lg) }

  /* ---------------- классы внутри SVG ---------------- */
  .screen{ fill:#0e2f57; animation:flick 3s ease-in-out infinite }
  @keyframes flick{ 0%,100%{fill:#102f55} 50%{fill:#3a86d6} }

  .pname{ font:700 13px system-ui,"Segoe UI",sans-serif; fill:#e4ebfb; text-anchor:middle; letter-spacing:-.2px }
  .pwho{  font:600 11px system-ui,"Segoe UI",sans-serif; fill:#7fb0ec; text-anchor:middle }
  .pplan{ font:600 11px system-ui,"Segoe UI",sans-serif; fill:#e3b341; text-anchor:middle }
  .pvac{  font:700 10.5px system-ui,"Segoe UI",sans-serif; fill:#ff6b78; text-anchor:middle }
  .act{   font:600 10px system-ui,"Segoe UI",sans-serif; fill:#8b96bc; text-anchor:middle }

  .actemoji{ font-size:16px; text-anchor:middle; transform-box:fill-box; transform-origin:center }
  .actemoji.bob{ animation:bob 1.8s ease-in-out infinite }
  @keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

  .roomlabel{ font:700 13px system-ui,"Segoe UI",sans-serif; fill:#bfa9ff; text-anchor:middle; letter-spacing:.4px }
  .think{ font:600 12px system-ui,"Segoe UI",sans-serif; fill:#ccbcff; text-anchor:middle }
  .dring{ fill:none; stroke:#a594ff; stroke-width:2; animation:pulse 2.8s ease-in-out infinite }
  @keyframes pulse{ 0%,100%{opacity:.28} 50%{opacity:.95} }
  .halo{ fill:none; stroke:#22b67a; stroke-width:2.5; animation:pulse 2.6s ease-in-out infinite }
  .zone{ font:700 10px system-ui,"Segoe UI",sans-serif; fill:#5a6486; text-anchor:middle; letter-spacing:.6px; text-transform:uppercase }
  .zonelt{ font:700 11px system-ui,"Segoe UI",sans-serif; fill:#eaf0fb; text-anchor:middle; letter-spacing:.3px }

  /* интерактивные столы */
  .pod{ cursor:pointer }
  .pod .podtile{ fill:rgba(16,27,54,.66); stroke:rgba(62,230,255,.22); stroke-width:1.5;
    transition:fill .18s ease, stroke .18s ease, filter .18s ease }
  .pod .podhit{ fill:transparent }
  .pod .podsel{ fill:none; stroke:var(--neon); stroke-width:0;
    transition:stroke-width .18s ease, stroke .18s ease }
  .pod.dim{ opacity:.16; transition:opacity .25s ease }
  .pod:hover .podtile{ fill:rgba(28,44,84,.85); stroke:rgba(62,230,255,.6);
    filter:drop-shadow(0 0 10px rgba(62,230,255,.4)) }
  .pod:hover .podsel{ stroke:var(--neon); stroke-width:2.5 }
  .pod.hit .podtile{ fill:rgba(44,40,18,.78); stroke:rgba(227,179,65,.65) }
  .pod.hit .podsel{ stroke:#e3b341; stroke-width:3.5 }
  /* фокус с клавиатуры по столу */
  .pod:focus{ outline:none }
  .pod:focus-visible .podsel{ stroke:var(--focus); stroke-width:3.5 }

  /* линии-связи директор → роли + бегущий импульс данных */
  .link{ animation:dashFlow 1.5s linear infinite }
  @keyframes dashFlow{ to{ stroke-dashoffset:-22 } }
  .flow{ filter:drop-shadow(0 0 6px rgba(52,211,153,.9)) }

  /* свечение «живых» ореолов и колец директора */
  .halo{ filter:drop-shadow(0 0 7px rgba(52,211,153,.55)) }
  .dring{ filter:drop-shadow(0 0 8px rgba(165,148,255,.6)) }

  /* однократный скан-свип при загрузке голо-стола */
  .bootscan{
    position:absolute; left:10px; right:10px; top:10px; height:130px;
    pointer-events:none; z-index:3; border-radius:16px;
    background:linear-gradient(180deg, transparent, rgba(62,230,255,.14) 70%, rgba(62,230,255,.5));
    mix-blend-mode:screen; opacity:0;
    animation:bootScan 1.7s ease-in 1 forwards;
  }
  @keyframes bootScan{
    0%{ transform:translateY(-130px); opacity:0 }
    10%{ opacity:1 } 88%{ opacity:1 }
    100%{ transform:translateY(680px); opacity:0 }
  }
  @media (prefers-reduced-motion: reduce){ .bootscan{ display:none } }

  /* ---------------- легенда + подвал ---------------- */
  .legend{
    display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-4);
    padding:var(--sp-3) var(--sp-4);
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
    color:var(--ink-2); font-size:.78rem; font-weight:500;
  }
  .legend span{ display:inline-flex; align-items:center; gap:8px }
  .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto;
    box-shadow:0 0 0 2px rgba(0,0,0,.25) }
  .foot{ margin-top:var(--sp-3); color:var(--muted); font-size:.76rem; line-height:1.6 }
  .foot code{ background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
    padding:1px 6px; font-size:.92em; font-family:ui-monospace,Consolas,monospace; color:var(--gold-ink) }

  /* ---------------- карточка ---------------- */
  .card{
    flex:0 0 360px; background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line-strong);
    border-radius:var(--r-lg); overflow:hidden; position:sticky; top:var(--sp-4);
    align-self:flex-start; display:none; box-shadow:var(--shadow-pop);
  }
  .card.show{ display:block; animation:cardin .22s cubic-bezier(.2,.7,.3,1) }
  @keyframes cardin{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

  .chead{
    padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4);
    border-bottom:1px solid var(--line);
    position:relative;
    background:linear-gradient(180deg, var(--panel-3), var(--panel-2));
  }
  .chead::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg, var(--gold), transparent) }
  .ctitle{ font-size:1.12rem; font-weight:800; margin:0 36px 8px 6px; line-height:1.25; letter-spacing:-.02em }
  .cstatus{ font-size:.75rem; font-weight:600; margin-left:6px }
  .cclose{
    position:absolute; top:12px; right:12px;
    width:34px; height:34px; display:grid; place-items:center;
    background:var(--bg-2); border:1px solid var(--line); color:var(--muted);
    cursor:pointer; line-height:0; border-radius:var(--r-sm);
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .cclose svg{ width:16px; height:16px }
  .cclose:hover{ color:#fff; background:var(--panel-3); border-color:var(--line-strong) }
  .cclose:active{ transform:translateY(1px) }

  .cbody{ padding:var(--sp-4); font-size:.85rem; line-height:1.55 }
  .row{ margin:0 0 var(--sp-4) }
  .row:last-child{ margin-bottom:0 }
  .lbl{ color:var(--muted); font-size:.66rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; margin:0 0 5px }
  .val{ color:var(--ink); font-weight:500 }
  .desc{ color:var(--ink-2); font-size:.82rem; background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r-sm); padding:11px 13px; line-height:1.6 }
  .filelink{ display:flex; align-items:center; gap:9px; background:var(--bg-2);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px;
    font-size:.72rem; color:#bcd0ff; margin:0 0 8px; word-break:break-all;
    font-family:ui-monospace,Consolas,monospace; line-height:1.45;
    transition:border-color .15s ease, background .15s ease }
  .filelink:last-child{ margin-bottom:0 }
  .filelink:hover{ border-color:var(--line-strong); background:var(--panel) }
  .filelink svg{ flex:0 0 auto; width:15px; height:15px; color:var(--gold) }

  .badge{ display:inline-flex; align-items:center; gap:7px;
    font-size:.72rem; font-weight:800; padding:5px 12px; border-radius:999px;
    box-shadow:var(--shadow-sm) }
  .badge .swatch{ width:8px; height:8px; border-radius:50% }
  .layer{ display:inline-block; font-size:.74rem; color:var(--ink-2); font-weight:600;
    background:var(--bg-2); border:1px solid var(--line); border-radius:7px; padding:4px 10px }
  .hint{ color:var(--muted-2); font-size:.74rem; margin-top:var(--sp-2); font-style:italic }

  /* ---------------- адаптив ---------------- */
  @media (max-width:920px){
    .layout{ flex-direction:column }
    .card{ flex:1 1 auto; width:100%; position:static }
    .count{ margin-left:0 }
    .head-meta{ display:none }
  }
  @media (max-width:560px){
    body{ padding:var(--sp-4) var(--sp-3) 40px }
    header{ gap:var(--sp-3) }
    header h1{ font-size:1.35rem }
    .logo{ width:46px; height:46px }
    .search{ flex-basis:100% }
  }

  /* уважаем системную настройку «меньше движения» */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important }
  }