/* ═══════════ COLORING CORNER (v4.41) — gallery panel + full-screen studio ═══════════ */

/* gallery */
.panel.cb-panel { width: min(1060px, calc(100vw - 24px)); background: linear-gradient(180deg, #fffaf0, #fff3e3); }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.cb-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 10px 12px; border-radius: 20px; background: #fff;
  box-shadow: 0 4px 0 rgba(31,42,92,.10), 0 10px 24px rgba(31,42,92,.08); text-align: left; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; }
.cb-card:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 6px 0 rgba(31,42,92,.12), 0 16px 30px rgba(31,42,92,.14); }
.cb-card:nth-child(even):hover { transform: translateY(-4px) rotate(.6deg); }
.cb-paper { display: block; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: #fff; border: 2px solid #f1e6d2; }
.cb-paper img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cb-card b { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.15; color: #2b2350; margin-top: 4px; }
.cb-card small { font-size: 12px; font-weight: 700; color: #8a7fb0; }
.cb-badge { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: #2fb36a; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.cb-badge.go { background: #ff8a3d; }
.cb-card.done .cb-paper { border-color: #9fe0b8; }
.cb-empty { grid-column: 1 / -1; text-align: center; font-size: 18px; color: #6b6290; padding: 30px 0; }

/* studio frame */
.cb-studio { position: fixed; inset: 0; z-index: 60; display: grid; grid-template: "top top" auto "tools stage" 1fr "tools bottom" auto / auto 1fr;
  background: radial-gradient(1200px 600px at 70% -10%, #fff1d6 0%, transparent 60%), linear-gradient(160deg, #ffe9f2 0%, #e8f2ff 55%, #e9fbef 100%);
  font-family: var(--font); color: #2b2350; user-select: none; -webkit-user-select: none; --cur: #ff4f6d; }
.cb-studio button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; }

.cb-top { grid-area: top; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t, 0px)) 12px 8px; }
.cb-ib { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: #fff; font-size: 24px; font-weight: 800; color: #3d4fd6 !important;
  box-shadow: 0 4px 0 rgba(31,42,92,.14); transition: transform .12s; flex: none; }
.cb-ib:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(31,42,92,.14); }
.cb-title { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cb-title b { font-family: var(--font-display); font-size: clamp(17px, 2.2vw, 24px); font-weight: 700; color: #2b2350; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-verse { align-self: flex-start; max-width: 100%; text-align: left; font-size: 13px; font-weight: 700; color: #6a4bc4 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; }
.cb-verse i { font-style: normal; color: #a08bd8; }
.cb-acts { display: flex; gap: 8px; align-items: center; }
.cb-guide-btn { padding: 4px !important; overflow: hidden; }
.cb-guide-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cb-done { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px 0 14px !important; border-radius: 999px; background: linear-gradient(180deg, #4fd88a, #22b062) !important; color: #fff !important;
  font-family: var(--font-display); font-size: 19px; font-weight: 700; box-shadow: 0 5px 0 #168a4a; }
.cb-done:active { transform: translateY(3px); box-shadow: 0 2px 0 #168a4a; }
.cb-pct { font-style: normal; font-family: var(--font); font-size: 12px; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.28); }

/* tools rail */
.cb-tools { grid-area: tools; display: flex; flex-direction: column; gap: 6px; padding: 4px 8px calc(10px + var(--safe-b, 0px)) calc(10px + var(--safe-l, 0px)); overflow-y: auto; scrollbar-width: none; }
.cb-tools::-webkit-scrollbar { display: none; }
.cb-tools button { width: 70px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px 6px; border-radius: 18px; background: rgba(255,255,255,.75);
  box-shadow: 0 3px 0 rgba(31,42,92,.10); transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .15s; }
.cb-tools button span { font-size: 27px; line-height: 1.1; }
.cb-tools button small { font-size: 11px; font-weight: 800; color: #5b5486; line-height: 1.1; text-align: center; }
.cb-tools button.on { background: #fff; transform: translateX(6px) scale(1.06); box-shadow: 0 0 0 3px var(--cur), 0 6px 14px rgba(31,42,92,.18); }
.cb-tools .cb-inside { margin-top: 6px; }
.cb-tools .cb-inside.on { background: #f3eaff; box-shadow: 0 0 0 3px #9b7bff; }
.cb-tools .cb-inside[hidden] { display: none; }

/* stage + paper */
.cb-stage { grid-area: stage; position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; min-height: 0; }
.cb-page { position: relative; transform-origin: 50% 50%; border-radius: 18px; background: #fff; box-shadow: 0 2px 0 #efe3cf, 0 18px 40px rgba(43,35,80,.18), 0 0 0 6px rgba(255,255,255,.7); will-change: transform; }
.cb-page > * { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; }
.cb-line, .cb-stick, .cb-fx { pointer-events: none; }
.cb-line { -webkit-user-drag: none; }
.cb-splash { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; inset: auto; animation: cbSplash .6s ease-out forwards; }
@keyframes cbSplash { from { transform: scale(.4); opacity: .9; } to { transform: scale(5); opacity: 0; } }
.cb-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; color: #6a4bc4; background: rgba(255,255,255,.6); }
.cb-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.cb-zoom button { width: 40px; height: 40px; border-radius: 14px; background: rgba(255,255,255,.9) !important; font-size: 22px; font-weight: 800; color: #3d4fd6 !important; box-shadow: 0 3px 0 rgba(31,42,92,.12); }
.cb-guide { position: absolute; right: 12px; top: 8px; width: min(220px, 30%); padding: 8px 8px 10px; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(31,42,92,.22); transform: rotate(1.5deg); }
.cb-guide.hidden { display: none; }
.cb-guide img { width: 100%; display: block; border-radius: 12px; }
.cb-guide span { display: block; text-align: center; font-size: 12px; font-weight: 800; color: #8a7fb0; margin-top: 6px; }
.cb-guide button { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; background: #ff6f91 !important; color: #fff !important; font-weight: 800; box-shadow: 0 3px 0 #c84a6b; }

/* bottom: options + palette */
.cb-bottom { grid-area: bottom; display: flex; flex-direction: column; gap: 6px; padding: 6px 12px calc(10px + var(--safe-b, 0px)) 6px; min-width: 0; }
.cb-opts, .cb-palrow { display: flex; align-items: center; gap: 7px; overflow-x: auto; scrollbar-width: none; min-height: 44px; }
.cb-opts::-webkit-scrollbar, .cb-palrow::-webkit-scrollbar { display: none; }
.cb-ol { flex: none; font-size: 12px; font-weight: 800; color: #8a7fb0; text-transform: uppercase; letter-spacing: .6px; margin-right: 2px; }
.cb-hint { flex: none; font-size: 13px; font-weight: 700; color: #6b6290; margin-left: 6px; }
.cb-fill { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 5px !important; border-radius: 999px; background: #fff !important; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 rgba(31,42,92,.10); }
.cb-fill i { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.cb-fill[data-fill="hearts"] i::after { content: '♥'; display: grid; place-items: center; height: 100%; color: rgba(255,255,255,.85); font-size: 16px; }
.cb-fill[data-fill="stars"] i::after { content: '★'; display: grid; place-items: center; height: 100%; color: rgba(255,255,255,.85); font-size: 16px; }
.cb-fill.on { box-shadow: 0 0 0 3px var(--cur), 0 3px 0 rgba(31,42,92,.10); }
.cb-sizes { display: flex; gap: 6px; flex: none; }
.cb-size { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #fff !important; box-shadow: 0 3px 0 rgba(31,42,92,.10); }
.cb-size i { border-radius: 50%; background: var(--cur); display: block; }
.cb-size.on { box-shadow: 0 0 0 3px var(--cur); }
.cb-stk { flex: none; width: 42px; height: 42px; border-radius: 14px; background: #fff !important; font-size: 24px; box-shadow: 0 3px 0 rgba(31,42,92,.10); }
.cb-stk.on { box-shadow: 0 0 0 3px #ffc93c; transform: scale(1.08); }
.cb-paltabs { display: flex; flex-direction: column; gap: 3px; flex: none; }
.cb-paltabs button { padding: 2px 9px !important; border-radius: 999px; font-size: 11px; font-weight: 800; color: #8a7fb0 !important; background: rgba(255,255,255,.6) !important; }
.cb-paltabs button.on { background: #2b2350 !important; color: #fff !important; }
.cb-palrow .cb-paltabs { flex-direction: row; flex-wrap: wrap; width: 132px; }
.cb-pal { display: flex; gap: 7px; flex: none; }
.cb-sw { width: 40px; height: 40px; flex: none; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--c) !important;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.13), inset 0 3px 0 rgba(255,255,255,.35), 0 3px 0 rgba(31,42,92,.12); transition: transform .15s cubic-bezier(.34,1.56,.64,1); }
.cb-sw.on { transform: translateY(-5px) scale(1.12); box-shadow: inset 0 -5px 0 rgba(0,0,0,.13), 0 0 0 3px #fff, 0 0 0 6px var(--c), 0 6px 12px rgba(31,42,92,.2); }
.cb-custom { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; cursor: pointer;
  background: conic-gradient(#ff4f6d, #ffc93c, #8ed96b, #3fa2ff, #8b5cff, #ff6fb5, #ff4f6d); box-shadow: 0 3px 0 rgba(31,42,92,.12); }
.cb-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cb-custom span { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }

/* finish card + confirm */
.cb-finish, .cb-ask { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(43,35,80,.45); backdrop-filter: blur(3px); padding: 16px; }
.cb-fcard { display: flex; gap: 22px; align-items: center; max-width: 860px; width: 100%; max-height: 100%; padding: 20px; border-radius: 28px; background: #fffaf0; box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: cbPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes cbPop { from { transform: scale(.85); opacity: 0; } }
.cb-frame { flex: none; padding: 12px; border-radius: 10px; background: linear-gradient(135deg, #e9b26a, #b9783a); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.2); transform: rotate(-2deg); }
.cb-frame img { display: block; max-height: min(62vh, 520px); max-width: 38vw; border-radius: 4px; background: #fff; }
.cb-ftext h2 { font-family: var(--font-display); font-size: 34px; margin: 0 0 8px; color: #2b2350; }
.cb-fverse { font-family: var(--font-display); font-size: 21px; line-height: 1.3; color: #6a4bc4; margin: 0 0 10px; }
.cb-fverse i { font-style: normal; font-size: 15px; color: #a08bd8; }
.cb-frew { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.cb-frew:empty { display: none; }
.cb-fbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.cb-fbtns a { text-decoration: none; }
.cb-ask > div { max-width: 360px; padding: 22px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.cb-ask b { font-family: var(--font-display); font-size: 22px; }
.cb-ask p { color: #6b6290; }

/* narrow / portrait: tools become a row above the palette */
@media (max-width: 760px), (orientation: portrait) {
  .cb-studio { grid-template: "top" auto "stage" 1fr "tools" auto "bottom" auto / 1fr; }
  .cb-tools { flex-direction: row; padding: 2px 10px; overflow-x: auto; }
  .cb-tools button { width: 62px; }
  .cb-tools button.on { transform: translateY(-4px) scale(1.04); }
  .cb-tools .cb-inside { margin: 0; }
  .cb-done span { display: none; }
  .cb-fcard { flex-direction: column; text-align: center; overflow: auto; }
  .cb-frame img { max-width: 70vw; max-height: 42vh; }
  .cb-fbtns { justify-content: center; }
}
@media (max-height: 520px) {
  .cb-tools button { padding: 4px; }
  .cb-tools button span { font-size: 22px; }
  .cb-tools button small { font-size: 10px; }
  .cb-ib, .cb-done { height: 40px; } .cb-ib { width: 40px; font-size: 20px; }
  .cb-opts, .cb-palrow { min-height: 38px; }
  .cb-sw, .cb-custom { width: 34px; height: 34px; }
  .cb-fill, .cb-size, .cb-stk { height: 36px; } .cb-size, .cb-stk { width: 36px; }
}

/* Bible Stories panel: the way in */
.cb-promo { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px; padding: 12px 16px; border-radius: 22px; text-align: left; border: 0; cursor: pointer;
  background: linear-gradient(110deg, #fff0f6 0%, #fff6dc 45%, #e7f7ff 100%); box-shadow: 0 4px 0 rgba(31,42,92,.10), inset 0 0 0 2px rgba(255,255,255,.9); transition: transform .15s; }
.cb-promo:hover { transform: translateY(-2px); }
.cb-promo-ic { font-size: 36px; width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.1); }
.cb-promo b { display: block; font-family: var(--font-display); font-size: 20px; color: #2b2350; }
.cb-promo small { display: block; font-size: 13px; font-weight: 600; color: #6b6290; }
.cb-promo-go { margin-left: auto; flex: none; padding: 9px 16px; border-radius: 999px; background: #ff6fb5; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; box-shadow: 0 4px 0 #d24c91; }

/* phone held sideways: options + palette move to a column on the right so the paper gets the height */
@media (max-height: 520px) and (orientation: landscape) {
  .cb-studio { grid-template: "top top top" auto "tools stage side" 1fr / auto 1fr minmax(210px, 27vw); }
  .cb-top { padding-top: calc(4px + var(--safe-t, 0px)); padding-bottom: 4px; }
  .cb-title b { font-size: 16px; } .cb-verse { font-size: 11px; }
  .cb-tools { gap: 4px; padding-top: 2px; }
  .cb-tools button { width: 58px; padding: 3px 2px; border-radius: 14px; }
  .cb-tools button span { font-size: 20px; }
  .cb-tools button small { font-size: 9px; }
  .cb-tools button.on { transform: translateX(3px) scale(1.04); }
  .cb-bottom { grid-area: side; overflow-y: auto; padding: 2px calc(8px + var(--safe-r, 0px)) calc(8px + var(--safe-b, 0px)) 4px; gap: 8px; }
  .cb-opts, .cb-palrow { flex-wrap: wrap; overflow: visible; min-height: 0; gap: 5px; }
  .cb-ol { width: 100%; }
  .cb-hint { display: none; }
  .cb-fill { height: 32px; padding: 0 9px 0 3px !important; font-size: 12px; } .cb-fill i { width: 24px; height: 24px; }
  .cb-size, .cb-stk { width: 34px; height: 34px; }
  .cb-palrow .cb-paltabs { width: 100%; }
  .cb-pal { flex: 1 1 100%; flex-wrap: wrap; gap: 5px; }
  .cb-sizes { flex-wrap: wrap; }
  .cb-sw, .cb-custom { width: 32px; height: 32px; }
  .cb-zoom button { width: 34px; height: 34px; font-size: 18px; }
}

/* v4.42 printing */
.cb-panel .panel-head { position: relative; }
.cb-printbtn { margin-left: auto; margin-right: 52px; align-self: center; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; color: #3d4fd6; box-shadow: 0 3px 0 rgba(31,42,92,.12); white-space: nowrap; }
.cb-printbtn.hidden { display: none; }
.cb-pbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; padding: 12px 14px; border-radius: 18px; background: #eaf4ff; box-shadow: inset 0 0 0 2px #bcdcff; }
.cb-pbar.hidden { display: none; }
.cb-pbar b { font-size: 15px; } .cb-pbar small { color: #4a6a9a; font-weight: 600; flex: 1; min-width: 200px; }
.cb-pbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-card.pick { outline: 3px dashed transparent; }
.cb-card.picked { box-shadow: 0 0 0 4px #3aa0ff, 0 10px 24px rgba(31,42,92,.12); }
.cb-check { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid #3aa0ff; color: #fff; font-weight: 900; }
.cb-card.picked .cb-check { background: #3aa0ff; }
@media (max-width: 560px) { .cb-printbtn span { display: none; } }