/* Rangoo "Colour online" console */
html.cc-on,html.cc-on body{overflow:hidden;overscroll-behavior:none}
.cc{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;background:#EEEEE8;color:var(--ink,#16202C);font:500 14px/1.4 var(--ui,system-ui,sans-serif);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);animation:ccIn .25s cubic-bezier(.2,.7,.2,1) both}
.cc[hidden]{display:none}
.cc>*,.cc-main>*,.cc-bar>*{min-width:0}
@keyframes ccIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.cc button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cc button:disabled{opacity:.35;cursor:default}
.cc :focus-visible{outline:2px solid var(--accent,#0E5E6F);outline-offset:2px}

/* top bar */
.cc-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line,#E7E7E1)}
.cc-ib{width:42px;height:42px;border-radius:12px;border:1px solid var(--line,#E7E7E1);background:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.cc-ib:hover:not(:disabled){background:#F4F4F0}
.cc-title{min-width:0;flex:1;display:flex;flex-direction:column}
.cc-title b{font:600 16px/1.25 var(--ui,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-title span{font-size:12.5px;color:var(--muted,#5A6573)}
.cc-acts{display:flex;gap:8px;align-items:center}
.cc-save{height:42px;padding:0 16px;border:0;border-radius:12px;background:var(--accent,#0E5E6F);color:#fff !important;font-weight:600 !important;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 16px rgba(14,94,111,.2)}
.cc-save:hover:not(:disabled){background:var(--accent-2,#0A4855)}

/* canvas area */
.cc-main{display:grid;grid-template-columns:96px minmax(0,1fr);min-height:0}
.cc-pages{display:flex;flex-direction:column;gap:10px;padding:14px 10px;overflow:auto;background:#F6F6F2;border-right:1px solid var(--line,#E7E7E1)}
.cc-pg{position:relative;flex-shrink:0;width:76px;aspect-ratio:300/380;border-radius:8px;border:1px solid var(--line,#E7E7E1);background:#fff;padding:0;overflow:hidden;transition:transform .15s,box-shadow .15s}
.cc-pg img{display:block;width:100%;height:100%}
.cc-pg b{position:absolute;left:4px;bottom:4px;min-width:18px;height:18px;border-radius:9px;background:rgba(22,32,44,.75);color:#fff;font:600 11px/18px var(--ui,system-ui);text-align:center;padding:0 5px}
.cc-pg.done::after{content:"";position:absolute;top:5px;right:5px;width:10px;height:10px;border-radius:50%;background:#F28C28;box-shadow:0 0 0 2px #fff}
.cc-pg[aria-selected="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent,#0E5E6F)}
.cc-pg:hover{transform:translateY(-1px)}
.cc-view{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cc-canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.cc-text{flex-shrink:0;display:flex;gap:10px;align-items:flex-start;margin:0 auto 12px;width:min(640px,calc(100% - 24px));padding:10px 14px;background:#fff;border:1px solid var(--line,#E7E7E1);border-radius:14px;box-shadow:0 1px 2px rgba(22,32,44,.04)}
.cc-pn{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--accent,#0E5E6F);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 12px var(--ui,system-ui);margin-top:2px}
.cc-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-main-tx{font:600 17px/1.5 var(--ui,system-ui);color:var(--ink,#16202C)}
.cc-main-tx .nm{color:var(--accent,#0E5E6F)}
.cc-gl{font:italic 400 13px/1.45 var(--ui,system-ui);color:var(--muted,#5A6573)}
.cc-gl .nm{color:inherit}
.cc-meta{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#fff;border-bottom:1px solid var(--line,#E7E7E1)}
.cc-story{display:flex;align-items:center;gap:10px;min-width:0;max-width:360px;flex:1 1 auto;height:52px;padding:4px 12px 4px 4px;border:1px solid var(--line,#E7E7E1);border-radius:12px;background:#FAFAF7;text-align:left;transition:border-color .15s}
.cc-story:hover,.cc-story[aria-expanded="true"]{border-color:var(--accent,#0E5E6F);background:#fff}
.cc-sth{width:42px;height:42px;border-radius:9px;overflow:hidden;flex-shrink:0;display:block}
.cc-sth svg{display:block;width:100%;height:100%}
.cc-stt{display:flex;flex-direction:column;min-width:0;flex:1}
.cc-stt small{font:600 10.5px var(--ui,system-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--accent,#0E5E6F)}
.cc-stt b{font:600 14px/1.25 var(--ui,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-story i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);flex-shrink:0;color:var(--muted,#5A6573);transition:transform .2s}
.cc-story[aria-expanded="true"] i{transform:translateY(2px) rotate(-135deg)}
.cc-name{display:flex;align-items:center;gap:8px;flex:0 1 300px;min-width:0;height:52px;padding:0 6px 0 12px;border:1px solid var(--line-strong,#D5D6CF);border-radius:12px;background:#fff}
.cc-name:focus-within{border-color:var(--accent,#0E5E6F);box-shadow:0 0 0 3px rgba(14,94,111,.12)}
.cc-name span{font:600 11px var(--ui,system-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#5A6573);white-space:nowrap}
.cc-name input{flex:1;min-width:0;height:40px;border:0;outline:0;background:none;font:600 17px var(--ui,system-ui);color:var(--ink,#16202C)}
.cc-main{position:relative}
.cc-sp{position:absolute;z-index:5;left:14px;top:8px;width:min(560px,calc(100% - 28px));max-height:calc(100% - 16px);margin:0}
.cc-sp .sp-grid{flex:1;min-height:0;max-height:none}
.cc-sp .sp-head,.cc-sp .sp-chips{flex-shrink:0}
.cc-sp[hidden]{display:none}
.cc-stage{position:relative;background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(22,32,44,.08),0 18px 40px rgba(22,32,44,.14);transform-origin:center center;touch-action:none;cursor:crosshair;will-change:transform}
.cc-stage[data-tool="fill"]{cursor:cell}.cc-stage[data-tool="sticker"]{cursor:copy}
.cc-stage canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;touch-action:none}
.cc-line{pointer-events:none}
.cc-fit{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line,#E7E7E1);background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(22,32,44,.12)}
.cc-fit[hidden]{display:none}

/* tool bar */
.cc-bar{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"tools size pal" "stk stk stk";align-items:center;gap:10px 18px;padding:12px 16px;background:#fff;border-top:1px solid var(--line,#E7E7E1)}
.cc-tools{grid-area:tools;display:flex;gap:6px;padding:4px;background:#F1F1EC;border-radius:14px}
.cc-tool{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;height:56px;justify-content:center;border:0;border-radius:10px;background:none;color:var(--muted,#5A6573) !important;font-size:11.5px !important;font-weight:600 !important;transition:background .15s,color .15s,box-shadow .15s}
.cc-tool[aria-checked="true"]{background:#fff;color:var(--ink,#16202C) !important;box-shadow:0 1px 2px rgba(22,32,44,.08),0 2px 8px rgba(22,32,44,.08)}
.cc-tool[aria-checked="true"] svg{color:var(--accent,#0E5E6F)}
.cc-size{grid-area:size;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--muted,#5A6573)}
.cc-size[hidden]{display:none}
.cc-size input{width:120px;accent-color:var(--accent,#0E5E6F)}
.cc-size i{display:inline-block;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(22,32,44,.25);flex-shrink:0}
.cc-pal{grid-area:pal;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.cc-sw{width:32px;height:32px;border-radius:50%;border:0;padding:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(22,32,44,.18);transition:transform .12s,box-shadow .12s;position:relative;flex-shrink:0}
.cc-sw:hover{transform:scale(1.08)}
.cc-sw[aria-checked="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink,#16202C);transform:scale(1.08)}
.cc-more{display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(#D62828,#F6B10A,#3C9D3C,#0E7C86,#2E3C8F,#7B3FA0,#D62828);cursor:pointer;color:#fff}
.cc-more svg{width:18px;height:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.cc-more input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.cc-stk{grid-area:stk;display:flex;gap:8px;flex-wrap:wrap}
.cc-stk[hidden]{display:none}
.cc-sk{width:52px;height:52px;border-radius:12px;border:1px solid var(--line,#E7E7E1);background:#fff;padding:4px}
.cc-sk canvas{width:100%;height:100%;display:block}
.cc-sk[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent,#0E5E6F);border-color:transparent}
.cc-toast{position:absolute;left:50%;top:76px;transform:translate(-50%,-8px);background:var(--ink,#16202C);color:#fff;padding:8px 14px;border-radius:10px;font-weight:600;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.cc-toast.on{opacity:1;transform:translate(-50%,0)}

/* phones */
@media (max-width:760px){
  .cc-meta{padding:6px 10px;gap:6px}
  .cc-story{height:46px;max-width:none;flex:1 1 55%}.cc-sth{width:36px;height:36px}
  .cc-name{height:46px;flex:1 1 45%;padding-left:10px}.cc-name span{display:none}.cc-name input{font-size:16px}
  .cc-text{margin-bottom:8px;padding:8px 10px;width:calc(100% - 16px)}
  .cc-main-tx{font-size:15px}.cc-gl{font-size:12px}
  .cc-sp{left:8px;top:6px;width:calc(100% - 16px)}
  .cc-top{padding:8px 10px;gap:6px}
  .cc-ib{width:38px;height:38px;border-radius:10px}
  .cc-save{height:38px;padding:0 12px}
  .cc-save span{display:none}
  .cc-title b{font-size:14.5px}
  .cc-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .cc-pages{order:2;flex-direction:row;padding:8px 10px;gap:8px;border-right:0;border-top:1px solid var(--line,#E7E7E1)}
  .cc-pg{width:40px}
  .cc-pg b{font-size:10px;height:16px;min-width:16px;line-height:16px}
  .cc-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"tools" "size" "stk" "pal";padding:8px 10px 10px;gap:8px}
  .cc-tools{justify-content:space-between}
  .cc-tool{min-width:0;flex:1;height:50px;font-size:10.5px !important}
  .cc-size input{flex:1;width:auto}
  .cc-pal{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:4px 2px;scrollbar-width:none}
  .cc-pal::-webkit-scrollbar{display:none}
  .cc-sw{width:34px;height:34px}
  .cc-stk{flex-wrap:nowrap;overflow-x:auto}
  .cc-sk{width:46px;height:46px;flex-shrink:0}
}
/* phone-only controls (hidden on larger screens) */
.cc-nav,.cc-mo,.cc-mx,.cc-dots{display:none}
@media (max-width:760px){
  .cc{grid-template-rows:auto minmax(0,1fr) auto;background:#F3F2EC}
  .cc-top{grid-row:1;height:56px;padding:0 8px;gap:4px;border-bottom:0;background:#F3F2EC}
  .cc-main{grid-row:2}
  .cc-bar{grid-row:3}
  .cc-top .cc-ib{border:0;background:transparent;width:44px;height:44px;border-radius:12px}
  .cc-top .cc-ib:active:not(:disabled){background:rgba(22,32,44,.06)}
  .cc-title,.cc-acts [data-a="clear"],.cc-save{display:none}
  .cc-nav{display:flex;flex:1;align-items:center;justify-content:center;gap:0;min-width:0}
  .cc-pgn{min-width:52px;text-align:center;font:600 15px/1 var(--ui,system-ui);color:var(--ink,#16202C);font-variant-numeric:tabular-nums}
  .cc-acts{gap:0}
  .cc-mo{display:inline-flex}
  .cc-mo[aria-expanded="true"]{background:rgba(22,32,44,.08) !important}
  /* the ⋯ menu: story, name and page actions in one calm card */
  .cc-meta{display:none}
  .cc-mopen .cc-meta{display:flex;flex-wrap:wrap;position:absolute;z-index:9;left:8px;right:8px;top:calc(env(safe-area-inset-top,0px) + 56px);gap:8px;padding:10px;background:#fff;border:1px solid var(--line,#E7E7E1);border-radius:18px;box-shadow:0 18px 44px rgba(22,32,44,.18);animation:ccIn .18s ease-out both}
  .cc-mopen .cc-story,.cc-mopen .cc-name{flex:1 1 100%;max-width:none;height:50px}
  .cc-mx{display:flex;flex:1 1 100%;gap:8px}
  .cc-mxb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;border:1px solid var(--line,#E7E7E1);border-radius:14px;background:#FAFAF7;font:600 12px/1.2 var(--ui,system-ui) !important;color:var(--ink,#16202C) !important;padding:6px 4px;text-align:center}
  .cc-mxb svg{color:var(--accent,#0E5E6F)}
  .cc-mxb[aria-pressed="true"]{border-color:var(--accent,#0E5E6F);background:var(--soft,#E8F1F2)}
  .cc-mxb[data-a="clear"] svg{color:#B4321E}
  /* picture first: no thumbnail strip; story text only when asked for */
  .cc-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .cc-pages{display:none}
  .cc-text{display:none}
  .cc-txt-on .cc-text{display:flex;margin:0 auto 6px;padding:7px 10px;border-radius:12px;box-shadow:none}
  .cc-txt-on .cc-pn{display:none}
  .cc-txt-on .cc-main-tx{font-size:14.5px;line-height:1.4}
  .cc-txt-on .cc-gl{display:none}
  .cc-canvas{padding:0}
  /* bottom dock: tools + size on one row, colours below */
  .cc-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tools dots" "stk stk" "pal pal";gap:8px 8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));border-top:0;border-radius:20px 20px 0 0;box-shadow:0 -6px 24px rgba(22,32,44,.06)}
  .cc-size{display:none !important}
  .cc-tools{gap:2px;padding:3px;border-radius:14px}
  .cc-tool{height:44px;flex:1;min-width:0}
  .cc-tool span{display:none}
  .cc-dots{grid-area:dots;display:flex;gap:0;padding:3px;background:#F1F1EC;border-radius:14px}
  .cc-dots.off{visibility:hidden}
  .cc-dot{width:36px;height:44px;border:0;border-radius:10px;background:none;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .cc-dot i{display:block;border-radius:50%;background:var(--c,#F28C28);box-shadow:inset 0 0 0 1px rgba(22,32,44,.25)}
  .cc-dot[aria-checked="true"]{background:#fff;box-shadow:0 1px 2px rgba(22,32,44,.08),0 2px 8px rgba(22,32,44,.08)}
  .cc-pal{gap:10px;padding:4px 4px 2px;scroll-snap-type:x proximity}
  .cc-sw{width:36px;height:36px;scroll-snap-align:start}
  .cc-sk{width:44px;height:44px}
  .cc-toast{top:64px}
  .cc-fit{right:10px;bottom:10px}
}
@media (prefers-reduced-motion:reduce){.cc,.cc *{animation:none !important;transition:none !important}}
@media print{.cc{display:none !important}}
.cc-open svg{color:var(--accent,#0E5E6F)}
/* "Colour online" menu item */
nav.main .cc-menu{height:64px;padding:0 14px;border:0;border-radius:0;background:none;font:500 14.5px var(--ui,system-ui);color:var(--muted,#5A6573);position:relative;cursor:pointer}
nav.main .cc-menu:hover{color:var(--ink,#16202C)}
nav.main .cc-menu[aria-current="page"]{color:var(--ink,#16202C);font-weight:600}
nav.main .cc-menu[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent,#0E5E6F)}
@media (max-width:700px){
  .tabbar.cc-tab4{grid-template-columns:repeat(4,1fr)}
  .tabbar .cc-menu{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font:500 11px var(--ui,system-ui);color:var(--muted,#5A6573);border-radius:12px;cursor:pointer}
  .tabbar .cc-menu[aria-current="page"]{color:var(--accent,#0E5E6F);font-weight:600}
}