/* rangooo studio: phone skin for Colour Online (CSS only; colour.js untouched) */
@media (max-width:760px){
  .cc{--cc-bg:#F4F1EA;--rg-top:52px;--rg-dock:76px;background:
    radial-gradient(60% 40% at 10% 0%,rgba(255,200,140,.35),transparent 70%),
    radial-gradient(50% 40% at 100% 100%,rgba(143,211,224,.35),transparent 70%),var(--cc-bg)}
  /* the app dock stays visible under the palette: reserve its height */
  .cc.cc{--rg-safe:calc(env(safe-area-inset-bottom,0px) + 72px)}
  /* top bar: flat */
  .cc-top{margin:0;height:52px;padding:0 6px;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
  .cc-pager{gap:0}
  .cc-pc{min-width:48px;height:30px;line-height:30px;border-radius:0;background:none;font-size:14px;font-weight:700;color:#16202C}
  .cc-top .cc-ib{width:40px;height:40px;border-radius:50%}
  .cc-top .cc-back,.cc-top .cc-pv,.cc-top .cc-ib{color:#16202C}
  .cc-top .cc-pv[disabled],.cc-top .cc-ib[disabled]{color:rgba(22,32,44,.3)}
  .cc-top .cc-back svg,.cc-top .cc-ib svg{width:24px;height:24px}
  .cc-mb{width:40px;height:40px;padding:0;justify-content:center;gap:0;border-radius:50%;background:none;color:#16202C;font-weight:700}
  .cc-mb svg{width:24px;height:24px}
  .cc-mb span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cc-mb[aria-expanded="true"]{background:rgba(22,32,44,.1);color:#16202C}
  /* paper */
  .cc-view{padding:10px 12px 8px}
  .cc-stage,.cc-stage canvas{border-radius:20px}
  .cc-stage{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(22,32,44,.06),0 18px 40px rgba(22,32,44,.14)}
  .cc-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(22,32,44,.06)}
  /* Magic pencil toggle: small chip at the paper's top-right, not a blob over the picture */
  .cc-canvas .fx3-mp{left:12px;right:auto;top:auto;bottom:10px;width:38px;height:38px;border:0;background:rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(22,32,44,.14)}
  .cc-canvas .fx3-mp svg{width:18px;height:18px}
  .cc-canvas .fx3-mp-s{left:58px;top:auto;bottom:18px}
  /* dock: floating glass with the tool button + colour row */
  .cc-dock{z-index:12;margin:0 10px calc(8px + var(--rg-safe));height:calc(100% - 8px - var(--rg-safe));padding:0 10px;border-radius:26px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.7);border-top-color:rgba(255,255,255,.7);box-shadow:0 12px 36px rgba(22,32,44,.16)}
  .cc-tb{width:52px;height:52px;border-radius:18px;background:#16202C;box-shadow:0 8px 18px rgba(22,32,44,.25)}
  .cc-tb i{width:12px;height:12px;right:6px;bottom:6px;box-shadow:0 0 0 2px #16202C}
  .cc-pal{height:56px;gap:12px;padding:0 10px 0 6px;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
  .cc-sw{width:36px;height:36px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),inset 0 0 0 1px rgba(22,32,44,.1);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
  .cc-sw[aria-checked="true"]{transform:scale(1.18);box-shadow:0 0 0 2px #fff,0 0 0 4px #16202C,0 6px 14px rgba(22,32,44,.25)}
  .cc-sw:active{transform:scale(.92)}
  .cc-more{box-shadow:inset 0 0 0 1.5px rgba(22,32,44,.25)}
  /* tools sheet: labelled tiles */
  .cc-pop{left:10px;right:10px;bottom:calc(100% + 10px);max-width:none;padding:14px;border-radius:24px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 18px 50px rgba(22,32,44,.25);gap:12px}
  .cc-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .cc-tool{width:auto;height:64px;flex-direction:column;gap:5px;border-radius:18px;background:#F4F1EA}
  .cc-tool svg{width:24px;height:24px}
  .cc-tool span{display:block;font-size:11px;font-weight:700;line-height:1.1;text-align:center;padding:0 4px}
  .cc-tool[aria-checked="true"]{background:#16202C;box-shadow:none}
  .cc-dots{align-self:stretch;justify-content:space-between;background:#F4F1EA;border-radius:16px;padding:4px}
  .cc-dot{flex:1;height:44px;border-radius:12px}
  .cc-dot[aria-checked="true"]{background:#fff;box-shadow:0 2px 8px rgba(22,32,44,.12)}
  .cc-stk{max-width:none;justify-content:center}
}
html[data-night="1"] .cc{--cc-bg:#121A24}
@media (max-width:760px){
  html[data-night="1"] .cc{background:radial-gradient(60% 40% at 10% 0%,rgba(108,75,214,.25),transparent 70%),radial-gradient(50% 40% at 100% 100%,rgba(31,122,140,.3),transparent 70%),#121A24}
  html[data-night="1"] .cc-dock{background:rgba(24,34,46,.7);border-color:rgba(255,255,255,.12);box-shadow:0 12px 36px rgba(0,0,0,.45)}
  html[data-night="1"] .cc-pc{background:none;color:#EAF0F7}
  html[data-night="1"] .cc-mb{background:none;color:#EAF0F7}
  html[data-night="1"] .cc-mb[aria-expanded="true"]{background:rgba(255,255,255,.14)}
  html[data-night="1"] .cc-tb{background:#EAF0F7;color:#16202C !important}
  html[data-night="1"] .cc-tb i{box-shadow:0 0 0 2px #EAF0F7}
  html[data-night="1"] .cc-sw[aria-checked="true"]{box-shadow:0 0 0 2px #121A24,0 0 0 4px #EAF0F7}
  html[data-night="1"] .cc-pop{background:rgba(24,34,46,.96)}
  html[data-night="1"] .cc-tool,html[data-night="1"] .cc-dots{background:rgba(255,255,255,.08);color:#EAF0F7 !important}
  html[data-night="1"] .cc-tool[aria-checked="true"]{background:#EAF0F7;color:#16202C !important}
  html[data-night="1"] .cc-dot[aria-checked="true"]{background:rgba(255,255,255,.16)}
  html[data-night="1"] .cc-canvas .fx3-mp{background:rgba(255,255,255,.14);color:#EAF0F7}
  html[data-night="1"] .cc-top .cc-back,html[data-night="1"] .cc-top .cc-pv,html[data-night="1"] .cc-top .cc-ib{color:#EAF0F7 !important}
  html[data-night="1"] .cc-top .cc-pv[disabled],html[data-night="1"] .cc-top .cc-ib[disabled]{color:rgba(234,240,247,.35) !important}
}