* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0a0a0c; color:#e0e0e0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow:hidden; height:100vh; }

#toolbar {
  background:#16161a; border-bottom:1px solid #2a2a30;
  height:42px; padding:0 12px;
  display:flex; align-items:center; gap:7px; flex-shrink:0;
}
#toolbar h1 { font-size:13px; font-weight:700; color:#fff; margin-right:2px; white-space:nowrap; }

.btn { border:none; padding:4px 12px; border-radius:4px; cursor:pointer; font-size:11px; font-weight:600; transition:opacity .15s; }
.btn:hover { opacity:.82; }
.btn-success { background:#16a34a; color:#fff; }
.btn-danger  { background:#dc2626; color:#fff; }
.btn-ghost   { background:#1e1e24; color:#666; border:1px solid #2a2a30; font-size:11px; padding:3px 9px; border-radius:4px; cursor:pointer; transition:all .15s; }
.btn-ghost.on { background:#1a2a1e; color:#22c55e; border-color:#22c55e44; }

.sep { width:1px; height:18px; background:#2a2a30; flex-shrink:0; }

.lb {
  background:#1e1e24; border:1px solid #2a2a30; color:#555;
  padding:3px 8px; border-radius:4px; cursor:pointer;
  font-size:11px; display:flex; align-items:center; gap:4px; transition:all .15s;
}
.lb:hover { border-color:#444; color:#999; }
.lb.active { background:#1a1e2e; color:#60a5fa; border-color:#60a5fa44; }

.li { display:grid; gap:1.5px; width:13px; height:13px; }
.li .c { background:currentColor; border-radius:1px; opacity:.7; }
.li-1 { grid-template-columns:1fr; }
.li-2 { grid-template-columns:1fr 1fr; }
.li-3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.li-4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }

#grid {
  display:grid; gap:2px;
  width:100%; height:calc(100vh - 62px);
  background:#0a0a0c;
}
.layout-1 { grid-template-columns:1fr; grid-template-rows:1fr; }
.layout-2 { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
.layout-3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.layout-4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.layout-3 .panel:first-child { grid-row:1/3; }

.panel {
  position:relative; background:#0d0d0f;
  overflow:hidden; border:1px solid #181820; transition:border-color .2s;
}
.panel.focused { border-color:#2a2a50; }

.panel-hdr {
  position:absolute; top:0; left:0; right:0; z-index:5;
  background:rgba(13,13,15,.95); border-bottom:1px solid #1a1a22;
  height:30px; display:flex; align-items:center; gap:4px; padding:0 8px;
}
.panel-hdr select {
  background:#181820; border:1px solid #222230; color:#bbb;
  padding:2px 4px; border-radius:3px; font-size:10px; outline:none; cursor:pointer;
}
.panel-hdr select:focus { border-color:#5b3fa3; }

.p-sep    { width:1px; height:14px; background:#222228; }
.p-price  { font-size:12px; font-weight:700; color:#e8e8e8; font-variant-numeric:tabular-nums; margin-left:4px; }
.p-regime { font-size:10px; margin-left:4px; }
.p-dot    { width:5px; height:5px; border-radius:50%; background:#2a2a30; margin-left:auto; flex-shrink:0; }
.p-dot.live { background:#22c55e; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }

.chart-area  { position:absolute; top:30px; left:0; right:0; bottom:0; }
.hist-canvas { position:absolute; top:30px; left:0; pointer-events:none; z-index:3; }

.p-levels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  margin-left: 6px;
  flex: 1;           /* ocupa el espacio disponible entre regime y dot */
  min-width: 0;
  overflow: hidden;
}
.p-lv {
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555;
}
.cp  { color:#22c55e; }
.cn  { color:#ef4444; }
.cy  { color:#facc15; }
.ctp { color:#00d4aa; }
.ctn { color:#9d74e3; }
.cor { color:#f97316; }

#statusbar {
  height:20px; background:#0a0a0c; border-top:1px solid #181820;
  display:flex; align-items:center; padding:0 10px;
  font-size:10px; color:#444; gap:14px; flex-shrink:0;
}
#statusbar span { font-variant-numeric:tabular-nums; }

/* ── Settings panel ── */
#settings-panel {
  display:none;
  position:fixed;
  z-index:200;
  background:#16161a;
  border:1px solid #2a2a30;
  padding:12px 16px;
  min-width:260px;
  font-size:11px;
  border-radius:6px;
  box-shadow:0 8px 28px rgba(0,0,0,.7);
}
.cfg-title { color:#888; margin-bottom:8px; font-weight:600; letter-spacing:.05em; }
.cfg-row {
  display:flex; align-items:center; gap:8px;
  padding:5px 0; border-bottom:1px solid #1e1e24;
}
.cfg-row:last-child { border-bottom:none; }
.cfg-row span { flex:1; color:#aaa; }
.cfg-row input[type=color] {
  width:28px; height:22px; border:1px solid #2a2a30;
  border-radius:3px; background:none; cursor:pointer; padding:1px;
}
.cfg-row input[type=number] {
  width:38px; background:#1e1e24; border:1px solid #2a2a30;
  color:#ccc; border-radius:3px; padding:2px 4px; text-align:center;
}