/* ============================================================================
   CORTEX ENDPOINT SENSOR — live HTML console (replaces the raster screenshot)
   Scoped under .sensorui so its tokens flip with [data-theme]; vector-crisp at
   any resolution. Rebuilt faithfully from the Sensor desktop-app captures.
   ============================================================================ */
.sensorui{
  --s-bg:#0C111D; --s-bgtint:radial-gradient(120% 80% at 80% 0%, rgba(45, 106, 231,0.08), transparent 60%);
  --s-titlebar:#0E1420; --s-panel:rgba(101,137,158,0.04); --s-inset:rgba(101,137,158,0.05);
  --s-border:#1C2839; --s-border2:#243343; --s-hair:rgba(101,137,158,0.12);
  --s-text:#EAF0F6; --s-strong:#FFFFFF; --s-muted:#8B9AAA; --s-faint:#5E6E80;
  --s-blue:#2D6AE7; --s-link:#5B97F2; --s-green:#3DD68C; --s-green-bg:rgba(61,214,140,0.12); --s-green-bd:rgba(61,214,140,0.30);
  --s-chip:rgba(101,137,158,0.12); --s-btn:rgba(101,137,158,0.07);
  position:relative; border:1px solid var(--card-edge); border-radius:12px; overflow:hidden;
  background:var(--s-bgtint), var(--s-bg); box-shadow:0 30px 90px var(--shadow-deep);
  font-family:var(--font-primary); color:var(--s-text);
  max-width:1100px; margin:0 auto; container-type:inline-size;
}
:root[data-theme="light"] .sensorui{
  --s-bg:#FFFFFF; --s-bgtint:radial-gradient(120% 80% at 80% 0%, rgba(45, 106, 231,0.05), transparent 60%);
  --s-titlebar:#F4F7FA; --s-panel:#FFFFFF; --s-inset:#F7FAFC;
  --s-border:#E7ECF2; --s-border2:#DDE5EC; --s-hair:#EDF1F5;
  --s-text:#33415A; --s-strong:#16202E; --s-muted:#5E6E80; --s-faint:#92A0AE;
  --s-blue:#2D6AE7; --s-link:#2D6AE7; --s-green:#0E9C6E; --s-green-bg:#E4F4EE; --s-green-bd:#BBE3D3;
  --s-chip:#EEF2F6; --s-btn:#FFFFFF;
}
.sensorui *{box-sizing:border-box}
.sensorui .mono{font-family:var(--font-mono)}
.sensorui .mono-logo{filter:var(--logo-filter)}

/* title bar — dots + title only (refresh / copy diagnostics removed) */
.sui-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:var(--s-titlebar);border-bottom:1px solid var(--s-border)}
.sui-dots{display:flex;gap:7px;flex:none}
.sui-dots i{width:11px;height:11px;border-radius:50%;display:block}
.sui-dots i:nth-child(1){background:#ED6A5E}.sui-dots i:nth-child(2){background:#F4BF4F}.sui-dots i:nth-child(3){background:#61C454}
.sui-title{flex:1;min-width:0;text-align:left;font-size:12px;color:var(--s-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sui-title b{color:var(--s-strong);font-weight:600}
/* legacy action styles kept for any residual markup; unused on sensor chrome */
.sui-actions{display:none}
.sui-btn{display:none}

/* body */
.sui-body{padding:26px 28px 28px}
.sui-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.sui-id{display:flex;align-items:center;gap:12px}
.sui-tile{width:38px;height:38px;border-radius:9px;background:var(--s-blue);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 18px rgba(45, 106, 231,0.4)}
.sui-tile img{width:22px;height:22px}
.sui-name{display:flex;align-items:center;gap:11px}
.sui-name h3{font-family:var(--font-secondary);font-weight:500;font-size:22px;color:var(--s-strong);letter-spacing:-0.01em}
.sui-pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 11px 0 9px;border-radius:9999px;background:var(--s-green-bg);border:1px solid var(--s-green-bd);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--s-green)}
.sui-pill .d{width:6px;height:6px;border-radius:50%;background:var(--s-green)}
.sui-sub{font-size:13px;color:var(--s-muted);line-height:1.5;margin-top:11px;max-width:430px}
.sui-checked{font-family:var(--font-mono);font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--s-faint);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sui-checked .d{width:6px;height:6px;border-radius:50%;background:var(--s-green)}

.sui-seclbl{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.sui-seclbl .l{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--s-strong);display:inline-flex;align-items:center;gap:9px}
.sui-seclbl .l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--s-blue)}
.sui-seclbl .r{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--s-faint)}

/* stat cards */
.sui-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.sui-stat{border:1px solid var(--s-border);border-radius:10px;background:var(--s-panel);padding:15px 17px}
.sui-stat .sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.sui-stat .sk{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--s-muted)}
.sui-stat .sk svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.sui-stat .info{width:13px;height:13px;color:var(--s-faint)}
.sui-stat .sv{font-family:var(--font-secondary);font-weight:500;font-size:clamp(17px, 5cqw, 33px);line-height:1;color:var(--s-strong);letter-spacing:-0.01em;white-space:nowrap}
.sui-stat .sm{font-family:var(--font-mono);font-size:11px;color:var(--s-faint);margin-top:9px}
.sui-stat .sm b{color:var(--s-muted);font-weight:700}

/* two-panel row */
.sui-cols{display:grid;grid-template-columns:1.06fr 1fr;gap:18px;margin-bottom:24px}
.sui-panel{border:1px solid var(--s-border);border-radius:10px;background:var(--s-panel);overflow:hidden}
.sui-panel__h{display:flex;align-items:baseline;justify-content:space-between;padding:15px 18px 13px;border-bottom:1px solid var(--s-hair)}
.sui-panel__h h4{font-size:15px;font-weight:600;color:var(--s-strong)}
.sui-panel__h .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:0.05em;text-transform:uppercase;color:var(--s-faint)}
.sui-mode{display:flex;align-items:flex-start;gap:13px;padding:14px 18px;border-bottom:1px solid var(--s-hair)}
.sui-mode:last-child{border-bottom:none}
.sui-mode .mic{width:34px;height:34px;border-radius:8px;background:var(--s-inset);border:1px solid var(--s-border);display:flex;align-items:center;justify-content:center;flex:none;color:var(--s-muted)}
.sui-mode .mic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.sui-mode .mc{flex:1;min-width:0}
.sui-mrow{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.sui-mrow b{font-size:14px;font-weight:600;color:var(--s-strong)}
.sui-tag{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 9px;border-radius:9999px;background:var(--s-green-bg);border:1px solid var(--s-green-bd);font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--s-green)}
.sui-tag .d{width:5px;height:5px;border-radius:50%;background:var(--s-green)}
.sui-mode p{font-size:12.5px;color:var(--s-muted);line-height:1.45}
/* endpoints */
.sui-ep{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--s-hair)}
.sui-ep:last-child{border-bottom:none}
.sui-ep .d{width:9px;height:9px;border-radius:50%;background:var(--s-green);flex:none;box-shadow:0 0 0 3px var(--s-green-bg)}
.sui-ep .en{font-size:14px;font-weight:600;color:var(--s-strong);width:108px;flex:none}
.sui-ep .ea{font-family:var(--font-mono);font-size:12.5px;color:var(--s-link);width:150px;flex:none}
.sui-ep .ed{font-size:11.5px;color:var(--s-faint);line-height:1.35;text-align:right;flex:1}

/* recent captures table */
.sui-table{border:1px solid var(--s-border);border-radius:10px;overflow:hidden}
.sui-tbl-h{display:flex;align-items:baseline;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--s-hair)}
.sui-tbl-h .l{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--s-strong);display:inline-flex;align-items:center;gap:9px}
.sui-tbl-h .l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--s-blue)}
.sui-tbl-h .r{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--s-faint)}
.sui-scroll{overflow:hidden}
.sui-grid{width:100%;font-family:var(--font-mono);font-size:11.5px;border-collapse:collapse;table-layout:fixed}
.sui-grid th{text-align:left;font-weight:700;font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--s-faint);padding:11px 14px;border-bottom:1px solid var(--s-hair);white-space:nowrap}
.sui-grid td{padding:11px 14px;border-bottom:1px solid var(--s-hair);color:var(--s-muted);white-space:nowrap;vertical-align:middle}
.sui-grid tr:last-child td{border-bottom:none}
.sui-time b{display:block;color:var(--s-strong);font-weight:700}
.sui-time span{font-size:9px;color:var(--s-faint);letter-spacing:0.06em}
.sui-src{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:6px;border:1px solid var(--s-border2);background:var(--s-inset);font-size:9.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--s-muted)}
.sui-src svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}
.sui-prov{display:inline-flex;align-items:center;gap:8px;color:var(--s-strong);font-weight:700}
.sui-prov img{width:15px;height:15px;object-fit:contain}
.sui-http{color:var(--s-green);font-weight:700}
.sui-recon{display:inline-flex;align-items:center;gap:7px;color:var(--s-green);font-weight:700}
.sui-recon .d{width:6px;height:6px;border-radius:50%;background:var(--s-green)}
.sui-strong{color:var(--s-text)}
.sui-prompt{color:var(--s-faint);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sui-grid td,.sui-grid th{overflow:hidden;text-overflow:ellipsis}

/* container-responsive */
@container (max-width: 920px){ .sui-grid th:nth-child(8),.sui-grid td:nth-child(8){display:none} } /* hide Prompt */
@container (max-width: 760px){ .sui-grid th:nth-child(4),.sui-grid td:nth-child(4),.sui-grid th:nth-child(5),.sui-grid td:nth-child(5){display:none} } /* hide Surface + Model */
@container (max-width: 540px){ .sui-grid th:nth-child(6),.sui-grid td:nth-child(6){display:none} } /* hide Reconstruction */

/* container-responsive */
@container (max-width: 720px){
  .sui-stats{grid-template-columns:1fr 1fr}
  .sui-cols{grid-template-columns:1fr}
}
@container (max-width: 560px){
  .sui-bar{height:32px;padding:0 10px;gap:8px}
  .sui-dots{gap:6px}
  .sui-dots i{width:9px;height:9px}
  .sui-body{padding:16px 14px 18px}
  .sui-head{flex-wrap:wrap;gap:10px;margin-bottom:16px}
  .sui-checked{order:3;flex-basis:100%}
  .sui-title{font-size:10.5px}
  .sui-name h3{font-size:18px}
  .sui-sub{font-size:12.5px;margin-top:8px}
  .sui-seclbl{margin-bottom:10px}
  .sui-stats{gap:10px;margin-bottom:16px}
  .sui-stat{padding:12px 13px}
  .sui-stat .sv{font-size:clamp(16px, 6cqw, 28px)}
  .sui-cols{gap:12px;margin-bottom:16px}
  .sui-panel__h{padding:12px 14px 10px}
  .sui-mode{padding:12px 14px;gap:10px}
  .sui-mode p{font-size:12px}
  /* PLT-003: stack endpoint name → address → description (no overflow at 390) */
  .sui-ep{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:12px;
    row-gap:3px;
    align-items:start;
    padding:11px 14px;
  }
  .sui-ep .d{grid-row:1 / span 3;margin-top:5px}
  .sui-ep .en{width:auto;flex:unset}
  .sui-ep .ea{width:auto;flex:unset;grid-column:2;min-width:0;overflow-wrap:anywhere}
  .sui-ep .ed{
    grid-column:2;
    flex:unset;
    text-align:left;
    min-width:0;
    overflow-wrap:anywhere;
  }
}
