:root{
  --page: #f6f7fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-ink: #fff;
  --radius: 12px;
  --shadow: 0 6px 26px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--page); color:var(--text);
  font: 400 14px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#0b0c10; color:#f8fafc; border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{ font-weight:700; letter-spacing:.3px; }
button{ appearance:none; border:0; border-radius:10px; padding:.6rem .9rem; font-weight:600; cursor:pointer; }
button.primary{ background:var(--accent); color:var(--accent-ink); box-shadow: 0 6px 18px rgba(37,99,235,.25); }
button.primary:hover{ transform: translateY(-1px); }
button.secondary{ background:#eef2ff; color:#1e293b; }
button.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.2); }

/* Main layout with sticky sidebar */
.main-layout{
  max-width: 1400px; margin: 20px auto; padding: 0 16px;
  display:grid; grid-template-columns: 360px 1fr; gap: 20px;
}
@media (max-width: 1199px){ .main-layout{ grid-template-columns: 320px 1fr; } }
@media (max-width: 767px){ .main-layout{ grid-template-columns: 1fr; } }

.sidebar{
  position: sticky; top: 16px; align-self: start; display:flex; flex-direction:column; gap:14px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow); padding:16px;
}
.h1{ margin:0; font-size: 1.25rem; line-height:1.2; }
.sub{ margin:0; color:#64748b; font-size:.9rem; }

.lbl{ display:block; font-weight:600; margin:.25rem 0 .25rem; }
.small{ font-size:.9rem; color:#475569; }
.row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

select, input[type="number"], input[type="text"]{
  border:1px solid var(--border); border-radius:10px; padding:.55rem .6rem;
  font: 400 14px/1 Inter, system-ui, sans-serif; background:#fff; color:var(--text);
}
textarea{
  width:100%; min-height:120px; resize:vertical; border-radius:10px; border:1px solid var(--border); padding:.75rem;
  font: 400 14px/1.5 Inter, system-ui, sans-serif; background:#fff; color:var(--text);
}

/* Palette chips (inline, wrap; horizontal scroll on mobile) */
.palette-group{ display:flex; gap:8px 10px; flex-wrap:wrap; border:none }
@media (max-width: 767px){
  .palette-group{ flex-wrap:nowrap; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:4px; }
  .palette-item{ scroll-snap-align:start; }
}
.palette-item{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; background:#fff;
  border:1px solid var(--border); border-radius:8px; cursor:pointer; user-select:none;
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.palette-item:hover{ transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.palette-item input{ position:absolute; opacity:0; pointer-events:none; }
.palette-item input:checked + .swatch{ outline:2px solid var(--accent); outline-offset:2px; }
.palette-item .pname{ font-size:.9rem; color:#111827; }
.swatch{ width:54px; height:18px; border-radius:4px; border:1px solid rgba(0,0,0,.1); display:inline-block; }
.swatch[data-p="viridis"]  { background: linear-gradient(90deg,#440154,#46327E,#365C8D,#277F8E,#1FA187,#4AC16D,#A0DA39,#FDE725); }
.swatch[data-p="plasma"]   { background: linear-gradient(90deg,#0D0887,#6A00A8,#B12A90,#E16462,#FCA636,#F0F921); }
.swatch[data-p="cividis"]  { background: linear-gradient(90deg,#00204C,#193060,#36476B,#516F6B,#7B986A,#B9C369,#FFEA46); }
.swatch[data-p="warm"]     { background: linear-gradient(90deg,#8A2BE2,#FF7F50,#FF6B6B,#FFD166,#F2A65A,#D7263D); }
.swatch[data-p="cool"]     { background: linear-gradient(90deg,#00B5AD,#00A6FB,#6DC0D5,#8D99AE,#A29BFE,#74B9FF); }
.swatch[data-p="mono"]     { background: linear-gradient(90deg,#111111,#333333,#555555,#777777,#999999,#BBBBBB,#DDDDDD); }
.swatch[data-p="contrast"] { background: linear-gradient(90deg,#000000,#FF0000,#00FF00,#0000FF,#FFFF00,#FF00FF,#00FFFF,#FFFFFF); }

/* Sliders flex with wrap */
.slider-row{ display:flex; gap:12px; flex-wrap:wrap; }
.tool{ display:flex; flex-direction:column; gap:.35rem; min-width: 220px; }
.tool-label{ font-size:.85rem; color:#334155; }
.slider{ align-items:center; }
.slider input[type="range"]{ width:100%; }
.slider output{ min-width:64px; text-align:right; font-variant-numeric: tabular-nums; color:#111827; }

/* Options grid */
.opts summary{ font-weight:600; cursor:pointer; padding:.25rem 0; }
.grid-opts{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; margin-top:.5rem; }
.grid-opts .full{ grid-column: 1 / -1; }

/* Sticky actions (sidebar footer) */
.actions-sticky{
  position: sticky; bottom: 8px; padding-top:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 40%);
  display:flex; gap:8px; justify-content:space-between;
}

/* Canvas card */
.canvas-card{ display:flex; flex-direction:column; gap:14px; }
.canvas-wrap{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: var(--shadow); padding:6px; width:100%; height:72vh; min-height:360px;
  display:flex; align-items:center; justify-content:center;
}
#cloudCanvas{ width:100%; height:100%; display:block; }
#resizeHandle{
  position:absolute; right:8px; bottom:8px; width:16px; height:16px; cursor:nwse-resize;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); opacity:.5;
}

.footer{
  color:#64748b; font-size:.9rem; display:flex; gap:.5rem; align-items:center; justify-content:center; padding:8px 0 16px;
}
.footer a{ color:#475569; }
.err{ color:#b91c1c; font-weight:600; }
.hidden{ display:none !important; }

.hint{ margin: 8px 0 0; color:#6b7280; font-size:.9rem; }
.input-mode{ display:flex; gap:16px; }