/* ============================================================
   PREDATOR INTELLIGENCE — visual system
   Familia: Predator Evolution (Hackeye / Live / Prematch)
   Mismos selectores que la versión anterior — solo se
   redefine la piel visual, no la estructura ni la lógica.
   ============================================================ */

:root{
  --bg:#05090a;
  --bg-deep:#03050a;
  --panel:#0d1512;
  --panel-2:#0a1210;
  --line:#1c2b22;
  --line-soft:#152019;
  --text:#e9f2ec;
  --muted:#7c9086;
  --shadow:0 14px 34px rgba(0,0,0,.45);

  /* acentos semánticos — usados por clases existentes en las plantillas */
  --blue:#3fa9ff;      /* guiño a Predator Live: mismo azul en gráficos */
  --cyan:#7dfcd0;
  --green:#4ad66d;      /* acento primario Prematch */
  --yellow:#ffb020;
  --red:#ff5f6d;
  --purple:#b98bff;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(ellipse 70% 40% at 15% -10%, rgba(74,214,109,.06), transparent 55%),
    linear-gradient(165deg,#03060a,#060d0b 45%,#040807);
  background-attachment:fixed;
  color:var(--text);
  font:14px "Segoe UI",Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
code{
  color:var(--cyan);
  font-family:Consolas,"SF Mono",monospace;
  font-size:.92em;
  background:rgba(125,252,208,.08);
  padding:1px 5px;
  border-radius:4px;
}

/* ============ SHELL / SIDEBAR ============ */

.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}

.sidebar{
  position:sticky;top:0;height:100vh;
  background:rgba(4,8,7,.97);
  border-right:1px solid var(--line);
  padding:22px 16px;
  display:flex;flex-direction:column;
}

.brand{display:flex;gap:12px;align-items:center;padding:4px 4px 24px}

.shield{
  width:42px;height:48px;
  display:grid;place-items:center;
  background:
    conic-gradient(from 180deg at 50% 45%, rgba(74,214,109,.55), transparent 30%, transparent 100%),
    linear-gradient(165deg,#1c3a24,#08120c);
  clip-path:polygon(50% 0,93% 14%,84% 78%,50% 100%,16% 78%,7% 14%);
  font-weight:900;
  color:#eafff0;
  border:1px solid rgba(74,214,109,.35);
  position:relative;
  overflow:hidden;
  animation:sweep 5s linear infinite;
}
@keyframes sweep{
  0%{background-position:0 0, 0 0}
  100%{background-position:200% 0, 0 0}
}

.brand-title{font-size:18px;font-weight:900;letter-spacing:1px}
.brand-subtitle{font-size:10px;color:var(--green);letter-spacing:2px;font-weight:700}

.nav{display:flex;flex-direction:column;gap:7px}
.nav a{
  padding:12px 13px;border-radius:10px;
  color:var(--muted);display:flex;gap:12px;align-items:center;
  border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.nav a:hover{background:#0b1611;color:var(--text)}
.nav a.active{
  background:linear-gradient(90deg,rgba(74,214,109,.16),rgba(63,169,255,.05));
  border-color:#1f4a2e;
  color:#fff;
}

.sidebar-footer{
  margin-top:auto;border-top:1px solid var(--line);
  padding:16px 6px;color:var(--muted);font-size:12px;
}
.sidebar-footer small{display:block;margin-top:6px;color:#516158}
.status-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--green);margin-right:6px;
  box-shadow:0 0 10px var(--green);
  animation:blip 2.2s ease-in-out infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.4}}

.main{padding:24px 28px 50px;min-width:0}

/* ============ HEADER / FILTERS ============ */

.page-header{
  display:flex;justify-content:space-between;gap:20px;
  align-items:flex-start;margin-bottom:18px;
}
.page-header h1{font-size:30px;margin:3px 0 6px;font-weight:800;letter-spacing:-.2px}
.page-header p{margin:0;color:var(--muted)}
.eyebrow{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:2px}
.header-chip{
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--muted);white-space:nowrap;
}

.filterbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:rgba(13,21,18,.78);
  border:1px solid var(--line);border-radius:13px;
  padding:12px;margin-bottom:15px;
}
.filter{min-width:130px}
.filter.wide{min-width:190px}
.filter label{
  display:block;color:var(--muted);font-size:10px;
  text-transform:uppercase;font-weight:800;letter-spacing:.6px;margin-bottom:5px;
}
.filter select,.filter input{
  width:100%;background:#08110d;border:1px solid #23392b;
  border-radius:8px;color:var(--text);padding:9px 10px;outline:none;
}
.filter select:focus,.filter input:focus{border-color:var(--green)}
.filter-actions{margin-left:auto}
.button{
  border:1px solid #2c4a35;background:#0f2016;color:#fff;
  padding:9px 13px;border-radius:8px;cursor:pointer;
}
.button:hover{border-color:var(--green)}
.button.secondary{color:var(--muted)}

/* ============ KPI CARDS ============ */

.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kpi-grid.lab{grid-template-columns:repeat(2,minmax(0,260px))}

.kpi-card,.panel{
  background:linear-gradient(150deg,rgba(15,25,20,.98),rgba(8,14,11,.98));
  border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);
}
.kpi-card{padding:15px 16px;min-height:104px;position:relative;overflow:hidden}
.kpi-card:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--blue)}
.kpi-card.green:after{background:var(--green)}
.kpi-card.cyan:after{background:var(--cyan)}
.kpi-card.yellow:after{background:var(--yellow)}
.kpi-card.purple:after{background:var(--purple)}
.kpi-card.red:after{background:var(--red)}
.kpi-card strong{display:block;font-size:27px;margin-top:9px;font-weight:800}
.kpi-card small,.kpi-label{color:var(--muted)}
.kpi-label{text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.6px}

/* ============ LAYOUT GRIDS ============ */

.grid-3{display:grid;grid-template-columns:1.05fr 1.15fr .8fr;gap:12px;margin-bottom:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.grid-2.wide-left{grid-template-columns:1.45fr .85fr}
.panel{padding:16px;margin-bottom:12px;min-width:0}
.panel-title{
  font-size:13px;font-weight:850;text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:13px;color:#dff2e5;
}
.panel-note{font-size:11px;color:var(--muted);margin-top:11px}

/* ============ 1X2 DONUT ============ */

.donut-wrap{display:flex;align-items:center;gap:24px}
.donut{
  width:160px;height:160px;border-radius:50%;
  background:conic-gradient(
    var(--green) 0 calc(var(--p1)*1%),
    var(--yellow) calc(var(--p1)*1%) calc((var(--p1) + var(--px))*1%),
    var(--red) calc((var(--p1) + var(--px))*1%) 100%
  );
  display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line), 0 0 26px rgba(74,214,109,.12);
}
.donut:before{content:"";width:96px;height:96px;background:#08120e;border-radius:50%;grid-area:1/1}
.donut-center{grid-area:1/1;z-index:2;text-align:center}
.donut-center b{display:block;font-size:21px}
.donut-center span{text-transform:uppercase;font-size:9px;color:var(--muted);letter-spacing:.6px}

.legend{display:flex;flex-direction:column;gap:12px;flex:1}
.legend div{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center}
.legend.big{font-size:16px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.green{background:var(--green);box-shadow:0 0 8px rgba(74,214,109,.5)}
.dot.yellow{background:var(--yellow)}
.dot.red{background:var(--red)}

/* ============ BARS ============ */

.bars{display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:110px 1fr 50px;gap:10px;align-items:center}
.bar-row span{font-size:12px;color:var(--muted)}
.bar-track{height:15px;background:#101c15;border-radius:3px;overflow:hidden;border:1px solid var(--line-soft)}
.bar-track i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#8ef0a8)}

.triple-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:28px}
.triple-stat>div{
  text-align:center;border:1px solid var(--line);border-radius:50%;
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#08120e;
}
.triple-stat strong{font-size:21px;margin:5px 0}
.triple-stat small{color:var(--muted)}

/* ============ CHARTS (SVG, dibujados por predator.js) ============ */

.svg-chart{height:225px;border-radius:8px;overflow:hidden}
.svg-chart svg{width:100%;height:100%}
.axis-label{fill:#5f7a6c;font-size:10px}
.chart-line{fill:none;stroke:var(--blue);stroke-width:3}
.chart-area{fill:rgba(63,169,255,.09)}
.chart-point{fill:var(--blue)}

.column-chart{height:225px;display:flex;gap:14px;align-items:end;justify-content:center;padding-top:18px}
.column-chart.compact{height:170px}
.column-item{height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:5px;min-width:42px}
.column-item b{font-size:11px}
.column-track{height:150px;width:38px;display:flex;align-items:flex-end;background:#0d1a13;border-radius:4px;overflow:hidden}
.column-track i{width:100%;background:linear-gradient(var(--green),#1e6b39)}
.column-item span{color:var(--muted);font-size:11px}

/* ============ TABLES ============ */

.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:collapse;white-space:nowrap}
.data-table th,.data-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);text-align:right;font-size:12px}
.data-table th{color:#8ba396;text-transform:uppercase;font-size:10px;letter-spacing:.4px;position:sticky;top:0;background:var(--panel)}
.data-table .left,.data-table th:first-child{text-align:left}
.data-table tbody tr:hover{background:#0f1c14}

/* ============ COMPARE / SWITCH / FORM ============ */

.compare-grid{display:flex;flex-direction:column}
.compare-row{display:grid;grid-template-columns:1.3fr 1fr 1fr .5fr;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line-soft)}
.compare-row span{color:var(--muted)}
.compare-row b{color:var(--text);margin-left:8px}
.up{color:var(--green)}
.down{color:var(--red)}

.role-switch{display:flex;gap:8px;margin-bottom:12px}
.role-switch button{background:#0d1913;border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:9px 13px;cursor:pointer}
.role-switch button.active{background:#153a24;color:#fff;border-color:var(--green)}

.form-dots{display:flex;gap:9px;margin:4px 0 17px}
.form-dots i{width:16px;height:16px;border-radius:50%;display:block;background:#4c5c53}
.form-dots i.w{background:var(--green)}
.form-dots i.d{background:#7a897f}
.form-dots i.l{background:var(--red)}

.metric-list{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.metric-list>div{background:#08120e;border:1px solid var(--line-soft);border-radius:8px;padding:9px;text-align:center}
.metric-list span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}
.metric-list b{font-size:17px}

.mini-games{margin-top:14px}
.mini-games>div{display:grid;grid-template-columns:90px 1fr 30px 45px 25px;gap:8px;padding:7px 0;border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:11px}
.result.w{color:var(--green)}
.result.d{color:#b7c4bc}
.result.l{color:var(--red)}

.info-box,.empty{padding:13px 15px;border:1px dashed #2c4a35;border-radius:10px;color:var(--muted);background:#08120c;margin:12px 0}
.info-box b{color:var(--cyan)}

.market-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.market-cards>div{background:#08120e;border:1px solid var(--line);border-radius:10px;padding:13px}
.market-cards span,.market-cards small{display:block;color:var(--muted)}
.market-cards strong{display:block;font-size:25px;margin:7px 0}

.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag-cloud span{border:1px solid #23392b;background:#08120c;border-radius:100px;padding:6px 9px;color:#9fc0ab;font-size:11px}

/* ============ LIVE: SCATTER ============ */

.scatter-wrap{position:relative}
.scatter-svg{width:100%;height:auto;display:block}
.scatter-axis{stroke:#1c2b22;stroke-width:1}
.scatter-axis-label{fill:#5f7a6c;font-size:10px}
.scatter-dot{opacity:.85}
.scatter-legend{display:flex;gap:16px;margin-top:10px;font-size:11px;color:var(--muted)}
.scatter-legend span{display:inline-flex;align-items:center;gap:6px}
.scatter-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* ============ LIVE: FEED ESTILO TELEGRAM ============ */

.live-feed{
  display:flex;flex-direction:column;gap:9px;
  max-height:640px;overflow-y:auto;padding-right:4px;
}
.live-feed::-webkit-scrollbar{width:6px}
.live-feed::-webkit-scrollbar-thumb{background:#1f3a29;border-radius:3px}

.feed-item{
  background:#0a1512;border:1px solid var(--line-soft);border-left:3px solid var(--muted);
  border-radius:8px;padding:9px 11px;font-size:12px;
}
.feed-item.acerto{border-left-color:var(--green)}
.feed-item.fallo{border-left-color:var(--red)}
.feed-item.pendiente{border-left-color:var(--yellow)}
.feed-item.feed-new{animation:feedIn .5s ease}
@keyframes feedIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.feed-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.feed-signal{font-weight:800;color:#dff2e5}
.feed-hora{color:var(--muted);font-size:10px;white-space:nowrap}
.feed-equipos{color:var(--text);margin-top:2px}
.feed-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:6px;color:var(--muted);font-size:11px}
.feed-badge{font-weight:800;font-size:10px;padding:2px 7px;border-radius:100px}
.feed-badge.acerto{background:rgba(74,214,109,.15);color:var(--green)}
.feed-badge.fallo{background:rgba(255,95,109,.15);color:var(--red)}
.feed-badge.pendiente{background:rgba(255,176,32,.15);color:var(--yellow)}

.badge-verdict{font-weight:800;font-size:10px;padding:2px 7px;border-radius:6px}
.badge-verdict.green{background:rgba(74,214,109,.15);color:var(--green)}
.badge-verdict.red{background:rgba(255,95,109,.15);color:var(--red)}
.badge-verdict.yellow{background:rgba(255,176,32,.15);color:var(--yellow)}
.badge-verdict.purple{background:rgba(185,139,255,.15);color:var(--purple)}

/* ============ RESPONSIVE ============ */

@media(max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2,.grid-2.wide-left{grid-template-columns:1fr}
  .market-cards{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .nav{flex-direction:row;overflow:auto}
  .nav a span{display:none}
  .main{padding:16px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .market-cards{grid-template-columns:repeat(2,1fr)}
  .donut-wrap{flex-direction:column}
  .page-header{flex-direction:column}
}

@media (prefers-reduced-motion: reduce){
  .shield{animation:none}
  .status-dot{animation:none}
}

/* ============================================================
   LIVE V1.1 — SYNC MONITOR + FIX6.5 AUDIT DRAWER
   ============================================================ */

.live-page-header{align-items:center}
.live-header-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.sync-health{
  display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);font-size:10px;font-weight:850;letter-spacing:.6px;
  color:var(--muted);white-space:nowrap;text-transform:uppercase;
}
.sync-health-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 10px currentColor}
.sync-health.online{color:var(--green);border-color:rgba(74,214,109,.32);background:rgba(74,214,109,.07)}
.sync-health.online .sync-health-dot{background:var(--green)}
.sync-health.warn{color:var(--yellow);border-color:rgba(255,176,32,.32);background:rgba(255,176,32,.06)}
.sync-health.warn .sync-health-dot{background:var(--yellow)}
.sync-health.offline{color:var(--red);border-color:rgba(255,95,109,.32);background:rgba(255,95,109,.06)}
.sync-health.offline .sync-health-dot{background:var(--red)}
.sync-health.neutral{color:#8ba396}

.sync-strip{
  display:grid;grid-template-columns:1fr 34px 1fr .72fr .72fr 1.35fr;
  gap:8px;align-items:stretch;margin-bottom:14px;padding:10px;
  border:1px solid var(--line);border-radius:13px;background:rgba(7,14,11,.84);
}
.sync-stat{
  min-width:0;padding:10px 12px;border:1px solid var(--line-soft);border-radius:9px;
  background:linear-gradient(145deg,#0b1511,#08100d);
}
.sync-stat>span{display:block;color:#6f8579;font-size:9px;font-weight:850;letter-spacing:.8px;text-transform:uppercase}
.sync-stat>strong{display:block;margin-top:5px;font-size:18px;color:#e9f5ed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sync-stat>small{display:block;color:#597064;font-size:9px;margin-top:3px}
.sync-stat>small b{color:#8ca296;font-weight:700}
.sync-stat.compact strong{font-size:19px}
.sync-stat.last-sync strong{font:700 13px Consolas,"SF Mono",monospace;margin-top:8px;color:var(--cyan)}
.sync-arrow{display:grid;place-items:center;color:var(--green);font-size:22px;opacity:.7}

.live-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.feed-panel-title,.table-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.table-title-row small{font-size:10px;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.feed-connected{font-size:9px;color:#7d9387;text-transform:none;letter-spacing:.2px;display:inline-flex;align-items:center;gap:5px}
.feed-connected i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(74,214,109,.8);animation:blip 2.2s infinite}

.feed-item{
  width:100%;color:inherit;text-align:left;font:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.feed-item:hover{background:#0d1b16;border-color:#284838;transform:translateY(-1px)}
.feed-item:focus-visible{outline:2px solid rgba(125,252,208,.45);outline-offset:2px}
.feed-item.feed-new{animation:feedGlow 3.1s ease}
@keyframes feedGlow{
  0%{opacity:.25;transform:translateY(-7px);box-shadow:0 0 0 rgba(74,214,109,0)}
  14%{opacity:1;transform:translateY(0);box-shadow:0 0 24px rgba(74,214,109,.35)}
  100%{box-shadow:0 0 0 rgba(74,214,109,0)}
}

.live-signal-bars .bar-row{grid-template-columns:155px 1fr 78px}
.live-signal-bars .bar-row>span:first-child{color:#9db1a6;font-family:Consolas,"SF Mono",monospace;font-size:10px}
.signal-pill{font:700 10px Consolas,"SF Mono",monospace;color:#bde8c8;background:rgba(74,214,109,.08);border:1px solid rgba(74,214,109,.16);padding:3px 7px;border-radius:5px}
.clickable-row{cursor:pointer;transition:background .12s ease,box-shadow .12s ease}
.clickable-row:hover{background:#112019!important;box-shadow:inset 3px 0 0 var(--green)}
.clickable-row:focus-visible{outline:2px solid rgba(125,252,208,.4);outline-offset:-2px}

/* Drawer de auditoría */
body.drawer-open{overflow:hidden}
.alert-drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(2px);z-index:80;
}
.alert-drawer{
  position:fixed;z-index:90;right:0;top:0;height:100vh;width:min(680px,92vw);
  background:linear-gradient(165deg,#07100d,#0a1511 55%,#07100d);
  border-left:1px solid #27402f;box-shadow:-28px 0 70px rgba(0,0,0,.5);
  transform:translateX(102%);transition:transform .24s ease;display:flex;flex-direction:column;
}
.alert-drawer[aria-hidden="false"]{transform:translateX(0)}
.drawer-head{
  padding:22px 24px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  background:rgba(5,10,8,.84);backdrop-filter:blur(12px);
}
.drawer-head h2{margin:4px 0 4px;font-size:24px;letter-spacing:-.2px}
.drawer-head p{margin:0;color:var(--muted);font-size:12px}
.drawer-close{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:#0b1712;color:#a7b9af;
  font-size:25px;line-height:1;cursor:pointer;flex:0 0 auto;
}
.drawer-close:hover{color:#fff;border-color:#3b5f47}
.drawer-body{overflow:auto;padding:18px 20px 30px}
.drawer-body::-webkit-scrollbar{width:7px}
.drawer-body::-webkit-scrollbar-thumb{background:#244130;border-radius:4px}
.drawer-loading,.drawer-error{padding:22px;border:1px dashed #2b4835;border-radius:10px;color:var(--muted);background:#08110d}
.drawer-error{color:#ff8891;border-color:#5c2c31}
.drawer-section{
  margin-bottom:13px;padding:15px;border:1px solid var(--line);border-radius:11px;
  background:linear-gradient(145deg,rgba(13,24,18,.98),rgba(7,14,11,.98));
}
.drawer-section h3{margin:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#cfe2d5}
.hero-detail{border-color:#264a31;background:radial-gradient(circle at 5% 0,rgba(74,214,109,.09),transparent 42%),#09130f}
.detail-hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.detail-hero-grid>div{padding:10px;border:1px solid var(--line-soft);border-radius:8px;background:#08110d}
.detail-hero-grid span,.detail-metric span,.detail-rows span{display:block;font-size:8px;color:#687d71;text-transform:uppercase;letter-spacing:.55px}
.detail-hero-grid strong{display:block;margin-top:6px;font-size:12px;overflow-wrap:anywhere}
.detail-context{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.detail-context span{padding:4px 7px;border-radius:5px;background:#0c1b13;border:1px solid #203b29;color:#8fb49a;font:700 9px Consolas,"SF Mono",monospace}
.detail-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.detail-metric{padding:10px;border:1px solid var(--line-soft);border-radius:8px;background:#07100c}
.detail-metric strong{display:block;margin-top:5px;font-size:16px;color:#e9f4ec}
.secondary-signal{display:grid;grid-template-columns:145px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.secondary-signal:last-child{border-bottom:0}
.secondary-signal b{font:800 10px Consolas,"SF Mono",monospace;color:var(--cyan)}
.secondary-signal span{font-size:11px;color:#879b90;line-height:1.45}
.conditions-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.condition-item{display:flex;gap:8px;align-items:center;padding:8px 9px;border:1px solid var(--line-soft);border-radius:7px;background:#08110d;color:#92a49a;font-size:10px}
.condition-item i{font-style:normal;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex:0 0 auto}
.condition-item.ok i{background:rgba(74,214,109,.16);color:var(--green)}
.condition-item.fail i{background:rgba(255,95,109,.14);color:var(--red)}
.condition-item.fail{opacity:.76}
.detail-empty{padding:10px;color:#62766b;font-size:10px;border:1px dashed #263b2e;border-radius:7px}
.marketgate-status{display:inline-flex;padding:5px 8px;border-radius:5px;font:800 10px Consolas,"SF Mono",monospace;margin-bottom:10px}
.marketgate-status.ok{color:var(--green);background:rgba(74,214,109,.12);border:1px solid rgba(74,214,109,.22)}
.marketgate-status.warn{color:var(--yellow);background:rgba(255,176,32,.11);border:1px solid rgba(255,176,32,.2)}
.marketgate-status.bad{color:var(--red);background:rgba(255,95,109,.11);border:1px solid rgba(255,95,109,.2)}
.marketgate-status.neutral{color:#9aaca2;background:#0b1611;border:1px solid var(--line)}
.detail-rows{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.detail-rows>div{padding:9px 10px;border:1px solid var(--line-soft);border-radius:7px;background:#07100c;min-width:0}
.detail-rows b{display:block;margin-top:4px;font-size:11px;overflow-wrap:anywhere;color:#dbe9df}
.detail-note{font-size:10px;line-height:1.5;color:#72887b;margin:10px 0 0}
.error-note{color:#e77b84}
.detail-pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:11px;border:1px solid var(--line-soft);border-radius:7px;background:#060d0a;color:#91a79a;font:10px/1.55 Consolas,"SF Mono",monospace;max-height:240px;overflow:auto}
.origin-detail{margin-top:9px;color:#819488;font-size:10px}
.origin-detail summary{cursor:pointer;color:#9fb6aa;margin-bottom:8px}
.text-green{color:var(--green)!important}.text-red{color:var(--red)!important}.text-yellow{color:var(--yellow)!important}.text-purple{color:var(--purple)!important}

@media(max-width:1200px){
  .sync-strip{grid-template-columns:1fr 24px 1fr 1fr 1fr}.sync-stat.last-sync{grid-column:1/-1}.sync-arrow{font-size:18px}
  .live-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .live-header-actions{justify-content:flex-start}.sync-strip{grid-template-columns:1fr 1fr}.sync-arrow{display:none}.sync-stat.last-sync{grid-column:1/-1}
  .detail-hero-grid,.detail-metric-grid,.conditions-list,.detail-rows{grid-template-columns:1fr 1fr}
  .secondary-signal{grid-template-columns:1fr}.alert-drawer{width:100vw}
  .live-signal-bars .bar-row{grid-template-columns:110px 1fr 62px}
}
@media(max-width:520px){
  .live-kpis{grid-template-columns:1fr}.detail-hero-grid,.detail-metric-grid,.conditions-list,.detail-rows{grid-template-columns:1fr}
}