:root {
  --bg: #0b0e14;
  --panel: #11151e;
  --muted: #8a92a6;
  --fg: #e9eef6;
  --accent: #27e385;
  --line: #232a3a;
}

* {box-sizing:border-box}
html,body {height:100%}
body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial
}

.wrap {
  display:grid;
  grid-template-columns:320px 1fr;
  height:100vh;
  overflow:hidden
}

.sidebar {
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  width:320px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain
}

.sb-banner img{display:block;max-width:100%;height:auto}
.sb-top,.sb-meta,.sb-list{min-width:0}
.sidebar>*{min-width:0}

.content {
  min-width:0;
  overflow:auto;
  display:flex;
  flex-direction:column
}

.sb-top {
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--fg)
}

.brand .logo {
  width:38px;
  height:38px;
  border-radius:10px;
  background:#0c1018;
  display:grid;
  place-items:center;
  overflow:hidden
}

.brand .t1 {font-weight:800}
.brand .t2 {color:var(--muted);font-size:12px}

.admin-btn {
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0e1522;
  color:var(--fg);
  text-decoration:none;
  font-weight:700
}

.sb-banner {
  padding:10px 14px;
  border-bottom:1px solid var(--line)
}

.sb-banner img {
  width:100%;
  height:auto;
  border-radius:10px;
  background:#0c1018;
  display:block
}

.sb-meta {
  padding:14px;
  border-bottom:1px solid var(--line);
  display:grid;
  gap:10px
}

.sel-head {display:flex;align-items:center;gap:10px}
.sel-img {
  width:36px;height:36px;
  border-radius:8px;
  background:#0b0f18;
  overflow:hidden;
  flex:0 0 auto
}
.sel-img img {width:100%;height:100%;object-fit:cover;display:block}
.sel-name {font-weight:800}
.sel-ver {font-size:12px;color:var(--muted)}
.motd {font-size:13px;color:#cfd6e6;word-break:break-word}
.kv {align-items:center;font-size:13px}
.kv strong {font-weight:800}

.sb-list {
  padding:10px;
  overflow:auto;
  display:grid;
  gap:10px
}

.card {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background:#0e1523;
  border:1px solid #0d1421;
  cursor:pointer
}

.card:hover {border-color:#182237;background:#0c1321}
.card.active {border-color:var(--accent);background:#0f1a2a}

.card .img {
  width:32px;height:32px;
  border-radius:8px;
  background:#0b0f18;
  overflow:hidden;
  display:block
}
.card .img img {width:100%;height:100%;object-fit:cover;display:block}
.card .info {min-width:0}
.card .name {font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .motdline {font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .right {display:flex;align-items:center;gap:10px}

.pill {
  padding:6px 10px;
  border-radius:999px;
  background:#0f1626;
  border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
  color:#cfe7da;
  font-weight:700
}

.sig {display:flex;gap:3px}
.sig .b {width:4px;border-radius:2px;background:#0a271d;opacity:.85}
.sig .b.on {background:linear-gradient(to top,#23e082,#72f0b2)}
.sig .b:nth-child(1){height:8px}
.sig .b:nth-child(2){height:10px}
.sig .b:nth-child(3){height:12px}
.sig .b:nth-child(4){height:14px}
.sig .b:nth-child(5){height:16px}

.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:var(--panel)
}

.tsel {display:flex;align-items:center;gap:10px}
.tdot {width:10px;height:10px;border-radius:999px;background:var(--accent)}
.actions {display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.btn {
  background:#0e1522;
  border:1px solid var(--line);
  color:var(--fg);
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700
}
.btn.active {border-color:var(--accent);color:var(--accent)}

.legend {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:#0f141f
}

.leg-item {display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.leg-dot {width:10px;height:10px;border-radius:999px}

.chart-wrap {position:relative;flex:1;display:flex;flex-direction:column}
.canvas-wrap {position:relative;flex:1}
#chart {width:100%;height:100%;display:block;background:#0b0f19;cursor:crosshair}

.hover {
  position:absolute;
  pointer-events:none;
  min-width:210px;
  max-width:280px;
  background:#111826;
  border:1px solid #0e1420;
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  padding:10px;
  display:none
}
.hover .h-time {font-weight:800;margin-bottom:6px;color:#e6edf6}
.hover .h-row {display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.hover .left {display:inline-flex;align-items:center;gap:6px;color:#cbd5e1}
.hover .val {font-weight:700;color:#e6edf6}

.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#0f1626;
  font-size:12px;
  color:var(--muted)
}
.sum {display:flex;gap:8px;align-items:center}
.hide {display:none}

.brush {
  position:absolute;
  top:0;
  height:100%;
  background:rgba(39,227,133,.10);
  border:1px solid rgba(39,227,133,.45);
  display:none
}

/* Mobil uyum */
@media(max-width:768px){
  .wrap {grid-template-columns:1fr}
  .sidebar {width:100%;border-right:none;border-bottom:1px solid var(--line);flex:unset;height:auto}
  .content {height:auto}
  .sb-meta {min-width:0}
}