/*
 * Внешний вид страницы видеонаблюдения.
 * Здесь находятся стили плеера, списков камер, PTZ-панели, подсказок,
 * блока онлайн-пользователей и диагностики.
 */
    .video-shell{display:grid;gap:16px}

    /* Сетка селекторов: всегда 3 колонки, чтобы 4-й блок начинал второй ряд */
    .selectors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
    .selectors .field{display:flex;flex-direction:column;gap:6px}
    .selectors label{font-size:12px;opacity:.8}

    /* На узких экранах — один столбец, блоки идут друг под другом */
    @media(max-width:780px){
      .selectors{grid-template-columns:1fr}
    }

    .wrap{position:relative;background:#000;border-radius:12px;overflow:hidden;
          border:1px solid var(--card-border,#1b2430);min-height:520px;touch-action:pan-y}
    .wrap.is-ptz,
    .wrap.is-view-zoomed{touch-action:none}
    .wrap video{width:100%;height:100%;display:block;object-fit:contain;background:#000;touch-action:inherit;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}

    .hint{position:absolute;left:10px;top:30px;font-size:12px;opacity:.8;
          background:rgba(15,20,25,.75);padding:4px 8px;border-radius:10px;border:1px solid #1f2833}
    .badge{position:absolute;left:10px;bottom:10px;font-size:12px;opacity:.85;
           background:rgba(15,20,25,.75);padding:5px 10px;border-radius:14px;border:1px solid #1f2833}

    /* Индикатор состояния воспроизведения
       Располагается в правом верхнем углу видеоплеера. Цветовая схема
       соответствует состоянию: жёлтый — подключение, зелёный — онлайн,
       красный — ошибка или нет сигнала. */
    .player-state{position:absolute;right:10px;top:10px;font-size:12px;padding:4px 8px;border-radius:10px;
      background:rgba(15,20,25,.85);border:1px solid #1f2833;color:var(--text);pointer-events:none;opacity:.95;z-index:10;}
    .player-state.connecting{background:rgba(241,196,15,.25);border-color:#f39c12;color:#f1c40f;}
    .player-state.playing{background:rgba(46,204,113,.25);border-color:#2ecc71;color:#2ecc71;}
    .player-state.offline{background:rgba(231,76,60,.25);border-color:#e74c3c;color:#e74c3c;}
    .player-state.error{background:rgba(231,76,60,.25);border-color:#e74c3c;color:#e74c3c;}

    .ptz-pad{position:absolute;right:10px;bottom:10px;display:none;gap:8px;align-items:center;z-index:12;
             background:rgba(15,20,25,.85);border:1px solid #1f2833;border-radius:12px;padding:10px;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
    .ptz-pad.show{display:flex}
    .ptz-grid{display:grid;grid-template-columns:32px 32px 32px;gap:6px;align-items:center;justify-items:center}
    .ptz-btn{width:32px;height:32px;border-radius:8px;border:1px solid #2b3646;background:#10161d;color:#b8cadc;
             display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
    .ptz-btn:active{transform:translateY(1px)}
    .ptz-btn.is-active{
      background:linear-gradient(180deg,rgba(104,176,255,.32),rgba(20,44,72,.92));
      border-color:#68b0ff;
      color:#fff;
      box-shadow:0 0 14px rgba(104,176,255,.35), inset 0 0 10px rgba(104,176,255,.18);
    }
    .ptz-zoom{display:flex;flex-direction:column;gap:6px;margin-left:8px}
    .pill{font-size:11px;opacity:.85}

    /* Рамка Shift+выделения для PTZ-зумирования по области.
       pointer-events:none нужен, чтобы рамка не перехватывала мышь у плеера. */
    .box{
      position:absolute;
      border:2px solid #ffd27a;
      border-radius:8px;
      background:rgba(255,178,38,.16);
      box-shadow:0 0 26px rgba(255,178,38,.28), inset 0 0 18px rgba(104,176,255,.12);
      display:none;
      pointer-events:none;
      z-index:8;
    }

    .compass{position:absolute;right:10px;top:30px;background:rgba(15,20,25,.85);border:1px solid #1f2833;border-radius:10px;padding:6px}
    .compass canvas{display:block}

    .toolbar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

    .sliders{display:flex;gap:16px;align-items:center;justify-content:flex-end}
    .sliders label{font-size:12px;opacity:.85}
    .sliders input[type=range]{width:180px}

    @media(max-width:600px){
      .sliders{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px}
      .sliders input[type=range]{width:100%}
    }

    details.diag{border:1px solid var(--card-border,#1b2430);border-radius:12px;background:var(--card-bg,#0d131a)}
    details.diag > summary{cursor:pointer;list-style:none;padding:10px 12px;font-weight:600}
    details.diag > summary::-webkit-details-marker{display:none}
    details.diag > .body{padding:10px 12px;border-top:1px solid #1b2430}
    .log{margin:0;max-height:220px;overflow:auto;white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}

    /* presence */
    .presence{display:grid;gap:12px}
    .presence .kpis{display:flex;gap:12px;flex-wrap:wrap}
    .kpi{flex:0 0 auto;min-width:160px;background:var(--card-bg,#0d131a);border:1px solid #1b2430;border-radius:12px;padding:10px}
    .presence-list{display:grid;gap:8px}
    .presence-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border:1px solid #1b2430;border-radius:10px;background:var(--card-bg,#0d131a)}
    .presence-item .left{display:flex;gap:8px;align-items:center}
    .presence-item .tag{font-size:11px;padding:2px 8px;border-radius:999px;background:#15202b;border:1px solid #1f2833}
    
.info-hints{
  margin:0;                 /* Блок остается на одном уровне с остальными карточками страницы. */
  padding:14px 16px;        /* Чуть больше воздуха, чтобы памятка легко читалась под плеером. */
  font-size:13px;
  line-height:1.5;
  display:grid;
  gap:10px;
}

.info-hints-title{
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:2px;
}

.info-hints-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.info-hints-item{
  min-height:58px;
  padding:9px 10px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(15,23,42,.50),rgba(37,99,160,.32));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.info-hints-item b{
  color:#fff;
}

.video-net-info{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:11px;
  opacity:.9;
}

.video-net-info span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.64);
  border:1px solid rgba(255,255,255,.12);
}

.video-net-info small{
  color:rgba(226,238,255,.76);
}

@media (max-width:900px){
  .info-hints-grid{grid-template-columns:1fr}
}


.muted{opacity:.75}

    .icon-online,.icon-diag{font-size:18px;line-height:1}
    .diag-arrow{margin-left:auto;transition:transform .2s ease}
    details.diag[open] .diag-arrow{transform:rotate(180deg)}

    /* Кнопка Аналитика — эффект "жидкого стекла" */
    .btn-analytics{
      display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;
      color:var(--text);text-decoration:none;
      background:linear-gradient(270deg,rgba(0,164,219,.3),rgba(255,255,255,.08),rgba(0,164,219,.3));
      background-size:400% 400%;
      border:1px solid rgba(255,255,255,.2);
      backdrop-filter:blur(12px) saturate(180%);
      box-shadow:inset 0 0 12px rgba(0,164,219,.25),0 0 20px rgba(0,164,219,.15);
      animation:liquidGlass 8s ease-in-out infinite;transition:.2s;
    }
    .btn-analytics:hover{transform:translateY(-1px);box-shadow:inset 0 0 16px rgba(0,164,219,.35),0 0 28px rgba(0,164,219,.25)}
    @keyframes liquidGlass{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

    .toolbar .btn{color:var(--text)!important}
    .badge{color:var(--text)!important}

    details.diag.card{
      background:linear-gradient(270deg,rgba(0,164,219,.3),rgba(255,255,255,.08),rgba(0,164,219,.3));
      background-size:400% 400%;
      border:1px solid rgba(255,255,255,.2);
      backdrop-filter:blur(12px) saturate(180%);
      box-shadow:inset 0 0 12px rgba(0,164,219,.25),0 0 20px rgba(0,164,219,.15);
      animation:liquidGlass 8s ease-in-out infinite;
    }
  
    /* Теги камеры под подписью источника */
    .badge-title{font-size:12px;font-weight:500;}
    .badge-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;}
    .badge-tag{font-size:10px;padding:2px 6px;border-radius:999px;border:1px solid #1f2833;background:rgba(15,23,42,.9);}

/* 2026-05 polish: stable layout and quieter operational styling. */
.video-page{
  padding:24px 0 40px;
}

.video-page-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:0 0 18px;
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(18,24,33,.92),rgba(13,24,38,.82));
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

.video-page-head__eyebrow{
  display:inline-flex;
  width:max-content;
  margin-bottom:8px;
  padding:4px 9px;
  border-radius:999px;
  color:#ffd896;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  background:rgba(230,195,127,.12);
  border:1px solid rgba(230,195,127,.24);
}

.video-page-head h1{
  margin:0;
  font-size:clamp(26px,3vw,34px);
  line-height:1.15;
  letter-spacing:0;
}

.video-page-head p{
  margin:8px 0 0;
  max-width:780px;
  color:var(--muted);
}

.video-page-head__status{
  min-width:230px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(16,24,36,.72);
  border:1px solid rgba(104,176,255,.22);
}

.video-page-head__status strong,
.video-page-head__status small{
  display:block;
}

.video-page-head__status small{
  color:var(--muted);
  font-size:12px;
}

body.kxm-tiles .video-page .card{
  animation:none;
  translate:0 0;
}

body.kxm-tiles .video-page .card:hover{
  transform:none;
  border-color:var(--brand, #ff8c00);
  box-shadow:
    inset 0 0 24px rgba(255,140,0,.50),
    0 12px 36px rgba(255,140,0,.45),
    0 8px 28px rgba(0,164,219,.35);
}

.selectors{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.video-player-card{
  border-radius:12px;
}

.wrap{
  aspect-ratio:16/9;
  min-height:320px;
  touch-action:pan-y;
  overscroll-behavior:auto;
}

.wrap.is-ptz{
  touch-action:none;
  overscroll-behavior:contain;
}

.wrap:not(.is-ptz),
.wrap:not(.is-ptz) video{
  touch-action:pan-y;
}

.wrap.is-ptz video{
  touch-action:none;
}

.wrap.is-view-zoomed,
.wrap.is-view-zoomed video{
  touch-action:none;
  cursor:grab;
}

.hint{
  max-width:min(720px,calc(100% - 20px));
  line-height:1.4;
}

.player-state{
  white-space:nowrap;
}

.compass{
  display:none;
}

.toolbar .btn{
  min-width:132px;
  text-align:center;
}

.toolbar{
  align-items:center;
}

.video-action-btn{
  gap:8px;
  min-height:42px;
  color:#f8fbff!important;
  background:linear-gradient(135deg,rgba(12,34,67,.78),rgba(20,91,153,.58));
  border-color:rgba(104,176,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px rgba(0,0,0,.22);
}

.video-action-btn:hover{
  border-color:rgba(255,196,120,.72);
  box-shadow:inset 0 0 16px rgba(255,255,255,.08),0 0 22px rgba(255,176,32,.25);
}

.video-action-btn.btn-primary{
  color:#07111f!important;
  background:linear-gradient(135deg,#ffd978,#ffad2f);
  border-color:rgba(255,226,150,.96);
  box-shadow:0 0 24px rgba(255,176,32,.42),0 10px 24px rgba(0,0,0,.28);
}

.btn-icon{
  flex:0 0 20px;
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-icon svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.btn-icon svg path,
.btn-icon svg circle,
.btn-icon svg polygon{
  vector-effect:non-scaling-stroke;
}

.btn-label{
  min-width:0;
}

.info-hints{
  border-radius:12px;
}

.info-hints-title{
  letter-spacing:0;
}

.info-hints-item{
  border-radius:10px;
  background:rgba(255,255,255,.055);
}

.video-net-info span{
  border-radius:999px;
}

.icon-online::before,
.icon-diag::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:999px;
  background:#68b0ff;
  box-shadow:0 0 0 4px rgba(104,176,255,.14);
}

.btn-analytics{
  animation:none;
  background:rgba(255,255,255,.08);
  box-shadow:none;
}

@media(max-width:980px){
  .video-page-head{
    grid-template-columns:1fr;
  }

  .video-page-head__status{
    min-width:0;
  }

  .info-hints-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .video-page{
    padding-top:16px;
  }

  .video-page-head{
    padding:16px;
  }

  .video-player-card{
    padding:10px;
  }

  .selectors{
    gap:8px;
  }

  .selectors label{
    font-size:11px;
  }

  .selectors .input,
  .selectors select{
    min-height:38px;
    font-size:13px;
  }

  .wrap{
    aspect-ratio:auto;
    min-height:min(64vh,460px);
    height:min(64vh,460px);
  }

  .ptz-pad{
    right:8px;
    bottom:8px;
    padding:8px;
    gap:7px;
    border-radius:14px;
  }

  .ptz-grid{
    grid-template-columns:38px 38px 38px;
    gap:7px;
  }

  .ptz-btn{
    width:38px;
    height:38px;
    border-radius:10px;
    font-size:16px;
  }

  .ptz-zoom{
    gap:7px;
    margin-left:7px;
  }

  .hint{
    display:none;
  }

  .toolbar{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    justify-content:stretch;
  }

  .toolbar .btn{
    flex:none;
    min-width:0;
    min-height:40px;
    padding:8px 6px;
    font-size:12px;
    line-height:1.1;
  }

  .video-action-btn{
    gap:5px;
  }

  .btn-icon{
    flex-basis:17px;
    width:17px;
    height:17px;
  }

  .btn-icon svg{
    width:17px;
    height:17px;
  }

  .info-hints-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:420px){
  .video-page{
    padding-left:10px;
    padding-right:10px;
  }

  .wrap{
    min-height:min(68vh,500px);
    height:min(68vh,500px);
  }

  .ptz-grid{
    grid-template-columns:36px 36px 36px;
  }

  .ptz-btn{
    width:36px;
    height:36px;
  }

  .sliders{
    gap:8px;
    margin-top:10px!important;
  }

  .sliders label{
    width:100%;
    font-size:11px;
  }

  .toolbar .btn{
    min-height:38px;
    padding:7px 4px;
    font-size:11px;
  }
}

/* 2026-05-15: compact video page without the extra top intro block. */
.video-page{
  padding-top:24px;
}

.video-section-title,
.info-hints-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:0;
}

h3.video-section-title{
  font-size:20px;
  line-height:1.2;
  margin:12px 12px 0;
}

.video-section-icon{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:#fff;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.38),transparent 58%),
    linear-gradient(135deg,rgba(255,176,32,.95),rgba(23,108,196,.84));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 18px rgba(255,176,32,.25),
    0 8px 18px rgba(0,0,0,.28);
}

.video-section-icon::before{
  display:block;
  line-height:1;
  font-size:17px;
}

.video-section-icon--info::before{content:"💡";}
.video-section-icon--online::before{content:"👥";}
.video-section-icon--diag::before{content:"⚙";}
.video-section-icon--analytics::before{content:"📊";font-size:14px;}

.info-hints{
  padding:16px;
}

.info-hints-title{
  font-size:17px;
}

.info-hints-grid{
  gap:10px;
}

.info-hints-item{
  min-height:0;
  padding:12px;
}

.video-presence-card .kpis{
  gap:10px;
}

.video-presence-card .kpi{
  min-width:160px;
  color:#f8fbff;
  background:linear-gradient(135deg,rgba(10,18,40,.86),rgba(19,43,83,.72));
  border-color:rgba(104,176,255,.22);
}

.presence-item{
  gap:12px;
  background:linear-gradient(135deg,rgba(10,18,40,.88),rgba(17,38,75,.70));
  border-color:rgba(104,176,255,.18);
}

.presence-item .left::before{
  content:"👤";
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(104,176,255,.16);
  border:1px solid rgba(104,176,255,.24);
  box-shadow:0 0 14px rgba(104,176,255,.18);
}

details.diag.card > summary{
  padding:14px 16px;
}

details.diag.card > summary > span:nth-child(2){
  font-size:17px;
  font-weight:800;
}

.btn-analytics{
  margin-left:4px;
}

.btn-analytics .video-section-icon{
  flex-basis:24px;
  width:24px;
  height:24px;
  border-radius:9px;
  box-shadow:none;
}

@media(max-width:720px){
  .video-page{
    padding-top:16px;
  }

  h3.video-section-title{
    font-size:18px;
  }

  details.diag.card > summary{
    flex-wrap:wrap;
  }

  .btn-analytics{
    margin-left:0;
  }
}

/* 2026-05-17: professional operator panels under the video player. */
.video-ops-panel{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  border-color:rgba(104,176,255,.24)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(104,176,255,.18),transparent 34%),
    linear-gradient(135deg,rgba(24,56,103,.86),rgba(10,32,68,.92))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 38px rgba(0,0,0,.24);
  transform:none!important;
  animation:none!important;
  will-change:auto;
}

.video-ops-panel:hover,
.video-ops-panel:focus-within{
  transform:none!important;
  border-color:rgba(255,176,32,.78)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(255,176,32,.34),
    0 0 30px rgba(255,176,32,.28),
    0 18px 44px rgba(0,0,0,.30);
}

.info-hints-head,
.presence-head,
details.diag.card > summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.info-hints-head{
  margin-bottom:2px;
}

.info-hints-title,
.presence-head .video-section-title{
  margin:0;
}

.info-hints-subtitle,
.presence-subtitle,
.diag-title small{
  display:block;
  margin:7px 0 0;
  color:rgba(226,238,255,.76);
  font-size:13px;
  line-height:1.45;
}

.info-hints-status,
.presence-live-badge,
.diag-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  color:#ffe2a8;
  font-size:12px;
  font-weight:800;
  background:rgba(255,176,32,.12);
  border:1px solid rgba(255,176,32,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.info-hints-status{
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:260px;
}

.info-hints-status span{
  display:inline-flex;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}

.info-hints-grid{
  gap:12px;
}

.info-hints-item{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:12px;
  align-items:flex-start;
  min-height:104px;
  padding:13px;
  background:
    linear-gradient(135deg,rgba(11,22,47,.76),rgba(30,83,139,.52));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.14);
  transform:none!important;
}

.info-hints-item:hover{
  transform:none!important;
  border-color:rgba(255,176,32,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 20px rgba(255,176,32,.14);
}

.info-hints-item b{
  display:block;
  margin-bottom:4px;
  line-height:1.25;
}

.info-hints-item span:not(.info-card-icon){
  color:rgba(234,244,255,.80);
}

.info-card-icon{
  width:46px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:#fff1cc;
  font-size:10px;
  font-weight:900;
  letter-spacing:0;
  background:
    radial-gradient(circle at 35% 18%,rgba(255,255,255,.28),transparent 58%),
    linear-gradient(135deg,rgba(255,176,32,.86),rgba(36,113,210,.78));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 8px 20px rgba(0,0,0,.22),0 0 16px rgba(255,176,32,.18);
}

.video-net-info{
  margin-top:4px;
  padding-top:12px;
}

.presence-head{
  padding:16px 16px 0;
}

.presence-head h3.video-section-title{
  margin:0;
}

.video-presence-card .presence{
  padding:14px 16px 16px!important;
}

.video-presence-card .kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.video-presence-card .presence-kpi{
  min-width:0;
  padding:13px 14px;
  background:
    linear-gradient(135deg,rgba(10,18,40,.88),rgba(23,55,104,.78));
  border:1px solid rgba(104,176,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.presence-kpi span,
.presence-kpi small{
  display:block;
}

.presence-kpi span{
  color:rgba(226,238,255,.72);
  font-size:12px;
  font-weight:800;
}

.presence-kpi b{
  display:block;
  margin:6px 0 4px;
  color:#fff;
  font-size:24px;
  line-height:1;
}

.presence-kpi small{
  color:rgba(226,238,255,.62);
  font-size:11px;
}

.presence-kpi-current b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  line-height:1.25;
}

.presence-list{
  gap:10px;
}

.presence-item{
  padding:11px 12px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(10,18,40,.90),rgba(18,43,85,.74));
  border-color:rgba(104,176,255,.22);
  transform:none!important;
}

.presence-item:hover{
  transform:none!important;
  border-color:rgba(255,176,32,.42);
  box-shadow:0 0 18px rgba(255,176,32,.14);
}

.presence-item .left{
  min-width:0;
  flex-wrap:wrap;
}

.presence-item .right{
  text-align:right;
  white-space:nowrap;
}

.presence-empty{
  padding:14px;
  border-radius:12px;
  color:rgba(226,238,255,.72);
  background:rgba(10,18,40,.54);
  border:1px dashed rgba(104,176,255,.28);
}

details.diag.card > summary{
  align-items:center;
  padding:15px 16px;
}

.diag-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.diag-title b{
  display:block;
  color:#fff;
  font-size:17px;
  line-height:1.15;
}

.diag-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-left:auto;
  font-size:12px;
  font-weight:700;
}

.sliders label{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

#pillSpd,
#pillStep{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 8px;
  border-radius:999px;
  color:#ffe2a8;
  font-size:12px;
  font-weight:800;
  background:rgba(255,176,32,.12);
  border:1px solid rgba(255,176,32,.30);
}

.diag-note{
  margin:0 0 10px;
  padding:10px 12px;
  border-radius:12px;
  color:rgba(226,238,255,.74);
  background:rgba(10,18,40,.50);
  border:1px solid rgba(104,176,255,.18);
  font-size:13px;
}

details.diag.card > .body{
  border-top-color:rgba(255,255,255,.12);
}

.log{
  border-radius:12px;
  padding:12px;
  background:rgba(4,10,22,.70);
  border:1px solid rgba(104,176,255,.16);
}

@media(max-width:980px){
  .video-presence-card .kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .presence-kpi-current{
    grid-column:1/-1;
  }
}

@media(max-width:720px){
  .info-hints-head,
  .presence-head,
  details.diag.card > summary{
    display:grid;
    grid-template-columns:1fr;
  }

  .info-hints-status,
  .presence-live-badge,
  .diag-tools{
    justify-content:flex-start;
    max-width:100%;
  }

  .info-hints-grid,
  .video-presence-card .kpis{
    grid-template-columns:1fr;
  }

  .info-hints-item{
    grid-template-columns:42px minmax(0,1fr);
    min-height:0;
  }

  .info-card-icon{
    width:42px;
  }

  .presence-kpi-current{
    grid-column:auto;
  }

  .presence-item{
    display:grid;
    gap:8px;
  }

  .presence-item .right{
    text-align:left;
    white-space:normal;
  }
}

/* 2026-05-17: refined information panel for ordinary users. */
.info-hints.video-ops-panel{
  padding:18px;
  background:
    radial-gradient(circle at 9% 0%,rgba(255,211,125,.14),transparent 28%),
    radial-gradient(circle at 88% 10%,rgba(104,176,255,.18),transparent 34%),
    linear-gradient(135deg,rgba(24,54,102,.88),rgba(9,26,61,.94))!important;
}

.info-hints.video-ops-panel::after{
  content:"";
  position:absolute;
  inset:auto -80px -120px auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(104,176,255,.16),transparent 70%);
  pointer-events:none;
}

.info-hints .info-hints-head{
  position:relative;
  z-index:1;
  align-items:center;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(226,238,255,.12);
}

.info-hints .info-hints-title{
  font-size:21px;
  line-height:1.15;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

.info-hints .info-hints-subtitle{
  max-width:760px;
  color:rgba(232,243,255,.78);
}

.info-hints .info-hints-status{
  max-width:none;
  padding:6px;
  gap:6px;
  background:rgba(8,18,42,.42);
  border-color:rgba(255,211,125,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.14);
}

.info-hints .info-hints-status span{
  padding:4px 10px;
  color:#fff0c9;
  background:linear-gradient(180deg,rgba(255,211,125,.18),rgba(255,255,255,.06));
  border:1px solid rgba(255,211,125,.20);
}

.info-hints .info-hints-grid{
  position:relative;
  z-index:1;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:12px;
}

.info-hints .info-hints-item{
  min-height:112px;
  padding:14px;
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 10%,rgba(255,211,125,.13),transparent 36%),
    linear-gradient(135deg,rgba(12,30,72,.82),rgba(27,72,135,.58));
  border-color:rgba(139,197,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.15);
}

.info-hints .info-hints-item:hover{
  border-color:rgba(255,211,125,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(255,211,125,.12),0 0 22px rgba(255,176,32,.16),0 12px 28px rgba(0,0,0,.18);
}

.info-hints .info-hints-item b{
  margin-bottom:6px;
  color:#fff;
  font-size:14px;
}

.info-hints .info-hints-item span:not(.info-card-icon){
  color:rgba(236,246,255,.82);
  line-height:1.48;
}

.info-hints .info-card-icon{
  width:46px;
  height:46px;
  border-radius:15px;
  color:#fff4cf;
  background:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,.34),transparent 56%),
    linear-gradient(135deg,rgba(255,199,82,.92),rgba(50,132,226,.82));
  box-shadow:0 10px 22px rgba(0,0,0,.22),0 0 18px rgba(255,176,32,.20);
}

.info-card-icon svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.info-kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin:0 2px;
  border-radius:7px;
  color:#fff6d9;
  font:800 12px/1 ui-sans-serif,system-ui,sans-serif;
  background:rgba(6,14,34,.55);
  border:1px solid rgba(255,211,125,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.info-hints .video-net-info{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin-top:14px;
  padding:12px 14px;
  border-top:0;
  border-radius:14px;
  background:rgba(6,16,38,.48);
  border:1px solid rgba(139,197,255,.16);
}

.video-net-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.info-hints .video-net-info span{
  min-height:26px;
  padding:5px 10px;
  color:#eef7ff;
  font-size:12px;
  font-weight:800;
  background:rgba(9,22,52,.78);
  border-color:rgba(139,197,255,.22);
}

.info-hints .video-net-info small{
  color:rgba(226,238,255,.72);
  line-height:1.45;
}

@media(max-width:980px){
  .info-hints .info-hints-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .info-hints .info-hints-head{
    align-items:flex-start;
  }

  .info-hints .info-hints-grid{
    grid-template-columns:1fr;
  }

  .info-hints .info-hints-item{
    grid-template-columns:42px minmax(0,1fr);
    min-height:0;
  }

  .info-hints .info-card-icon{
    width:42px;
    height:42px;
  }

  .info-hints .video-net-info{
    grid-template-columns:1fr;
  }
}