:root{
  --bg:#080a0e; --panel:#0b0f16; --panel2:#0a0d14; --stroke:rgba(118,104,201,.28);
  --text:#e8eaf1; --muted:#a6a7bc; --acc:#a679ff; --teal:#64ffda; --green:#7ee787;
  --radius:16px; --shadow:0 18px 55px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:linear-gradient(180deg,#0a0d14,#080a0e); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.5; overflow-x:hidden}
.wrap{width:min(1280px,94vw); margin:0 auto}

.top{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(10,13,20,.85), rgba(10,13,20,.45)); border-bottom:1px solid rgba(166,121,255,.15)}
.top-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none}
.brand img{width:34px; height:34px; border-radius:10px; box-shadow:var(--shadow)}
.brand span{font-weight:900; letter-spacing:.3px}
.nav{display:flex; align-items:center; gap:12px}
.nav .dot{width:8px;height:8px;background:var(--teal);border-radius:50%}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid rgba(166,121,255,.35); background:rgba(166,121,255,.12); color:var(--text); text-decoration:none; font-weight:800}

.layout{display:grid; grid-template-columns:320px 1fr; gap:20px; padding:30px 0 40px}

.term{background:linear-gradient(180deg, var(--panel), var(--panel2)); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.term-head{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid rgba(118,104,201,.22); background:linear-gradient(180deg, rgba(166,121,255,.14), rgba(166,121,255,.06)); font-family:'JetBrains Mono', monospace; color:var(--muted)}
.led{width:10px;height:10px;border-radius:50%}.led.r{background:#ff5f56}.led.y{background:#ffbd2e}.led.g{background:#27c93f}
.term-body{padding:14px 14px 16px; font-family:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; color:#C8FACC}
.console{margin-top:10px; padding:8px 10px; border:1px dashed rgba(255,209,102,.5); background:rgba(255,209,102,.06); color:#ffd166; border-radius:12px; font-size:12px; max-height:120px; overflow:auto}

.sidebar .search{display:flex; gap:8px}
.sidebar input{flex:1; background:transparent; color:var(--text); border:1px solid rgba(166,121,255,.35); border-radius:10px; padding:8px 10px}
.sidebar button{background:transparent; color:var(--text); border:1px solid rgba(100,255,218,.45); border-radius:10px; padding:8px 10px; cursor:pointer}
.sidebar button:hover{filter:brightness(1.08)}
.list{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; max-height:62vh; overflow:auto}
.item{border:1px solid rgba(166,121,255,.22); border-radius:12px; padding:10px; background:linear-gradient(180deg, rgba(166,121,255,.08), rgba(166,121,255,.03)); cursor:pointer; transition:transform .2s ease, border-color .2s ease}
.item:hover{transform:translateY(-2px); border-color:rgba(100,255,218,.45)}
.item .head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.badge{display:inline-block; padding:.1em .5em; border-radius:8px; font-weight:800; letter-spacing:.08em; color:#111}
.badge.long{background:#7ee787}
.badge.short{background:#ff5c8a; color:#fff}
.conf{color:var(--muted);font-size:12px}

.alert{margin-bottom:16px; padding:10px 12px; border:1px dashed rgba(255,209,102,.5); color:#ffd166; border-radius:12px; background:rgba(255,209,102,.06)}
.hidden{display:none}

.details .details-body{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.kv{border:1px dashed rgba(166,121,255,.25); border-radius:12px; padding:10px; background:rgba(166,121,255,.05)}
.kv h5{margin:0 0 6px; color:var(--muted)}
.placeholder{color:var(--muted)}

.chart .term-body{padding:0 0 10px}
.chart-box{height:480px;width:100%}
.toolbar{display:flex; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid rgba(118,104,201,.22); background:rgba(166,121,255,.06)}
.toolbar .flex{flex:1}
select,input#apiBase{background:transparent; color:var(--text); border:1px solid rgba(166,121,255,.35); border-radius:10px; padding:6px 8px}
#syncto,#saveApi{background:transparent; color:var(--text); border:1px solid rgba(100,255,218,.45); border-radius:10px; padding:6px 8px; cursor:pointer}
#syncto:hover,#saveApi:hover{filter:brightness(1.08)}

.foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0 60px; color:var(--muted)}

@media (max-width: 1080px){
  .layout{grid-template-columns:1fr}
  .details .details-body{grid-template-columns:1fr}
  .chart-box{height:360px}
}
.chart-box {
  width: 100%;
  height: 480px;
  min-height: 480px;
}