:root{
  --bg:#0b0f14;
  --bg2:#0e141b;
  --card:#121924;
  --soft:#0f151d;
  --line:#1c2735;
  --text:#e9f1fb;
  --muted:#97a6bb;
  --brand:#5ebcff;
  --accent:#7ff0c6;
  --danger:#ff7b7b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--line);backdrop-filter:blur(8px);
  position:sticky;top:0;background:rgba(10,14,20,.75);
}
.brand{display:flex;align-items:center;gap:12px}
.orb{width:12px;height:12px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand), #2a6fb6);}
.titles h1{margin:0;font-size:18px;letter-spacing:.3px}
.subtitle{font-size:12px;color:var(--muted)}
.status{color:var(--muted);font-size:12px}

.tabs{
  display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);
  position:sticky;top:56px;background:rgba(10,14,20,.8);backdrop-filter:blur(6px);
}
.tab{
  background:transparent;color:var(--muted);border:1px solid var(--line);
  padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600
}
.tab.active{color:var(--text);border-color:#2a3950;background:#0f1620}

main{padding:16px;max-width:1200px;margin:0 auto}
.panel{display:none}
.panel.active{display:block}
.pane-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:16px 0}
.pane-head h2{margin:0}
.tools{display:flex;gap:10px;flex-wrap:wrap}
.inline{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}
.inline input,.inline select{
  background:var(--soft);color:var(--text);border:1px solid var(--line);padding:8px;border-radius:8px;min-width:180px
}
.btn{background:var(--brand);color:#061522;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn.danger{background:var(--danger);color:#2a0c0c}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px}
.pad{padding:16px}
.soft{background:var(--soft)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
.small{font-size:12px}
.muted{color:var(--muted)}
.list{display:flex;flex-direction:column;gap:10px}
.list .row{
  display:flex;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#0f1620
}
.list.selectable .row{cursor:pointer}
.list .row:hover{border-color:#345}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.media{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0f1620}
.media img, .media video{display:block;width:100%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.slider-row{margin:10px 0}
.slider-row input[type=range]{width:100%}
.slider-row .ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}

.form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.form .field{display:flex;gap:8px;align-items:center}
.form .field label{flex:1;color:var(--muted)}
.form .field input,.form .field select{
  background:#0e1520;color:var(--text);border:1px solid var(--line);padding:8px;border-radius:8px;min-width:160px
}
.actions{display:flex;gap:8px;margin-top:10px}
.result{margin-top:10px}
.foot{
  margin:40px auto 20px;max-width:1200px;padding:10px 16px;
  display:flex;justify-content:space-between;color:var(--muted);font-size:12px;border-top:1px solid var(--line)
}

/* Responsive */
@media (max-width:1000px){
  .split{grid-template-columns:1fr}
}

/* ─────────────── AERI Event Viewer ─────────────── */
.ev-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.ev-box {
  background: #0d1117;
  padding: 20px;
  border-radius: 10px;
  max-width: 700px;
  width: 90%;
  color: white;
  overflow-y: auto;
  max-height: 90vh;
}
.ev-img {
  width: 100%;
  border-radius: 8px;
  margin-top: 10px;
}
.ev-close {
  float: right;
  cursor: pointer;
  font-size: 20px;
  opacity: 0.8;
}