:root {
  --bg: #0b0c10;
  --panel: #14161a;
  --panel-2: #1b1e24;
  --text: #e6e8ee;
  --accent: #6aa6ff;
  --muted: #9aa3b2;
  --danger: #ff6b6b;
  --ok: #6bffb6;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel-2: #f0f2f7;
    --text: #111316;
    --accent: #2d6df6;
    --muted: #5a6577;
    --danger: #d64545;
    --ok: #2fb67a;
  }
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  grid-template-rows: 48px 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "sidebar canvas right";
  height: 100%;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .brand {
  font-weight: 700;
  letter-spacing: .2px;
  margin-right: 12px;
}
.topbar .spacer { flex: 1; }
.button, button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--panel-2);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { border-color: transparent; background: var(--accent); color: #fff; }
button.danger { border-color: transparent; background: var(--danger); color: #fff; }
button.ghost { background: transparent; border-color: rgba(255,255,255,.12); }

.sidebar {
  grid-area: sidebar;
  padding: 10px;
  background: var(--panel);
  border-right: 1px solid rgba(255,255,255,.06);
  overflow: auto;
}
.sidebar h3, .right h3 {
  font-size: 12px; text-transform: uppercase; color: var(--muted);
  letter-spacing: .12em; margin: 12px 0 8px;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.section {
  margin: 12px 0;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}

.canvas-wrap {
  grid-area: canvas;
  position: relative;
  background: repeating-conic-gradient(from 45deg, rgba(255,255,255,.04) 0 7.5%, transparent 0 15%) 0 0 / 24px 24px,
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02));
}
#flow-root, .react-flow {
  height: 100%;
}

.right {
  grid-area: right;
  padding: 10px;
  background: var(--panel);
  border-left: 1px solid rgba(255,255,255,.06);
  overflow: auto;
}

.input, input[type="text"], input[type="url"], input[type="number"], textarea {
  width: 100%;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
}
label { font-size: 12px; color: var(--muted); display: block; margin: 8px 0 4px; }

.kv {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
}

.thumb {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
}

.badge { font-size: 11px; color: var(--muted); padding: 2px 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; }

.toast {
  position: fixed; right: 12px; bottom: 12px;
  background: var(--panel);
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  max-width: 420px;
}
.toast.success { border-color: rgba(111, 255, 182, .6); }
.toast.error { border-color: rgba(255, 107, 107, .6); }

.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.legend .item { display: inline-flex; gap: 6px; align-items: center; }
.legend .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--muted); }
.legend .dot.ok { background: var(--ok); }
.legend .dot.miss { background: var(--danger); }

.small { font-size: 12px; color: var(--muted); }