.cp-coloring-page,
.cp-coloring-page *{
  box-sizing:border-box;
}

.cp-coloring-page{
  width:100%;
  padding:25px;
  background:#f5f5f5;
  font-family:Arial,sans-serif;
}

.cp-app{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:25px;
  direction:ltr;
}

.cp-panel{
  width:230px;
  background:white;
  border:1px solid #ddd;
  border-radius:14px;
  padding:16px;
  text-align:center;
  direction:rtl;
  flex:0 0 auto;
}

.cp-panel h2{
  margin:0 0 15px;
  font-size:20px;
  line-height:1.25;
}

.cp-canvas-area{
  direction:rtl;
  text-align:center;
}

.cp-canvas-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:400px;
}

.cp-canvas{
  border:1px solid #ccc;
  background:white;
  max-width:70vw;
  max-height:90vh;
  touch-action:none;
  display:block;
}

.cp-image-status{
  margin-top:10px;
  min-height:22px;
  color:#8a3d00;
  font-size:14px;
}

.cp-coloring-page button{
  cursor:pointer;
  font-family:inherit;
}

.cp-tools button,
.cp-actions button{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
  background:white;
  color:#111;
  font-size:15px;
  line-height:1.2;
}

.cp-tools button{
  margin-bottom:8px;
}

.cp-tools button.selected{
  border:3px solid #222;
  font-weight:bold;
}

.cp-brush-size{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid #ddd;
}

.cp-brush-size-input{
  width:100%;
}

.cp-brush-preview-wrap{
  height:80px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.cp-brush-preview{
  border-radius:50%;
  background:red;
  border:1px solid #222;
}

.cp-brush-size-text{
  font-size:14px;
  margin-top:5px;
}

.cp-actions{
  margin-top:25px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.cp-colors-grid{
  display:grid;
  grid-template-columns:repeat(2,48px);
  justify-content:center;
  gap:10px;
}

.cp-color-btn{
  width:48px;
  height:48px;
  padding:0;
  border:0;
  position:relative;
  overflow:hidden;
  background:#000;
  appearance:none;
  -webkit-appearance:none;
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
  transition:transform .12s ease;
}

.cp-color-btn::before{
  content:"";
  position:absolute;
  inset:2px;
  background:var(--swatch);
  clip-path:inherit;
  pointer-events:none;
}

.cp-color-btn.selected{
  transform:scale(1.08);
}

.cp-custom-color{
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid #ddd;
}

.cp-custom-color-input{
  width:100%;
  height:60px;
  border:1px solid #ccc;
  background:white;
  cursor:pointer;
}

.cp-online-button{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:357px !important;
  max-width:100% !important;
  min-height:63px !important;
  padding:0 38px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#59bcf9 !important;
  color:#fff !important;
  direction:ltr !important;
  font-family:inherit !important;
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}

.cp-online-button *{
  box-sizing:border-box !important;
}

.cp-online-button:hover,
.cp-online-button:focus{
  background:#59bcf9 !important;
  color:#fff !important;
  text-decoration:none !important;
}

.cp-online-button__icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:40px !important;
  height:20px !important;
}

.cp-online-button__svg{
  width:40px !important;
  height:20px !important;
  display:block !important;
  flex:0 0 auto !important;
}

.cp-online-button__text{
  direction:rtl !important;
  color:#fff !important;
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

@media (max-width:480px){
  .cp-online-button{
    width:100% !important;
    padding:0 24px !important;
  }
}

@media (max-width:900px){
  .cp-coloring-page{
    padding:12px;
  }

  .cp-app{
    flex-direction:column;
    align-items:center;
  }

  .cp-panel{
    width:min(100%,420px);
  }

  .cp-canvas-wrap{
    min-width:0;
    width:100%;
  }

  .cp-canvas{
    max-width:100%;
    max-height:70vh;
  }
}