/* ================= base.css ================= */

:root{
  /* Backgrounds — lifted from near-black to charcoal */
  --bg: #111521;        /* was #0e1118 */
  --panel: #161c2a;     /* was #141a24 */
  --panel2:#1b2336;     /* was #192132 */

  /* Borders / strokes — softer, less harsh */
  --stroke: rgba(255,255,255,0.08);
  --stroke2: rgba(255,255,255,0.13);

  /* Text — unchanged (already good) */
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);
  --muted2: rgba(255,255,255,0.52);

  /* Accent — unchanged */
  --accent: #3b82f6;
  --accent2:#60a5fa;
  --danger: #ef4444;

  /* Shadows — slightly lighter */
  --shadow: 0 18px 50px rgba(0,0,0,0.38);
  --shadow2: 0 10px 22px rgba(0,0,0,0.25);

  /* Radius */
  --r-xl: 18px;
  --r-lg: 16px;
  --r-md: 12px;

  /* Layout */
  --max: 1500px;
  --toolbarH: 28px;

  /* Font */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}




*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(59,130,246,0.22), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(96,165,250,0.16), transparent 55%),
    linear-gradient(180deg, #0b0d12, var(--bg));
}

/* Shared control styles */
.divider{
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
}

/* Range */
input[type="range"]{
  width: 180px;
  appearance:none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  outline:none;
}

input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  border: 2px solid rgba(255,255,255,0.75);
  cursor:pointer;
}

/* Select */
.toolselect, select{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 3px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  height: 24px;
}

/* Focus */
.toolbtn:focus, .toolselect:focus, textarea:focus, input[type="range"]:focus{
  outline:none;
  border-color: rgba(96,165,250,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.20);
}