:root {
  --bg:#0b1220;
  --panel:#121a2a;
  --text:#e8eefc;
  --muted:#99a6c7;
  --accent:#4da3ff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid #1f2a44;
  position:sticky; top:0; background:var(--bg); z-index:10
}
.brand{font-weight:800; letter-spacing:.3px;}
.tag{font-size:12px; color:var(--muted)}

/* Cards / panels */
.container{display:grid; grid-template-columns:280px 1fr; gap:16px; padding:16px;}
.card{
  background:var(--panel);
  border:1px solid #1f2a44;
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  overflow:auto; /* important: so the canvas is scrollable if tiles go beyond */
}

/* FREE-POSITION CANVAS */
.grid{
  position: relative;
  width: 100%;
  min-height: 700px;    /* canvas height; increase if needed */
  background: #0b1220;
}

/* Widget tile (outer box) – absolute positioned */
.tile{
  position:absolute;
  background:#0f1729;
  border:1px solid #1f2a44;
  border-radius:16px;
  padding:12px;
  overflow:hidden;
  cursor: default;         /* will become grab in Edit mode via JS */
}
.tile h3{margin:0 0 6px 0; font-size:14px}
.muted{color:var(--muted); font-size:12px}

.tile.dragging{
  opacity:0.6;
  cursor:grabbing;
  border:2px dashed var(--accent);
}

/* Buttons & inputs */
.btn{background:var(--accent); color:#051029; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600}
.btn:disabled{opacity:.6; cursor:not-allowed}
.input, select{width:100%; padding:10px 12px; background:#0d1526; color:var(--text); border:1px solid #1f2a44; border-radius:10px}
.row{display:grid; grid-template-columns:1fr; gap:10px}
.notice{padding:10px 12px; border:1px dashed #335; border-radius:10px; font-size:12px; color:#cde}

/* Switch */
.switch{display:flex; align-items:center; gap:10px}
.toggle{
  background:#1f2a44;
  border:1px solid #2b3a60;
  border-radius:999px;
  position:relative;
  cursor:pointer;
  transition:background .2s;
}
.knob{
  position:absolute;
  top:2px;
  left:2px;                /* default OFF position */
  border-radius:50%;
  background:#fff;
  transition:all .2s;       /* animate slide */
}
.toggle.on{background:#1c2f52; border-color:#2f5fb3}
.toggle.on .knob{
  left:calc(100% - var(--knob-size) - 2px); /* slide to right */
  background:#8cc1ff;
}

/* Slider */
.slider{appearance:none; background:#1f2a44;}

/* Gauge */
.gauge{--val:0; border-radius:50%; background:
  conic-gradient(#4da3ff calc(var(--val)*1%), #253153 0); display:grid; place-items:center;}
.gauge span{font-weight:800;}

/* Label */
.label{font-weight:800; display:flex; align-items:center; justify-content:center;}

/* Graph canvas */
canvas{display:block; max-width:100%}

.footer{padding:12px 16px; text-align:center; color:var(--muted)}