/**
 * Оптимизированные стили главной страницы с минимальным использованием !important
 * Версия 2.1 - Исправлено горизонтальное отображение Kill Chain pipeline
 */

/* ============================================
   СИСТЕМА ПЕРЕМЕННЫХ И БАЗОВЫЕ СТИЛИ
   ============================================ */

/* Алиасы для совместимости с палитрой SEBERD */
html:has(#sbrd),
body:has(#sbrd),
#sbrd {
    --text-main: var(--text);
    --bg-body: var(--bg);
    --bg-widget: var(--bg-card);
    --bg-hover: var(--bg-card-h);
    --bg-active: var(--bg-card-alt, var(--bg-card-h));
    --border-hover: var(--accent);
    
    /* Дополнительные переменные для системы очков */
    --score-bad: var(--text-muted);
    --score-medium: var(--text-sec);
    --score-good: var(--text-main);
    --score-excellent: var(--accent);
    
    /* Анимации */
    --transition-base: 0.2s ease;
    --transition-long: 0.4s ease;
}

/* Wazuh-like визуал (только оформление, без реального SIEM) */
#sbrd.sbrd-dash--wazuh {
    --accent: #00b4d8;
    --accent-s: rgba(0, 180, 216, 0.28);
    --text-main: #e8eaed;
    --text-sec: #bdc1c6;
    --text-muted: #8a9199;
    --border: #2d333b;
    --bg-body: #111217;
    --bg-widget: #161b22;
    --bg-surface: #1c2128;
    --bg-card-h: #22272e;
    --bg-hover: #21262d;
    --bg-input: #0d1117;
    --bg-code: #21262d;
}

#sbrd.sbrd-dash--wazuh .live-dot {
    background: var(--accent);
}

#sbrd.sbrd-dash--wazuh .gf-bar {
    background: linear-gradient(180deg, var(--accent), #0096c7);
    opacity: 0.75;
}

#sbrd.sbrd-dash--wazuh .gf-val {
    color: #7dd3fc;
}

#sbrd.sbrd-dash--wazuh .siem-ip-cell {
    width: 7.5rem;
    max-width: 38%;
}

/* Сброс отступов для дашборда */
html:has(#sbrd),
body:has(#sbrd) {
    overflow: hidden;
    height: 100dvh;
    background: var(--bg-body);
    color: var(--text-main);
}

.site-content:has(#sbrd),
.site-content:has(#sbrd) .content-area,
.site-main:has(#sbrd) .inside-article,
.site-main:has(#sbrd) .grid-container,
.site-main:has(#sbrd) article {
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    background: transparent;
}

.site-main:has(#sbrd) .inside-article > .entry-header,
.site-main:has(#sbrd) .inside-article > .entry-content,
.site-main:has(#sbrd) .inside-article > .page-header {
    display: none;
}

body:has(#sbrd) .site-footer,
body:has(#sbrd) .site-info {
    display: none;
}

/* ============================================
   СТРУКТУРА СЕТКИ ДАШБОРДА
   ============================================ */
#sbrd {
    --hdr: 58px;
    position: fixed;
    top: var(--hdr);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: minmax(420px, 1.45fr) minmax(320px, 1fr) minmax(240px, 0.9fr);
    grid-template-rows: minmax(260px, 1fr) minmax(108px, auto) minmax(180px, auto) minmax(160px, auto);
    grid-template-areas: 
        "C N R"
        "S S S"
        "B B B"
        "K K K";
    gap: 5px;
    padding: 5px;
    box-sizing: border-box;
    overflow: auto;
    background: var(--bg-body);
}

/* Кнопка переключения плотности */
.dash-density-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-widget);
    color: var(--text-sec);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all var(--transition-base);
}

.dash-density-toggle:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
}

/* Компактный режим */
#sbrd[data-density="compact"] .wh {
    padding: 4px 7px;
}

#sbrd[data-density="compact"] .wt {
    font-size: 9px;
}

#sbrd[data-density="compact"] .wm {
    font-size: 8px;
}

#sbrd[data-density="compact"] .cve-row,
#sbrd[data-density="compact"] .bdu-row,
#sbrd[data-density="compact"] .mt-row {
    padding: 4px 8px;
}

#sbrd[data-density="compact"] .kc-seg {
    height: 34px;
    font-size: 9px;
}

#sbrd[data-density="compact"] .bf-disp {
    font-size: 16px;
}

/* ============================================
   СТРУКТУРА КОЛОНОК
   ============================================ */
.col-c,
.col-n,
.col-r,
.col-b,
.col-kc {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    overflow: hidden;
}

.col-n {
    grid-area: N;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    min-height: 0;
    overflow: hidden;
}

.col-n > .w {
    height: 100%;
}

.col-r {
    grid-area: R;
}

.col-b {
    grid-area: B;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    min-height: 0;
    overflow: hidden;
}

.col-soc {
    grid-area: S;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    min-height: 0;
    overflow: hidden;
}

.col-soc .w {
    min-height: 0;
}

.col-kc {
    grid-area: K;
    min-width: 0;
}

.col-kc .w {
    width: 100%;
    min-height: 140px;
    max-height: 200px;
}

/* ============================================
   БАЗОВЫЙ ВИДЖЕТ
   ============================================ */
.w {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-widget);
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: all var(--transition-base);
}

.w:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px var(--accent-s);
}

/* Заголовок виджета */
.wh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}

.wt {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-main);
}

.wm {
    font-size: 9px;
    color: var(--text-muted);
    font-family: monospace;
}

/* Тело виджета */
.wb {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Пропорции виджетов */
.w-flex {
    flex: 1 1 0;
}

.w-mitre {
    flex: 2.8;
}

.w-graf {
    flex: 1.6;
}

.w-threats .wb {
    overflow: hidden;
}

/* ============================================
   ТЕРМИНАЛ - УЛУЧШЕННАЯ ВЕРСИЯ
   ============================================ */
.term-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 11px 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.term-out {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-sec);
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
    scroll-behavior: smooth;
}

/* Элементы вывода терминала */
.tl {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Классы подсветки терминала */
.tok {
    color: var(--text-main);
    font-weight: 700;
}

.twn {
    color: var(--text-sec);
    font-style: italic;
}

.ter {
    color: var(--text-main);
    text-decoration: underline;
    font-weight: 700;
}

.tdm {
    color: var(--text-muted);
}

.tid {
    color: var(--text-main);
    font-weight: 800;
}

.tl-out {
    color: var(--text-sec);
}

/* Анимация курсора */
.term-cursor {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 1.1em;
    background: var(--text-main);
    opacity: .9;
    vertical-align: text-bottom;
    animation: term-blink 1s step-end infinite;
}

@keyframes term-blink {
    50% {
        opacity: 0;
    }
}

/* Улучшенная подсветка для наблюдателя */
.tl-observer {
    font-style: italic;
    opacity: 0.8;
    animation: observer-pulse 3s ease-in-out infinite;
}

@keyframes observer-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* ============================================
   СИСТЕМА ОЧКОВ И ВИЗУАЛЬНАЯ ОБРАТНАЯ СВЯЗЬ
   ============================================ */

/* Анимации для системы очков */
@keyframes score-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes score-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-2px);
    }
    75% {
        transform: translateX(2px);
    }
}

@keyframes score-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Индикаторы силы пароля */
.psw-score-animation {
    animation: score-pulse 0.3s ease;
}

.psw-bar-animation {
    animation: score-pulse 0.5s ease;
}

/* Цветовая градация для пароля */
.psw-score-low {
    color: var(--score-bad);
}

.psw-score-medium {
    color: var(--score-medium);
}

.psw-score-good {
    color: var(--score-good);
}

.psw-score-excellent {
    color: var(--score-excellent);
    animation: score-pulse 2s infinite;
}

/* Индикатор прогресса брутфорса с анимацией */
.bf-fill-animating {
    animation: score-pulse 0.5s infinite;
}

.bf-success {
    animation: score-bounce 0.3s ease;
    color: var(--score-excellent);
}

/* Уведомления для системы очков */
.score-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-widget);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    animation: slide-up 0.3s ease, fade-out 0.3s ease 2.7s forwards;
}

@keyframes slide-up {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
}

/* ============================================
   CVE И УГРОЗЫ
   ============================================ */
.cve-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
}

.cve-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    cursor: default;
    transition: background var(--transition-base);
}

.cve-row:hover {
    background: var(--bg-hover);
}

.cve-id {
    font-family: monospace;
    font-size: 10px;
    color: var(--text-main);
    flex-shrink: 0;
    font-weight: 700;
}

/* Классы важности CVE через стиль */
.cve-sev {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.sc {
    background: var(--bg-active);
    color: var(--text-main);
    border-color: var(--text-main);
}

.sh {
    background: var(--bg-surface);
    color: var(--text-main);
    border-color: var(--text-sec);
}

.sm {
    background: transparent;
    color: var(--text-sec);
    border-color: var(--border);
}

.sl {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.cve-desc {
    font-size: 10px;
    color: var(--text-sec);
    flex: 1;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* БДУ тикер */
.bdu-inner {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bdu-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-base);
}

.bdu-row:hover {
    background: var(--bg-hover);
}

.btag {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    color: var(--text-main);
    background: var(--bg-surface);
}

.btag.bt-v {
    background: var(--bg-surface);
}

.btag.bt-t {
    background: var(--bg-code);
}

.btag.bt-d {
    background: var(--bg-input);
}

.btag.bt-i {
    background: var(--bg-card-alt);
}

.bname {
    flex: 1;
    color: var(--text-sec);
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

/* Индикатор live */
.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-main);
    animation: blink 1.4s infinite;
    vertical-align: middle;
    margin-right: 3px;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* ============================================
   SIEM СОБЫТИЯ
   ============================================ */
.siem-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.siem-row {
    display: flex;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    align-items: baseline;
    flex-shrink: 1;
}

.siem-ts {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 9px;
    flex-shrink: 0;
}

.siem-lvl {
    font-size: 8px;
    font-weight: 700;
    width: 30px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    text-align: center;
    padding: 1px 0;
}

.siem-msg {
    color: var(--text-sec);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Уровни важности SIEM */
.li {
    color: var(--text-sec);
}

.lw {
    color: var(--text-main);
    font-weight: 700;
}

.le {
    color: var(--text-main);
    text-decoration: underline;
}

.lc {
    color: var(--text-main);
    font-weight: 800;
    background: var(--bg-active);
}

/* ============================================
   MITRE ATT&CK
   ============================================ */
.mt-inner {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    flex-shrink: 0;
}

.mt-row:last-child {
    border-bottom: none;
}

.mt-tid {
    font-family: monospace;
    font-size: 9px;
    color: var(--text-main);
    flex-shrink: 0;
    width: 48px;
    font-weight: 700;
}

.mt-tac {
    font-size: 8px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 68px;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mt-desc {
    font-size: 10px;
    flex: 1;
    color: var(--text-sec);
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mt-crit {
    color: var(--text-main);
    font-weight: 700;
    text-decoration: underline;
}

.mt-warn {
       color: var(--text-sec);
}

/* ============================================
   KILL CHAIN — НОВАЯ ВЕРСИЯ (pipeline)
   ============================================ */
.kc-wrap {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    min-height: 0;
}

/* Горизонтальный pipeline — 7 равных колонок через grid */
.kc-pipeline {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100%;
    flex-shrink: 0;
    gap: 0;
}

.kc-seg {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px 6px 12px;
    height: 44px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-right: none;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

.kc-seg:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 8px;
}

.kc-seg-last {
    border-right: 1px solid var(--border);
    border-radius: 0 3px 3px 0;
    clip-path: none;
    padding-right: 8px;
}

.kc-num {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 800;
    line-height: 1;
    font-family: monospace;
}

.kc-lbl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.kc-seg:hover {
    background: var(--bg-active);
}
.kc-seg:hover .kc-lbl,
.kc-seg:hover .kc-num {
    color: var(--text-sec);
}

.kc-seg.done {
    background: var(--bg-active);
}
.kc-seg.done .kc-lbl,
.kc-seg.done .kc-num {
    color: var(--text-sec);
}

.kc-seg.active {
    background: var(--bg-card-h);
    border-color: var(--accent);
    border-right: none;
}
.kc-seg.active.kc-seg-last {
    border-right: 1px solid var(--accent);
}
.kc-seg.active .kc-lbl {
    color: var(--text-main);
}
.kc-seg.active .kc-num {
    color: var(--accent);
}

/* Инфопанель описания фазы */
.kc-info {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 4px 12px;
    padding: 8px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    min-height: 0;
    overflow: hidden;
    font-size: 10px;
}

.kc-info-left {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kc-info-phase {
    font-weight: 800;
    font-size: 11px;
    color: var(--text-main);
    white-space: nowrap;
}

.kc-info-tag {
    font-size: 8px;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-muted);
    background: var(--bg-code);
    white-space: nowrap;
}

.kc-info-body {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--text-sec);
    line-height: 1.5;
    align-self: start;
}

.kc-info-rows {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kc-info-row {
    display: flex;
    gap: 6px;
    font-size: 9px;
}

.kc-info-k {
    font-weight: 700;
    color: var(--text-main);
    flex-shrink: 0;
    width: 52px;
}

.kc-info-v {
    color: var(--text-muted);
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ============================================
   ПАРОЛЬ
   ============================================ */
.psw-panel {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.sbrd-psw-widget-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-main);
    font-family: monospace;
    font-size: 12px;
    padding: 6px 9px;
    outline: none;
    transition: border-color var(--transition-base);
}

.sbrd-psw-widget-input:focus {
    border-color: var(--text-muted);
}

.sbrd-psw-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sbrd-psw-bar-track {
    flex: 1;
    height: 5px;
    background: var(--bg-surface);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.sbrd-psw-bar-fill {
    height: 100%;
    width: 0;
    background: var(--text-muted);
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 3px;
}

.sbrd-psw-bar-score {
    font-family: monospace;
    font-size: 9px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 28px;
    text-align: right;
}

.sbrd-psw-result {
    font-size: 10px;
    color: var(--text-sec);
    min-height: 14px;
}

/* ============================================
   BRUTE FORCE
   ============================================ */
.bf-pad {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.bf-tgt {
    font-size: 10px;
    color: var(--text-muted);
}

.bf-target {
    font-family: monospace;
    font-weight: 700;
    color: var(--text-main);
}

.bf-disp {
    font-family: monospace;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: .12em;
    text-align: center;
    padding: 6px 0;
    word-break: break-all;
}

.bf-trk {
    height: 4px;
    background: var(--bg-surface);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.bf-fill {
    height: 100%;
    width: 0;
    background: var(--text-muted);
    transition: width 0.1s linear;
}

.bf-stats {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 3px 8px;
    font-size: 9px;
    color: var(--text-muted);
}

.bf-val {
    font-family: monospace;
    color: var(--text-sec);
}

.sbtn {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-sec);
    cursor: pointer;
    letter-spacing: .03em;
    transition: all var(--transition-base);
    text-transform: uppercase;
}

.sbtn:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
}

.bf-crk {
    font-size: 10px;
    font-family: monospace;
    color: var(--text-main);
    min-height: 14px;
    font-weight: 700;
}

/* ============================================
   URL CHECKER
   ============================================ */
.url-pad {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.url-row {
    display: flex;
    gap: 5px;
}

.url-in {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-main);
    font-family: monospace;
    font-size: 11px;
    padding: 5px 8px;
    outline: none;
    transition: border-color var(--transition-base);
}

.url-in:focus {
    border-color: var(--text-muted);
}

.url-btn {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-sec);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-base);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.url-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
}

.url-res {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    scrollbar-width: thin;
}

.url-chk {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding: 3px 0;
    font-size: 10px;
    border-bottom: 1px solid var(--border);
}

.u-ok { color: var(--text-sec); }
.u-wn { color: var(--text-main); font-style: italic; }
.u-bd { color: var(--text-main); font-weight: 700; }

.url-verd {
    margin-top: 4px;
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid var(--border);
}

.vd-ok { background: var(--bg-surface); color: var(--text-sec); }
.vd-wn { background: var(--bg-active); color: var(--text-main); }
.vd-bd { background: var(--bg-code); color: var(--text-main); border-color: var(--text-muted); }

/* ============================================
   HOST INTEL (SHODAN)
   ============================================ */
.sho-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    font-size: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.sho-loading {
    color: var(--text-muted);
    font-size: 10px;
    padding: 8px 0;
}

.sho-row {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}

.sho-ip {
    font-family: monospace;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
}

.sho-lbl {
    color: var(--text-muted);
    flex-shrink: 0;
    width: 68px;
    font-size: 9px;
}

.sho-val,
.sho-val-mono {
    color: var(--text-sec);
    flex: 1;
    word-break: break-all;
}

.sho-val-mono {
    font-family: monospace;
}

.sho-section-title {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 4px 0 2px;
}

.sho-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2px 0;
}

.sho-risk-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.sho-risk-track {
    flex: 1;
}

.sho-risk-progress {
    width: 100%;
    height: 4px;
    appearance: none;
    background: var(--bg-surface);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.sho-risk-progress::-webkit-progress-bar {
    background: var(--bg-surface);
}

.sho-risk-progress::-webkit-progress-value {
    background: var(--text-muted);
    border-radius: 2px;
}

.sho-risk-lbl {
    font-size: 8px;
    font-weight: 800;
    color: var(--text-main);
    width: 38px;
    text-align: right;
    flex-shrink: 0;
}

.sho-empty {
    color: var(--text-muted);
    font-size: 9px;
    padding: 4px 0;
}

.sho-ports {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex: 1;
}

.sho-port {
    font-family: monospace;
    font-size: 9px;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-sec);
    background: var(--bg-surface);
}

.sho-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex: 1;
}

.sho-tag {
    font-size: 8px;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-muted);
    background: var(--bg-surface);
}

.sho-tag-red {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
    color: var(--text-main);
    background: var(--bg-code);
    border: 1px solid var(--text-muted);
    font-weight: 700;
}

.sho-tag-green {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
    color: var(--text-sec);
    background: var(--bg-active);
    border: 1px solid var(--border);
}

.sho-vulns {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex: 1;
}

.sho-vuln {
    font-family: monospace;
    font-size: 8px;
    padding: 1px 4px;
    border: 1px solid var(--text-muted);
    border-radius: 2px;
    color: var(--text-main);
    background: var(--bg-code);
}

.sho-status {
    color: var(--text-muted);
    font-size: 10px;
}

.sho-val-local {
    font-family: monospace;
    color: var(--text-muted);
}

.sho-val-local-ready {
    color: var(--text-sec);
}

/* ============================================
   ФИД ЗАПИСЕЙ
   ============================================ */
.feed-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.feed-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-sec);
    font-size: 10px;
    transition: background var(--transition-base);
    flex-shrink: 0;
}

.feed-item:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

.feed-thumb {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    font-size: 14px;
}

.feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-title {
    display: block;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.feed-date {
    display: block;
    font-size: 8px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ============================================
   GRAFANA
   ============================================ */
.gf-body {
    flex: 1;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.gf-kpis {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.gf-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gf-val {
    font-family: monospace;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}

.gf-lbl {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.gf-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    min-height: 30px;
    padding-bottom: 2px;
}

.gf-bar {
    flex: 1;
    background: var(--text-muted);
    border-radius: 1px 1px 0 0;
    transition: height 0.5s ease;
    min-height: 4px;
    opacity: 0.5;
}

/* ============================================
   ТЕРМИНАЛ — СТРОКА ВВОДА
   ============================================ */
.term-inp-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    padding-top: 4px;
}

.term-prompt {
    font-family: monospace;
    font-size: 11px;
    flex-shrink: 0;
    color: var(--text-muted);
    white-space: nowrap;
}

.term-user {
    color: var(--text-sec);
    font-weight: 700;
}

/* #sbrd нужен для победы над глобальным input[type="text"] { background: #FAFAFA } в style.css */
#sbrd input[type="text"],
#sbrd input[type="password"],
#sbrd input[type="url"] {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

#sbrd input[type="text"]:-webkit-autofill,
#sbrd input[type="password"]:-webkit-autofill,
#sbrd input[type="url"]:-webkit-autofill {
    -webkit-text-fill-color: var(--text-main);
    box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    transition: background-color 99999s ease-out;
}

.term-input {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg-input) !important;
    border: none;
    outline: none;
    color: var(--text-main);
    font-family: monospace;
    font-size: 12px;
    /* Нативный карет скрыт — дублирует #term-cursor; текст должен оставаться видимым */
    caret-color: transparent;
    min-width: 0;
    border-radius: 3px;
    padding: 3px 8px;
    box-shadow: none !important;
    line-height: 1.45;
    min-height: 1.45em;
    opacity: 1;
    color-scheme: dark;
}

/* WebKit/Safari: без -webkit-text-fill-color текст в input иногда не рисуется на тёмном фоне */
#sbrd input#term-inp.term-input,
#sbrd input.term-input {
    color: var(--text-main) !important;
    -webkit-text-fill-color: var(--text-main) !important;
}

#sbrd input#term-inp.term-input {
    max-width: none;
}

#sbrd input#term-inp.term-input::placeholder {
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
    opacity: 1;
}

/* ============================================
   ТОЧКИ ТЕРМИНАЛА В ЗАГОЛОВКЕ
   ============================================ */
.t3dot {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-right: 6px;
}

.t3dot span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

.t3dot span:nth-child(1) { background: #ff5f57; }
.t3dot span:nth-child(2) { background: #febc2e; }
.t3dot span:nth-child(3) { background: #28c840; }

/* ============================================
   УРОВНИ SIEM (в другом разделе)
   ============================================ */
.siem-lvl-cell {
    font-size: 8px;
    font-weight: 700;
    width: 30px;
    flex-shrink: 0;
    text-align: center;
}

.siem-ip-cell {
    font-family: monospace;
    font-size: 9px;
    flex-shrink: 0;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   SOC-панели (стиль Wazuh Dashboard)
   ============================================ */
.w-soc-metric .wb,
.w-soc-donut .wb,
.w-soc-htop .wb {
    padding: 6px 8px;
}

.soc-metric-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.soc-metric-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: #7dd3fc;
    letter-spacing: -0.02em;
}

.soc-metric-sub {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.soc-sparkline {
    width: 100%;
    height: 28px;
    color: var(--accent);
    opacity: 0.95;
}

.soc-hbar-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    font-size: 9px;
}

.soc-hbar-head,
.soc-hbar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(48px, 0.9fr) 44px;
    gap: 4px;
    align-items: center;
}

.soc-hbar-head {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
}

.soc-hbar-desc {
    color: var(--text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-hbar-lvl {
    font-family: monospace;
    color: #f0ad4e;
    text-align: right;
}

.soc-hbar-track {
    height: 6px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
    align-self: center;
}

.soc-hbar-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #d9534f, #f0ad4e);
    border-radius: 2px;
}

.soc-hbar-cnt {
    font-family: monospace;
    font-size: 9px;
    color: var(--text-main);
    text-align: right;
}

.soc-donut-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    flex: 1;
}

.soc-donut-chart {
    position: relative;
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    flex-shrink: 0;
}

.soc-donut-chart::after {
    content: '';
    position: absolute;
    inset: 22%;
    background: var(--bg-widget);
    border-radius: 50%;
}

.soc-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 9px;
    color: var(--text-sec);
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

.soc-donut-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.soc-lg {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.soc-lg.g { background: #5cb85c; }
.soc-lg.b { background: #00a9e0; }
.soc-lg.y { background: #f0ad4e; }
.soc-lg.r { background: #d9534f; }

.soc-htop-inner {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 9px;
    line-height: 1.35;
    color: var(--text-sec);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.soc-htop-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
}

.soc-htop-load {
    color: #5cb85c;
    font-weight: 700;
}

.soc-htop-bars {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 2px 6px;
    align-items: center;
}

.soc-htop-lbl {
    color: var(--text-muted);
}

.soc-htop-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
}

.soc-htop-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #00a9e0, #5cb85c);
    border-radius: 2px;
}

.soc-htop-mem {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.soc-htop-membar {
    flex: 1;
    height: 8px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
}

.soc-htop-membar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #5cb85c, #2ea043);
    border-radius: 2px;
}

.soc-htop-swap i {
    background: linear-gradient(90deg, #f0ad4e, #d9534f);
}

.soc-htop-proc {
    width: 100%;
    border-collapse: collapse;
    font-size: 8px;
    margin-top: 2px;
}

.soc-htop-proc th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 700;
    padding: 2px 4px 2px 0;
    border-bottom: 1px solid var(--border);
}

.soc-htop-proc td {
    padding: 2px 4px 2px 0;
    color: var(--text-sec);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.soc-htop-proc td:last-child {
    color: #7dd3fc;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */
@media (max-width: 1199px) {
    #sbrd {
        grid-template-columns: minmax(300px, 1.4fr) minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "C N"
            "R R"
            "S S"
            "B B"
            "K K";
    }

    .col-soc {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .col-r {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
}

@media (max-width: 767px) {
    #sbrd {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "C"
            "N"
            "R"
            "S"
            "B"
            "K";
        overflow-y: auto;
        height: auto;
    }

    body:has(#sbrd) {
        overflow: auto;
        height: auto;
    }

    .col-n {
        grid-template-columns: 1fr;
    }

    .col-soc {
        grid-template-columns: 1fr;
    }

    .col-b {
        grid-template-columns: 1fr 1fr;
    }
}