/* Cyclops — instrument UI (grey/green/white/black) */
:root{
  --bg:#121417;
  --panel:#191d22;
  --panel2:#15181d;
  --line:#2a313a;
  --text:#e9eef4;
  --muted:#a7b1be;
  --green:#37ff8b;
  --green2:#18c96a;
  --black:#000;
}

/* Prevent grid item overlap and ensure proper spacing */
.cyclops-grid{align-items:start;grid-auto-flow:row;grid-auto-rows:auto;}
.cyclops-card{min-width:0;}
.cyclops-row{align-content:start;}
.cyclops-inline{flex-wrap:wrap;}

.cyclops-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#0f1114 0%,#13161a 100%);border:1px solid var(--line);border-radius:14px;padding:14px;max-width:100%;box-sizing:border-box}
.cyclops-header{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cyclops-brand{display:flex;gap:10px;align-items:center}
.cyclops-dot{width:14px;height:14px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#7bffb4 0%,#2cff84 35%,#0a7b3b 100%);box-shadow:0 0 0 3px rgba(55,255,139,.08)}
.cyclops-title{display:flex;flex-direction:column;gap:2px}
.cyclops-name{letter-spacing:.18em;font-weight:800;font-size:14px}
.cyclops-sub{font-size:12px;color:var(--muted)}
.cyclops-header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.cyclops-btn{border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:8px 10px;font-size:12px;cursor:pointer}
.cyclops-btn:hover{border-color:#3b4654}
.cyclops-btn:disabled{opacity:.5;cursor:not-allowed}
.cyclops-btn-primary{background:linear-gradient(180deg,#2cff84 0%,#16c865 100%);color:#02140a;border-color:#1b7d48;font-weight:800}
.cyclops-btn-ghost{background:transparent}

.cyclops-tabs{display:flex;gap:8px;margin:12px 0 10px;flex-wrap:wrap}
.cyclops-tab{border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);padding:7px 10px;font-size:12px;cursor:pointer}
.cyclops-tab.is-active{color:var(--text);border-color:#3b4654;background:rgba(255,255,255,.03)}

.cyclops-panel{display:none}
.cyclops-panel.is-active{display:block}

.cyclops-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:980px){.cyclops-grid{grid-template-columns:1fr}}
.cyclops-card{background:linear-gradient(180deg,var(--panel) 0%,#14181d 100%);border:1px solid var(--line);border-radius:14px;padding:12px}
.cyclops-card-title{font-size:12px;font-weight:900;letter-spacing:.08em;color:#dfe7f1;margin-bottom:10px;text-transform:uppercase}
.cyclops-row{display:grid;grid-template-columns:160px 1fr;gap:10px;align-items:center;margin:10px 0}
@media (max-width:740px){.cyclops-row{grid-template-columns:1fr}}
.cyclops-label{font-size:12px;color:var(--muted)}
.cyclops-input{width:100%;background:#0f1216;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;box-sizing:border-box}
.cyclops-inline{display:flex;gap:8px;align-items:center}
.cyclops-help{font-size:11px;color:var(--muted);grid-column:2/3}
@media (max-width:740px){.cyclops-help{grid-column:auto}}
.cyclops-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:11px;color:var(--muted);background:rgba(255,255,255,.02)}

.cyclops-switch{position:relative;display:inline-block;width:44px;height:24px}
.cyclops-switch input{opacity:0;width:0;height:0}
.cyclops-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#0f1216;border:1px solid var(--line);transition:.2s;border-radius:999px}
.cyclops-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:2px;background:#2a313a;transition:.2s;border-radius:999px}
.cyclops-switch input:checked + .cyclops-slider{border-color:#1b7d48;background:rgba(55,255,139,.08)}
.cyclops-switch input:checked + .cyclops-slider:before{transform:translateX(20px);background:var(--green)}

.cyclops-range{width:100%}

.cyclops-meter{height:10px;border-radius:999px;border:1px solid var(--line);background:#0f1216;overflow:hidden}
.cyclops-meter-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff5a5a 0%,#ffd45a 40%,#2cff84 100%)}

.cyclops-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:980px){.cyclops-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cyclops-kpi{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.02)}
.cyclops-kpi-label{font-size:11px;color:var(--muted)}
.cyclops-kpi-val{font-size:18px;font-weight:900;margin-top:4px;color:#eafff4}

.cyclops-displays{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px}
@media (max-width:980px){.cyclops-displays{grid-template-columns:1fr}}
.cyclops-display{background:linear-gradient(180deg,var(--panel) 0%,#14181d 100%);border:1px solid var(--line);border-radius:14px;padding:10px;overflow:hidden}
.cyclops-display-title{font-size:12px;font-weight:900;letter-spacing:.08em;color:#dfe7f1;margin-bottom:8px;text-transform:uppercase}
.cyclops-display canvas{width:100%;height:auto;border-radius:10px;background:#000;border:1px solid #0b0f14}
.cyclops-display-wide canvas{max-height:320px}

.cyclops-foot{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:10px}

/* Wizard modal */
.cyclops-modal{position:fixed;inset:0;display:none;z-index:999999}
.cyclops-modal[aria-hidden="false"]{display:block}
.cyclops-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.cyclops-modal-card{position:relative;max-width:860px;margin:6vh auto;background:linear-gradient(180deg,#14181d 0%,#0f1114 100%);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media (max-width:900px){.cyclops-modal-card{margin:2vh 12px}}
.cyclops-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--line)}
.cyclops-modal-title{font-size:14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.cyclops-modal-sub{font-size:12px;color:var(--muted);margin-top:2px}
.cyclops-modal-body{padding:14px}
.cyclops-modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px;border-top:1px solid var(--line)}

.cyclops-wiz-sectors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cyclops-wiz-chip{border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--text);padding:8px 10px;font-size:12px;cursor:pointer}
.cyclops-wiz-chip.is-active{border-color:#1b7d48;background:rgba(55,255,139,.08)}
.cyclops-wiz-stepper{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.02)}
.cyclops-wiz-progress{height:10px;border-radius:999px;border:1px solid var(--line);background:#0f1216;overflow:hidden;margin-bottom:10px}
.cyclops-wiz-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#2cff84 0%,#16c865 100%)}
.cyclops-wiz-step{font-weight:900;font-size:13px;margin-bottom:8px}
.cyclops-wiz-content{color:#d7e0eb;font-size:12px;line-height:1.5}
.cyclops-wiz-tips{margin-top:12px;border-top:1px dashed #2c3540;padding-top:10px}
.cyclops-wiz-tip-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.cyclops-wiz-tip{font-size:12px;color:#d7e0eb}

/* Extra breathing room in tight layouts */
@media (max-width:980px){
  .cyclops-grid{gap:12px;}
  .cyclops-row{margin:12px 0;}
}


/* ============================================================
   CYCLOPS v1.9.4 — Responsive instrument layout (mobile→desktop)
   Goal: no squeezed or overlapping cards; fit all content neatly.
   Scoped to .cyclops-wrap to avoid theme collisions.
   ============================================================ */

.cyclops-wrap, .cyclops-wrap *{ box-sizing:border-box !important; }
.cyclops-wrap{ width:100%; max-width:1200px; margin:0 auto; overflow:visible !important; position:relative !important; }

/* Typography scaling (shrinks gently on small screens) */
.cyclops-wrap{
  --c-font: 13px;
  --c-font-sm: 12px;
  --c-radius: 14px;
  --c-gap: 14px;
}
@media (max-width:900px){ .cyclops-wrap{ --c-font:12px; --c-font-sm:11px; --c-gap:12px; } }
@media (max-width:520px){ .cyclops-wrap{ --c-font:11px; --c-font-sm:10.5px; --c-gap:10px; } }

.cyclops-wrap, .cyclops-wrap button, .cyclops-wrap input, .cyclops-wrap select, .cyclops-wrap textarea{
  font-size: var(--c-font) !important;
  line-height: 1.35 !important;
}

/* Tabs/content: prevent any absolute/float collisions from theme */
.cyclops-wrap .cyclops-tabs,
.cyclops-wrap .cyclops-tab-content,
.cyclops-wrap .cyclops-panel,
.cyclops-wrap .cyclops-row,
.cyclops-wrap .cyclops-card{
  position:relative !important;
  float:none !important;
  clear:none !important;
}

/* Main card grid: 1 col on mobile, 2 on tablet, 3 on desktop */
.cyclops-wrap .cyclops-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--c-gap) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width:100% !important;
}
@media (max-width:1100px){
  .cyclops-wrap .cyclops-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width:720px){
  .cyclops-wrap .cyclops-grid{ grid-template-columns: 1fr !important; }
}

/* Cards: never clip text; allow wrapping; avoid min-content overflow */
.cyclops-wrap .cyclops-card{
  border-radius: var(--c-radius) !important;
  overflow: visible !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.cyclops-wrap .cyclops-card *{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  min-width:0 !important;
}

/* Inside cards: keep spacing tidy */
.cyclops-wrap .cyclops-card .cyclops-card-title,
.cyclops-wrap .cyclops-title,
.cyclops-wrap h1, .cyclops-wrap h2, .cyclops-wrap h3{
  line-height:1.25 !important;
}

/* Rows inside cards: convert to responsive grid */
.cyclops-wrap .cyclops-row{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items:center !important;
}
@media (max-width:520px){
  .cyclops-wrap .cyclops-row{ grid-template-columns: 1fr !important; }
}

/* Inline controls: wrap instead of squeezing */
.cyclops-wrap .cyclops-inline{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
}

/* Inputs: fit to container */
.cyclops-wrap input,
.cyclops-wrap select,
.cyclops-wrap textarea{
  width:100% !important;
  max-width:100% !important;
}

/* Buttons: prevent oversize, allow wrap on narrow screens */
.cyclops-wrap button{
  max-width:100% !important;
  white-space: normal !important;
}

/* Canvases/video panels: responsive scaling without breaking aspect */
.cyclops-wrap canvas,
.cyclops-wrap video{
  max-width:100% !important;
  height:auto !important;
}

/* Spectrograph container: allow horizontal scroll if theme constrains width */
.cyclops-wrap .cyclops-graph-wrap,
.cyclops-wrap .cyclops-spectrograph,
.cyclops-wrap .cyclops-chart{
  max-width:100% !important;
  overflow:auto !important;
}

/* Safety: neutralize any theme overflow clipping on card containers */
.cyclops-wrap .cyclops-panel,
.cyclops-wrap .cyclops-card{
  overflow: visible !important;
}

/* Spacing: ensure padding exists even if theme resets */
.cyclops-wrap .cyclops-card{ padding: 12px 12px 10px !important; }
@media (max-width:520px){
  .cyclops-wrap .cyclops-card{ padding: 10px 10px 8px !important; }
}

/* If any “columns” wrappers exist, force them to behave */
.cyclops-wrap [class*="col"], .cyclops-wrap [class*="column"]{
  float:none !important;
  width:auto !important;
  max-width:100% !important;
}