/* Dark UI + two-row toolbar + flow control */
:root{
  --bg:#0f0f12;
  --panel:#111111;
  --panel2:#1b1b1b;
  --line:#24242a;
  --line2:#30303a;
  --text:#e8e8ec;
  --muted:#b6b6c0;
  --accent:#6aa3ff;
  --success:#6ccf56;
  --shadow:0 8px 28px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
.toolbar{position:sticky;top:0;z-index:10;display:flex;flex-direction:column;gap:.35rem;padding:.35rem .75rem;background:transparent;border-bottom:0;box-shadow:none}
.toolbar .row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.divider{
  width:2px;
  height:24px;
  background:#414142;
  box-shadow:none;
  margin:0 2px;
}
.statusbar{position:sticky;bottom:0;border-top:1px solid #262626;padding:.5rem .75rem;color:var(--muted);background:linear-gradient(#2f2f2f,#2a2a2a)}
.field{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
}
.mono{font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;opacity:.9}
.btn{
  padding:6px 9px;
  border:2px solid #414142;
  border-radius:12px;
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
  box-shadow:none;
  transition:filter .12s ease, transform .02s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 rgba(0,0,0,0.5)}
.btn.primary{border-color:var(--accent);}
.btn.success {
  border-color: #3d8a34;
  background: linear-gradient(#5db74e,#488f3b);
}
.toolbar input[type='color']{padding:0;height:28px;width:40px}
.toolbar input[type='range']{accent-color:var(--accent)}
.toolbar input[type='text'].hex{width:84px;text-transform:lowercase}
#app{height:calc(100vh - 96px);padding:1rem;overflow:auto}
#canvasWrap{display:inline-block;transform-origin:top left;background: conic-gradient(#3b3b43 25%,#2a2a2f 0 50%,#2a2a2f 0 75%,#16161a 0) 0 0/20px 20px;padding:.5rem;border: 1px solid #30303a;border-radius:.4rem}
#gridCanvas{display:block;background:#fff}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:rgba(30,30,30,.92);color:#e8e8e8;border:1px solid #444;
  padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.35);
  z-index:1000;font-size:.9rem;pointer-events:none;opacity:1;transition:opacity .2s ease;
}
.toast.hidden{opacity:0}

/* Flow control */
.flowctl {
  position: relative;
  overflow: hidden; /* contain the move cursor */
  width: 34px;
  height: 34px;
  border: 2px solid #525252;
  border-radius: 12px;
  background: var(--panel2);
  box-shadow: none;
  padding: 1px;
}
.flowctl button{position:absolute;width:50%;height:50%;background:transparent;border:0;cursor:pointer}
.flowctl button[data-flow="tl"]{top:0;left:0}
.flowctl button[data-flow="tr"]{top:0;right:0}
.flowctl button[data-flow="bl"]{bottom:0;left:0}
.flowctl button[data-flow="br"]{bottom:0;right:0}
.flowctl .cursor{position:absolute;width:18px;height:18px;border:2px solid var(--accent);border-radius:.3rem;pointer-events:none;transition:transform .12s ease,opacity .12s ease;opacity:.95}
.flowctl[data-active="tl"] .cursor{transform:translate(1px,1px)}
.flowctl[data-active="tr"] .cursor{transform:translate(13px,1px)}
.flowctl[data-active="bl"] .cursor{transform:translate(1px,13px)}
.flowctl[data-active="br"] .cursor{transform:translate(13px,13px)}

/* === COPYRIGHT LINE === */

.copyright{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #24242a;
  font-size: 11px;
  color: #8d8d98;
  text-align: center;
}


/* === PG-PRO THEME OVERRIDES ===================================== */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.toolbar{
  position:sticky;
  top:0;
  z-index:10;
  padding:8px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.toolbar .bar {
  /* PG-Pro toolbar “tool” colors */
  --line: #3b3b3b;
  --stroke: #616161;
  --stroke-2: #616161;
  --p1: var(--panel2);

  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 6px 10px 8px 10px;
  border-radius: 12px;
  background: var(--p1);
  border: 1px solid var(--line);
  box-shadow: none;
}

.toolbar .row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:8px;
}

.brandLogo{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:block;
  /* no border radius on logos */
}

.brandName{
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--text);
  white-space:nowrap;
}

.divider{
  width:2px;
  height:24px;
  background:#414142;
  box-shadow:none;
  margin:0 2px;
}

.field{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
}

.field span{ color:var(--muted); }

/* Flow control (condensed + PG-Pro surfaces) */
.flowctl {
  position: relative;
  overflow: hidden; /* contain the move cursor */
  width: 34px;
  height: 34px;
  border: 2px solid #525252;
  border-radius: 12px;
  background: var(--panel2);
  box-shadow: none;
  padding: 1px;
}
.flowctl .cursor{
  width:14px;
  height:14px;
  border:2px solid var(--accent);
  border-radius:6px;
}
.flowctl[data-active="tl"] .cursor{transform:translate(1px,1px)}
.flowctl[data-active="tr"] .cursor{transform:translate(13px,1px)}
.flowctl[data-active="bl"] .cursor{transform:translate(1px,13px)}
.flowctl[data-active="br"] .cursor{transform:translate(13px,13px)}

input, select, textarea{
  color:var(--text);
}

.toolbar input[type='number'],
.toolbar input[type='text'],
.toolbar select{
  background:#0f0f12;
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px 8px;
  height:30px;
}

.toolbar input[type='color']{
  height:30px;
  width:40px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0f0f12;
}

.toolbar input[type='range']{
  accent-color:var(--accent);
}

.btn{
  padding:6px 9px;
  border:2px solid #414142;
  border-radius:12px;
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
  box-shadow:none;
  transition:filter .12s ease, transform .02s ease;
}

/* Slightly more compact toolbar text so we stay at two rows */
.toolbar{ font-size:13px; }

.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); }

.btn.primary{border-color:var(--accent);}

.btn.success{
  border-color:#3d8a34;
}

.btn.subtle{
  opacity:.9;
}

#app{
  flex:1;
  height:auto;
  padding:12px;
  overflow:auto;
}

#canvasWrap{
  display:inline-block;
  transform-origin:top left;
  background: conic-gradient(#2a2a32 25%, #17171d 0 50%, #17171d 0 75%, #0f0f12 0) 0 0/20px 20px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
}

.statusbar{
  position:sticky;
  bottom:0;
  border-top:1px solid var(--line);
  padding:10px 12px;
  color:var(--muted);
  background:var(--panel);
}

.copyright{
  opacity:.8;
  font-size:11px;
}