.steam-status-wrap{ margin:32px 0 28px; position:relative; }
.ss-help{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#c9ccd0; font-size:10.5px; font-weight:700; line-height:1; cursor:pointer; padding:0; vertical-align:middle; margin-left:7px; position:relative; top:-1px; }
.ss-help:hover{ color:#fff; border-color:#3987e5; }
.ss-pop{ position:absolute; z-index:30; width:320px; max-width:calc(100vw - 40px);
  background:rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:12px 14px; font-size:12.5px; line-height:1.5; color:#c9ccd0;
  box-shadow:0 12px 30px rgba(0,0,0,.55); display:none; }
.ss-pop.show{ display:block; }
.ss-pop::before{ content:""; position:absolute; top:-6px; left:var(--ax,20px); width:10px; height:10px; background:rgba(0,0,0,.85);
  border-left:1px solid rgba(255,255,255,.14); border-top:1px solid rgba(255,255,255,.14); transform:rotate(45deg); }
.ss-pop a{ color:#fff; text-decoration:underline; }
.ss-pop a:hover{ color:#fff; text-decoration:underline; }
.steam-status{ display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:14px; text-align:left; margin:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:#e0e0e0; }
/* заливка фона + тон контура в цвет состояния (двойной класс, чтобы перебить базовый фон/рамку); % по состоянию: зеленый 22, оранжевый 12, красный 6; контур масштабируется как в мокапе (22->.45 / 12->.28 / 6->.16) */
.steam-status.steam-status--ok{ background:rgba(40,167,69,.22); border-color:rgba(40,167,69,.45); }
.steam-status.steam-status--degraded{ background:rgba(255,193,7,.12); border-color:rgba(255,193,7,.28); }
.steam-status.steam-status--outage{ background:rgba(220,53,69,.06); border-color:rgba(220,53,69,.16); }
.steam-status__ic{ flex:0 0 auto; width:34px; height:34px; margin:0 8px; display:grid; place-items:center; color:#28a745; }
.steam-status__ic svg{ width:32px; height:32px; display:block; fill:currentColor; }
.steam-status--degraded .steam-status__ic{ color:#ffc107; }
.steam-status--outage .steam-status__ic{ color:#dc3545; }
.steam-status--ok .steam-status__ic{ color:#40d16b; animation:steamStatusPulse 2s ease-in-out infinite; }
@keyframes steamStatusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.steam-status__main{ flex:1 1 auto; min-width:0; }
.steam-status__title{ font-weight:700; font-size:17px; line-height:1.3; letter-spacing:1px; }
.steam-status__sub{ font-size:13.5px; opacity:.78; margin-top:3px; line-height:1.5; }
@media (max-width:575.98px){
  .steam-status-wrap{ margin:48px 0 22px; }
  .steam-status{ padding:14px 15px; gap:12px; }
  .steam-status__ic{ width:28px; height:28px; }
  .steam-status__ic svg{ width:26px; height:26px; }
  .steam-status__title{ font-size:15.5px; }
  .steam-status__sub{ font-size:12.5px; } }

.kf-wrap{ margin:8px 0 30px; color:#e0e0e0; position:relative; }
.kf-grid{ display:flex; gap:14px; align-items:stretch; }
.kf-help{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#c9ccd0; font-size:10.5px; font-weight:700; line-height:1; cursor:pointer; padding:0; vertical-align:middle; position:relative; top:-2px; }
.kf-help:hover{ color:#fff; border-color:#3987e5; }
.kf-pop{ position:absolute; z-index:30; width:300px; max-width:calc(100vw - 40px); background:rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:12px 14px; font-size:12.5px; line-height:1.5; color:#c9ccd0; box-shadow:0 12px 30px rgba(0,0,0,.55); display:none; }
.kf-pop b{ color:#eee; font-weight:700; }
.kf-pop.show{ display:block; }
.kf-pop::before{ content:""; position:absolute; top:-6px; left:var(--ax,20px); width:10px; height:10px; background:rgba(0,0,0,.85);
  border-left:1px solid rgba(255,255,255,.14); border-top:1px solid rgba(255,255,255,.14); transform:rotate(45deg); }
.kf-chart{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  border-radius:16px; padding:10px 0 4px; overflow:hidden; }
.kf-charttitle{ font-size:20px; font-weight:700; opacity:.9; margin:0 14px 9px; text-align:center; }
/* фото ключа как иконка: кроп по bbox ключа в key_image.png (707x353, ключ ~x205..500 y85..290);
   размеры в em — на мобиле (заголовок 16px) масштабируется сам */
.kf-charttitle__key{ display:inline-block; width:1.44em; height:1em; overflow:hidden; vertical-align:-0.24em; margin-right:.4em; }
.kf-charttitle__key img{ width:3.45em; height:auto; max-width:none; margin:-.41em 0 0 -1em; display:block; } /* max-width:none: глобальный style.css img{max-width:100%} сжимал кроп в ноль */
.kf-chartsvg{ flex:1 1 auto; min-width:0; min-height:200px; cursor:crosshair; }
.kf-chartsvg svg{ display:block; }
.kf-stats{ flex:0 0 320px; display:flex; flex-direction:column; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:16px; }
.kf-stat{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  text-align:center; padding:14px; }
.kf-stat + .kf-stat{ border-top:1px solid rgba(255,255,255,.08); }
.kf-stat__lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:rgba(224,224,224,.55); }
.kf-pill__conf{ display:flex; align-items:center; justify-content:center; gap:11px; }
.kf-pill__word{ font-size:21px; font-weight:800; line-height:1.1; }
.kf-pill__meter{ display:inline-flex; gap:4px; }
.kf-pill__meter i{ width:14px; height:8px; border-radius:3px; background:rgba(255,255,255,.12); }
.kf-pill__meter i.on{ background:#28a745; }
.kf-pill__dir{ display:flex; align-items:center; justify-content:center; gap:9px; font-size:21px; font-weight:800; }
.kf-pill__tri{ font-size:23px; line-height:1; }
.kf-up{ color:#28a745; } .kf-down{ color:#dc3545; } .kf-flat{ color:#9aa0a6; }
.kf-flatmsg{ font-size:15px; font-weight:600; color:#9aa0a6; line-height:1.4; }
.kf-made{ font-size:11px; font-weight:400; color:rgba(224,224,224,.42); line-height:1.35; margin-top:1px; }
.kf-made:empty{ display:none; }
.kf-tip{ position:fixed; pointer-events:none; background:#1e1e1e; border:1px solid rgba(255,255,255,.14);
  border-radius:8px; padding:6px 9px; font-size:12px; color:#e0e0e0; box-shadow:0 4px 14px rgba(0,0,0,.45);
  display:none; z-index:99; white-space:nowrap; }
.kf-tip b{ font-weight:700; }
@media (max-width:575.98px){
  .kf-grid{ flex-direction:column; }
  /* график сверху, показатели единой таблеткой снизу (прогноз | уверенность в ряд) */
  .kf-stats{ flex:0 0 auto; flex-direction:row; gap:0; overflow:hidden;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:16px; }
  .kf-stat{ padding:11px 6px; gap:6px; }
  .kf-stat + .kf-stat{ border-top:none; border-left:1px solid rgba(255,255,255,.08); }
  .kf-stat__lbl{ font-size:9px; letter-spacing:.02em; }
  .kf-charttitle{ font-size:16px; }
  .kf-pill__conf{ flex-direction:column; gap:6px; }
  .kf-pill__word{ font-size:15px; } .kf-pill__dir{ font-size:15px; gap:6px; }
  .kf-pill__tri{ font-size:16px; } .kf-pill__meter i{ width:11px; height:7px; }
  .kf-made{ font-size:8.5px; line-height:1.3; }
}