/* CREATIVE CANVAS — scoped to :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) */
/* Window size lives here (Feed pattern); INITIAL_POSITIONS.canvas sets only left/top. */
.win.w-canvas { width: 1000px; height: 680px; }
.w-canvas .win-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.w-canvas #canvas-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }

:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-picker {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  background: #14121c; color: #fff; padding: 22px; gap: 18px;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-doors { display: flex; gap: 18px; flex: 1; min-height: 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-door {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; border: 3px solid #0a0a0a; box-shadow: 8px 8px 0 #0a0a0a;
  cursor: pointer; font-family: 'Geologica', sans-serif; color: #0a0a0a;
  transition: transform .08s;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-door:hover { transform: translate(-2px,-2px); box-shadow: 10px 10px 0 #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-door:active { transform: translate(4px,4px); box-shadow: 4px 4px 0 #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-door-studio { background: #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-door-play   { background: #FF2E7E; color: #fff; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-door-ico  { font-size: 46px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-door-name { font-weight: 900; font-size: 22px; letter-spacing: 1px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-door-sub  { font-size: 11px; font-family: 'JetBrains Mono', monospace; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gallery-strip { min-height: 70px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  background: #2a2733;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-display {
  display: block; background: #fff; box-shadow: 0 0 0 1px #0a0a0a, 4px 4px 0 #0a0a0a;
  image-rendering: auto; touch-action: none;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-viewport.cc-checker {
  background-image:
    linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%),
    linear-gradient(45deg,#bbb 25%,#fff 25%,#fff 75%,#bbb 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-viewport.cc-checker .cc-display { background: transparent; }

:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-mode { display: flex; flex-direction: column; flex: 1; min-height: 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stage-host { flex: 1; min-height: 0; display: flex; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stage-host > div { flex: 1; display: flex; } /* host wrapper from engine */

:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-tb {
  background: #222; color: #fff; border: 2px solid #000; font-weight: 700;
  font-size: 13px; padding: 5px 9px; cursor: pointer; min-width: 32px;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-tb.cc-on { background: #C6F542; color: #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-tb.cc-primary { background: #16E0E0; color: #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sep { width: 2px; height: 24px; background: #444; margin: 0 4px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-spacer { flex: 1; }

/* Gallery strip (picker) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-strip-thumb { width: 84px; height: 60px; border: 2px solid #0a0a0a; box-shadow: 3px 3px 0 #0a0a0a; cursor: pointer; padding: 0; background:#fff; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-strip-all { background:#C6F542; border:2px solid #0a0a0a; font-weight:900; padding:6px 10px; cursor:pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-strip-empty { color:#aaa; font-family:'JetBrains Mono',monospace; font-size:12px; }

/* Full gallery view */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal { height:100%; display:flex; flex-direction:column; background:#14121c; color:#fff; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-head { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:2px solid #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-head h3 { margin:0; font-family:'Geologica',sans-serif; font-weight:900; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-grid { flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; padding:14px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-card { border:2px solid #0a0a0a; box-shadow:4px 4px 0 #0a0a0a; background:#1c1a26; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-open { width:100%; height:120px; border:0; border-bottom:2px solid #0a0a0a; cursor:pointer; background:#fff; padding:0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-open img { width:100%; height:100%; object-fit:cover; display:block; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-meta { display:flex; justify-content:space-between; padding:6px 8px; font-size:12px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-title { font-weight:700; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-mode { color:#C6F542; font-family:'JetBrains Mono',monospace; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-acts { display:flex; flex-wrap:wrap; gap:4px; padding:0 8px 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-acts button { font-size:10px; font-weight:700; padding:3px 6px; border:2px solid #000; background:#222; color:#fff; cursor:pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-gal-empty { color:#aaa; padding:20px; }

/* Studio shell: rail + main + panels */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-studio { display: grid; grid-template-columns: 48px 1fr 0; grid-template-rows: 1fr; height: 100%; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-studio.has-panels { grid-template-columns: 48px 1fr 230px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-rail { background: #0a0a0a; display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; overflow-y: auto; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-tool { width: 40px; height: 40px; border: 2px solid #000; background: #222; color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-tool.cc-on { background: #C6F542; color: #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ── Play Zone 2.0 floating shell (spec D5) — full-bleed stage, chrome floats over it.
   Approved style deviation: rounded corners + soft shadows INSIDE Play Zone only. ── */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-play { position: relative; height: 100%; overflow: hidden; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-play .cc-stage-host { position: absolute; inset: 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pcard { position: absolute; z-index: 30; background: #fff; border: 1px solid #e3e3de; border-radius: 16px; box-shadow: 0 6px 24px rgba(10,10,10,.16); }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-prail { left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; padding: 8px; max-height: calc(100% - 28px); overflow-y: auto; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-ptool { width: 56px; border: none; border-radius: 12px; background: transparent; color: #3a3a40; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 8px 'JetBrains Mono', monospace; padding: 7px 2px 5px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-ptool:hover { background: #f0f0ea; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-ptool svg { width: 24px; height: 24px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-ptool.cc-on { background: #0a0a0a; color: #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pcheck { display: flex; align-items: center; gap: 6px; font: 700 10px 'JetBrains Mono', monospace; color: #3a3a40; margin-top: 10px; cursor: pointer; flex-wrap: wrap; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pcheck-sub { color: #8a8a92; font-weight: 500; }
/* slide-out panel (one per tool, opens beside the rail; spec D6 anatomy: head → body → pinned footer) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide { left: 92px; top: 50%; transform: translateY(-50%); width: 272px; max-height: calc(100% - 28px); display: flex; flex-direction: column; padding: 12px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide[hidden] { display: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide-head { display: flex; align-items: center; font: 800 11px 'JetBrains Mono', monospace; letter-spacing: .08em; color: #6a6a72; margin: 0 2px 8px; flex: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide-x { margin-left: auto; width: 26px; height: 26px; border: none; border-radius: 7px; background: #f0f0ea; color: #6a6a72; cursor: pointer; display: flex; align-items: center; justify-content: center; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide-x svg { width: 14px; height: 14px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide-body { overflow-y: auto; min-height: 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide-foot { flex: none; border-top: 1.5px solid #ececE6; margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide-foot[hidden] { display: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pfield { display: flex; align-items: center; gap: 8px; font: 800 10px 'JetBrains Mono', monospace; color: #6a6a72; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pfield input[type="range"] { flex: 1; accent-color: #16E0E0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pfield[hidden] { display: none; }
/* top-right action pill */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pill { top: 12px; right: 12px; display: flex; align-items: center; gap: 2px; padding: 6px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pill button { width: 38px; height: 38px; border: none; border-radius: 10px; background: transparent; color: #3a3a40; cursor: pointer; display: flex; align-items: center; justify-content: center; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pill button:hover { background: #f0f0ea; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pill button svg { width: 20px; height: 20px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pill button.cc-primary { background: #0a0a0a; color: #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pill button.cc-darkon { background: #0a0a0a; color: #FFB800; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pill .cc-vsep { width: 1.5px; height: 24px; background: #ececE6; margin: 0 3px; }
/* bottom-right color strip */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pcolors { bottom: 12px; right: 12px; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 20px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pswatch { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px #d0d0ca; cursor: pointer; padding: 0; flex: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pswatch.cc-on { box-shadow: 0 0 0 2.5px #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pcustom { position: relative; width: 28px; height: 28px; border-radius: 50%; flex: none; cursor: pointer; background: conic-gradient(#FF2E7E,#FFB800,#C6F542,#16E0E0,#8A6CFF,#FF2E7E); box-shadow: 0 0 0 1.5px #d0d0ca; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pcustom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
/* narrow windows / mobile: panel becomes a sheet, rail compresses (spec §3) */
@media (max-width: 760px) {
  :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-prail { left: 8px; padding: 6px; }
  :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-ptool { width: 48px; }
  :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide { left: 68px; right: 8px; width: auto; top: auto; bottom: 8px; transform: none; max-height: 70%; }
  :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pcolors { bottom: 12px; right: 8px; max-width: calc(100% - 80px); overflow-x: auto; }
}
/* play panel CONTENT, restyled for white cards (was the dark right column) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-phead { font-weight: 800; letter-spacing: .08em; color: #6a6a72; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-pslide-body .cc-ppanel > .cc-phead:first-child { display: none; }  /* slide header already names the tool */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-ppanel { padding: 2px; color: #3a3a40; font: 700 11px 'JetBrains Mono', monospace; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stamptabs { display: flex; gap: 4px; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stamptabs button { flex: 1; background: #fafaf6; color: #5a5a62; border: 1.5px solid #e3e3de; border-radius: 8px; font: 700 9px 'JetBrains Mono', monospace; padding: 4px 2px; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stamptabs button.cc-on { background: #0a0a0a; color: #C6F542; border-color: #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stampgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stamptile { aspect-ratio: 1; background: #fff; border: 2px solid #0a0a0a; cursor: pointer; padding: 4px; color: #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stamptile svg { width: 100%; height: 100%; display: block; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-stamptile.cc-on { outline: 2px solid #C6F542; outline-offset: 1px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-prow { display: flex; align-items: center; gap: 6px; font-size: 10px; margin-bottom: 6px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-prow input[type=range] { flex: 1; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-magicgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-magicbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fafaf6; color: #4a4a52; border: 2px solid #e3e3de; border-radius: 10px; font: 700 9px 'JetBrains Mono', monospace; padding: 8px 2px; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-magicbtn .cc-pico { font-size: 20px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-magicbtn.cc-on { border-color: #0a0a0a; background: #0a0a0a; color: #C6F542; }
/* Tap Magic v2 (Phase 2): effect tiles use drawn SVG icons; SURPRISE ME pinned below the grid */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-magicbtn .cc-pico svg { width: 22px; height: 22px; display: block; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-fxsurprise { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 8px; background: #fff; color: #FF2E7E; border: 2px dashed #FF2E7E; border-radius: 10px; font: 800 10px 'JetBrains Mono', monospace; letter-spacing: .06em; padding: 9px 2px; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-fxsurprise svg { width: 18px; height: 18px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-fxsurprise.cc-on { background: #FF2E7E; color: #fff; border-style: solid; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-seg2 { display: flex; gap: 4px; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-seg2 button { flex: 1; background: #fafaf6; color: #5a5a62; border: 1.5px solid #e3e3de; border-radius: 8px; font: 700 9px 'JetBrains Mono', monospace; padding: 5px 2px; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-seg2 button.cc-on { background: #16E0E0; color: #0a0a0a; border-color: #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cbnswatch { width: 30px; height: 30px; border: 2px solid #0a0a0a; cursor: pointer; font: 800 13px 'JetBrains Mono', monospace; color: #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cbnswatch.cc-on { outline: 2px solid #C6F542; outline-offset: 1px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-options { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; background: #0a0a0a; color: #fff; padding: 6px 8px; border-bottom: 2px solid #C6F542; flex-shrink: 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-field { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; color: #fff; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-panels { background: #14121c; overflow-y: auto; }

/* Collapsible panel sections (accordion) — fold the tall right column */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-fold-h { cursor: pointer; user-select: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-fold-caret { display: inline-block; width: 13px; font-size: 9px; opacity: .55; vertical-align: middle; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-fold-caret::before { content: '\25BE'; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-folded .cc-fold-caret::before { content: '\25B8'; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-folded > *:not(.cc-fold-h) { display: none !important; }

/* Brush panel (2a-2) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bpanel { padding: 10px; color: #e8e6f0; font: 600 11px/1.3 'JetBrains Mono', monospace; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bhead { font-weight: 800; letter-spacing: .08em; color: #C6F542; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-btypes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 12px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-btype { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 3px; background: #20202c; color: #cfcde0; border: 2px solid #2c2c3a; cursor: pointer; font: 600 9px 'JetBrains Mono', monospace; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-btype span { font-size: 16px; line-height: 1; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-btype:hover { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-btype.cc-on { background: #C6F542; color: #0a0a0a; border-color: #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-srow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; margin: 7px 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-srow input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: #16E0E0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-srow span { color: #16E0E0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-chk { display: flex; align-items: center; gap: 6px; margin: 8px 0; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-chk input { accent-color: #C6F542; }

/* Color panel (2b) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cpanel { padding: 10px 10px 4px; color: #e8e6f0; font: 600 11px/1.3 'JetBrains Mono', monospace; border-bottom: 2px solid #2c2c3a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-chead { font-weight: 800; letter-spacing: .08em; color: #16E0E0; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sv { display: block; width: 100%; height: auto; border: 2px solid #2c2c3a; cursor: crosshair; touch-action: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-hue { display: block; width: 100%; height: 14px; margin-top: 6px; border: 2px solid #2c2c3a; cursor: ew-resize; touch-action: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cfields { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; margin: 8px 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cfields label { display: flex; align-items: center; gap: 2px; color: #9b98ad; font-size: 9px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cfields .cc-hexf { grid-column: 1 / -1; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cfields input { width: 100%; min-width: 0; background: #20202c; border: 1px solid #2c2c3a; color: #fff; font: 600 10px 'JetBrains Mono', monospace; padding: 3px 4px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cfields input::-webkit-outer-spin-button, :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-cfields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-fgbg { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-fg, :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bg2 { width: 30px; height: 24px; border: 2px solid #0a0a0a; outline: 1px solid #2c2c3a; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-swap { background: #20202c; color: #16E0E0; border: 2px solid #2c2c3a; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 7px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-swap:hover { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sw-head { display: flex; align-items: center; justify-content: space-between; color: #9b98ad; font-size: 9px; letter-spacing: .06em; margin: 6px 0 4px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-addsw { background: #20202c; color: #C6F542; border: 2px solid #2c2c3a; cursor: pointer; font-weight: 800; line-height: 1; padding: 0 6px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-addsw:hover { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 4px; min-height: 16px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sw { aspect-ratio: 1; border: 1px solid #0a0a0a; outline: 1px solid #2c2c3a; cursor: pointer; padding: 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sw:hover { outline-color: #FF2E7E; transform: scale(1.12); }

/* Layers panel (2c) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lpanel { padding: 10px; color: #e8e6f0; font: 600 11px/1.3 'JetBrains Mono', monospace; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lhead { display: flex; align-items: center; justify-content: flex-start; font-weight: 800; letter-spacing: .08em; color: #8A6CFF; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lhead .cc-lbtns { margin-left: auto; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lbtns { display: flex; gap: 3px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lbtns button { background: #20202c; color: #cfcde0; border: 2px solid #2c2c3a; cursor: pointer; font-size: 12px; line-height: 1; padding: 3px 6px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lbtns button:hover { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lctrls { border: 2px solid #2c2c3a; padding: 6px; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lblend { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; margin-top: 4px; color: #9b98ad; font-size: 10px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lblend select { background: #20202c; color: #fff; border: 1px solid #2c2c3a; font: 600 10px 'JetBrains Mono', monospace; padding: 2px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lmove { display: flex; gap: 4px; margin-top: 6px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lmove button { flex: 1; background: #20202c; color: #cfcde0; border: 2px solid #2c2c3a; cursor: pointer; padding: 2px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lmove button:hover { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-llist { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lrow { display: grid; grid-template-columns: 22px 30px 1fr 20px 22px; align-items: center; gap: 5px; padding: 3px; background: #1a1a24; border: 2px solid transparent; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lrow.cc-on { border-color: #8A6CFF; background: #241f33; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-leye, :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-llock, :is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lclip { background: none; border: none; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; color: #cfcde0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lclip.cc-clipon { color: #16E0E0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lrow.cc-clipped { background: #1f2230; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lrow.cc-clipped .cc-lname::before { content: '\21B3\00A0'; opacity: .6; color: #16E0E0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lthumb { width: 30px; height: 24px; object-fit: cover; border: 1px solid #2c2c3a; background: #fff; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }

/* Selection & transform (2d) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-spanel { padding: 10px; color: #e8e6f0; font: 600 11px/1.3 'JetBrains Mono', monospace; border-top: 2px solid #2c2c3a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-shead { font-weight: 800; letter-spacing: .08em; color: #FFB800; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sbtns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sbtns button { background: #20202c; color: #cfcde0; border: 2px solid #2c2c3a; cursor: pointer; font: 600 9px 'JetBrains Mono', monospace; padding: 6px 2px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sbtns button:hover { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sbtns button[data-a=""] { visibility: hidden; pointer-events: none; }

/* Shapes / gradient / text panels (2e) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-xpanel { padding: 10px; color: #e8e6f0; font: 600 11px/1.3 'JetBrains Mono', monospace; border-top: 2px solid #2c2c3a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-xhead { font-weight: 800; letter-spacing: .08em; margin-bottom: 6px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-xhead.shape { color: #FF6B35; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-xhead.grad { color: #16E0E0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-xhead.text { color: #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-xhint { color: #9b98ad; font-size: 9px; line-height: 1.3; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-seg { display: flex; gap: 4px; margin: 6px 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-seg button { flex: 1; background: #20202c; color: #cfcde0; border: 2px solid #2c2c3a; cursor: pointer; font: 700 11px 'JetBrains Mono', monospace; padding: 5px 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-seg button:hover { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-seg button.cc-on { background: #C6F542; color: #0a0a0a; border-color: #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-xpanel select { width: 100%; background: #20202c; color: #fff; border: 1px solid #2c2c3a; font: 600 11px 'JetBrains Mono', monospace; padding: 4px; margin-bottom: 2px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-textbox { position: absolute; z-index: 6; margin: 0; padding: 0; border: 1px dashed #16E0E0; background: transparent; outline: none; resize: none; overflow: hidden; white-space: pre; min-width: 8px; pointer-events: auto; }

/* Filters panel + export menu (2f) */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-xhead.filt { color: #FFB800; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-filtbtns { display: flex; gap: 6px; margin-top: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-filtbtns button { flex: 1; background: #20202c; color: #cfcde0; border: 2px solid #2c2c3a; cursor: pointer; font: 700 11px 'JetBrains Mono', monospace; padding: 6px 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-filtbtns button:hover:not(:disabled) { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-filtbtns button.cc-primary { background: #16E0E0; color: #0a0a0a; border-color: #16E0E0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-filtbtns button:disabled { opacity: .4; cursor: default; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-export-wrap { position: relative; display: inline-flex; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-exportmenu { position: absolute; right: 0; top: calc(100% + 4px); background: #14121c; border: 2px solid #2c2c3a; display: flex; flex-direction: column; min-width: 120px; z-index: 20; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-exportmenu[hidden] { display: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-exportmenu button { background: none; color: #fff; border: none; border-bottom: 1px solid #2c2c3a; cursor: pointer; font: 600 11px 'JetBrains Mono', monospace; padding: 8px 12px; text-align: left; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-exportmenu button:last-child { border-bottom: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-exportmenu button:hover { background: #C6F542; color: #0a0a0a; }

/* New-canvas dialog */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-newdlg { height:100%; background:#14121c; color:#fff; display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; padding:24px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-newdlg h2 { font-weight:900; letter-spacing:1px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-preset-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-preset { display:flex; flex-direction:column; align-items:center; gap:2px; background:#222; color:#fff; border:2px solid #000; box-shadow:3px 3px 0 #000; padding:12px 16px; cursor:pointer; font-weight:700; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-preset small { font-size:9px; opacity:.7; font-family:'JetBrains Mono',monospace; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-preset.cc-on { background:#C6F542; color:#0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-custom { display:flex; align-items:center; gap:6px; color:#fff; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-custom[hidden] { display:none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-custom input { width:80px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bg-row { display:flex; align-items:center; gap:8px; font-size:13px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bg { background:#222;color:#fff;border:2px solid #000;padding:6px 10px;cursor:pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bg.cc-on { background:#16E0E0;color:#0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bg-color { display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-size:13px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-newdlg-actions { display:flex; gap:10px; }

/* Save toast */
#os-toast {
  position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: #C6F542; color: #0a0a0a; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; padding: 8px 18px; border: 2px solid #0a0a0a; box-shadow: 3px 3px 0 #0a0a0a;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 9999;
}
#os-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Phase 3 standalone mini-apps: COLORING + COLOR BY NUMBER ─────────────── */
.win.w-coloring, .win.w-cbn { width: 1000px; height: 680px; }
.w-coloring .win-body, .w-cbn .win-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.w-coloring #coloring-root, .w-cbn #cbn-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }

:is([data-app="coloring"],[data-app="cbn"]) .cc-mini-picker { flex: 1; overflow: auto; padding: 26px 30px; background: #eceae3; }
:is([data-app="coloring"],[data-app="cbn"]) .cc-mini-picker h2 { font-family: 'Geologica', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 1px; margin: 0 0 18px; color: #0a0a0a; }
:is([data-app="coloring"],[data-app="cbn"]) .cc-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
:is([data-app="coloring"],[data-app="cbn"]) .cc-minitile { background: #fff; border: 1px solid #e3e3de; border-radius: 16px; box-shadow: 0 6px 24px rgba(10,10,10,.12); cursor: pointer; padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; transition: transform .12s ease, box-shadow .12s ease; }
:is([data-app="coloring"],[data-app="cbn"]) .cc-minitile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10,10,10,.18); }
:is([data-app="coloring"],[data-app="cbn"]) .cc-minitile img,
:is([data-app="coloring"],[data-app="cbn"]) .cc-minitile canvas { width: 100%; height: 150px; object-fit: contain; border-radius: 10px; background: #fff; }
:is([data-app="coloring"],[data-app="cbn"]) .cc-minitile span { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: #0a0a0a; }

/* numbered CBN swatches inside the floating color strip */
:is([data-app="coloring"],[data-app="cbn"]) .cc-pcolors .cc-cbnswatch { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px #d0d0ca; font: 800 15px 'JetBrains Mono', monospace; color: #0a0a0a; text-shadow: 0 1px 2px rgba(255,255,255,.75); cursor: pointer; flex: none; outline: none; }
:is([data-app="coloring"],[data-app="cbn"]) .cc-pcolors .cc-cbnswatch.cc-on { box-shadow: 0 0 0 2.5px #0a0a0a; }

/* ── Phase 4 BUILD-A-BRUSH panel ──────────────────────────────────────────── */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbnew { width: 100%; background: #0a0a0a; color: #C6F542; border: none; border-radius: 10px; font: 800 11px 'JetBrains Mono', monospace; letter-spacing: .04em; padding: 10px; cursor: pointer; margin-bottom: 10px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbnew:hover { background: #222; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbtile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: #fafaf6; border: 2px solid #e3e3de; border-radius: 10px; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbtile.cc-on { border-color: #0a0a0a; box-shadow: 0 0 0 2px #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbtile img { width: 80%; height: 80%; object-fit: contain; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbdel { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #FF2E7E; color: #fff; font: 800 10px Inter, sans-serif; cursor: pointer; line-height: 1; padding: 0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbshapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbcolors { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbstage { display: flex; justify-content: center; margin-bottom: 8px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) #cc-bbcanvas { width: 224px; height: 224px; background: #fafaf6 radial-gradient(circle, #e7e7e0 1px, transparent 1.5px) 0 0 / 14px 14px; border: 2px solid #e3e3de; border-radius: 12px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) #cc-bbcanvas.cc-bbdraw { cursor: crosshair; border-color: #0a0a0a; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbrow { display: flex; gap: 8px; margin-bottom: 6px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbrow button { flex: 1; border: 2px solid #e3e3de; border-radius: 10px; background: #fafaf6; color: #4a4a52; font: 800 11px 'JetBrains Mono', monospace; padding: 9px; cursor: pointer; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-bbrow .cc-bbdone { background: #0a0a0a; color: #C6F542; border-color: #0a0a0a; }