.cps-app{max-width:1150px;margin:24px auto;font-family:inherit;color:#222}.cps-title{font-size:28px;font-weight:700;margin-bottom:18px}.cps-backgrounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px}.cps-card{border:2px solid #ddd;border-radius:14px;padding:8px;background:#fff;cursor:pointer;transition:.15s;box-sizing:border-box}.cps-card:hover{border-color:#2271b1;box-shadow:0 5px 18px rgba(0,0,0,.10);transform:translateY(-1px)}.cps-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;background:#f3f3f3}.cps-card-name{text-align:center;font-weight:650;padding:10px 3px 5px}.cps-blank-preview{width:100%;aspect-ratio:1/1;border-radius:9px;background:#fff;border:2px dashed #bbb;display:flex;align-items:center;justify-content:center;font-size:50px;color:#888;box-sizing:border-box}.cps-editor[hidden],.cps-picker[hidden]{display:none}.cps-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;margin-bottom:12px;background:#f5f5f5;border:1px solid #ddd;border-radius:12px}.cps-toolbar button,.cps-control{font:inherit;border:1px solid #ccc;background:#fff;border-radius:8px;padding:7px 10px;cursor:pointer}.cps-toolbar button:hover{background:#eee}.cps-toolbar .active{background:#2271b1;color:#fff;border-color:#2271b1}.cps-control{display:flex;align-items:center;gap:7px}.cps-control input[type=range]{max-width:120px}.cps-download{font-weight:700!important}.cps-canvas-wrap{width:100%;overflow:auto;background:#e7e7e7;border-radius:12px;line-height:0;text-align:center;padding:8px;box-sizing:border-box}.cps-canvas-wrap canvas{max-width:100%;height:auto;touch-action:none;display:block;margin:auto;background:#e7e7e7;box-shadow:0 1px 5px rgba(0,0,0,.12);cursor:crosshair}@media(max-width:650px){.cps-backgrounds{grid-template-columns:repeat(2,1fr);gap:10px}.cps-toolbar{gap:6px;padding:8px}.cps-toolbar button,.cps-control{font-size:13px;padding:6px 8px}.cps-title{font-size:22px}}

.cps-shapes-toggle{font-weight:700}.cps-shapes-menu{display:flex;flex-wrap:wrap;gap:5px;padding:5px;border:1px solid #ddd;border-radius:8px;background:#fff}.cps-shapes-menu[hidden]{display:none}
.cps-modal{position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}.cps-modal[hidden]{display:none}.cps-modal-box{position:relative;background:#fff;border-radius:14px;padding:24px;max-width:480px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.25)}.cps-modal-box h3{margin-top:0}.cps-modal-box label{display:block;font-weight:600;margin:12px 0}.cps-modal-box input,.cps-modal-box textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:9px;border:1px solid #ccc;border-radius:7px}.cps-modal-close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px;cursor:pointer}.cps-approved-work img{display:block;max-width:100%;height:auto}.cps-work-meta{padding:8px 0}

#cps-canvas{touch-action:none;max-width:none;display:block}
.cps-canvas-wrap{overflow:auto;max-width:100%}
.cps-shapes-menu{z-index:20;position:relative}
.cps-modal[hidden]{display:none!important}
/* v4 responsive canvas + modal */
#cps-canvas{touch-action:none;display:block;max-width:none;height:auto;transform-origin:0 0}
.cps-canvas-wrap{width:100%;max-width:100%;overflow:auto;display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.cps-editor{width:100%;overflow:hidden}
.cps-toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cps-toolbar button.active{outline:2px solid currentColor;outline-offset:1px}
.cps-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px}
.cps-modal[hidden]{display:none!important}.cps-modal-box{position:relative;background:#fff;width:min(480px,100%);box-sizing:border-box;border-radius:14px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.cps-modal-close{position:absolute;right:10px;top:6px;border:0;background:transparent;font-size:28px;cursor:pointer}.cps-modal-box label{display:block;font-weight:600;margin:12px 0}.cps-modal-box input,.cps-modal-box textarea{width:100%;box-sizing:border-box;margin-top:5px;padding:10px;border:1px solid #ccd0d4;border-radius:7px}
@media(max-width:700px){.cps-canvas-wrap{justify-content:center;overflow:auto}.cps-toolbar{justify-content:center}.cps-toolbar button,.cps-toolbar label{font-size:13px}.cps-shapes-menu{width:100%;justify-content:center}}

/* Dnevnik Crtanja v4.1 - refined zoom + approval CTA */
.cps-zoom-btn{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-width:44px;
    height:42px;
    padding:0 10px!important;
    border:1px solid rgba(0,0,0,.10)!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#333!important;
    font-size:18px!important;
    font-weight:700!important;
    line-height:1!important;
    cursor:pointer;
    box-shadow:0 2px 7px rgba(0,0,0,.08);
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.cps-zoom-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.13);background:#fafafa!important}
.cps-zoom-value{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    height:40px;
    padding:0 8px;
    font-size:14px;
    font-weight:700;
    border-radius:10px;
    background:rgba(0,0,0,.045);
    color:#444;
}
.cps-submit-approval{
    width:100%;
    border:0!important;
    border-radius:12px!important;
    padding:13px 20px!important;
    font-size:16px!important;
    font-weight:700!important;
    letter-spacing:.1px;
    cursor:pointer;
    background:linear-gradient(135deg,#6f8cff,#7d63d9)!important;
    color:#fff!important;
    box-shadow:0 5px 16px rgba(91,86,190,.22);
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.cps-submit-approval:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(91,86,190,.28);
    filter:brightness(1.03);
}
.cps-submit-approval:active{transform:translateY(0);box-shadow:0 3px 10px rgba(91,86,190,.2)}
.cps-submit-approval:disabled{opacity:.65;cursor:wait;transform:none}
.cps-submit-open{
    border-radius:12px!important;
    font-weight:700!important;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
@media(max-width:700px){
    .cps-zoom-btn{min-width:40px;height:38px;font-size:17px}
    .cps-zoom-value{height:36px;min-width:52px;font-size:13px}
    .cps-submit-approval{padding:12px 16px!important;font-size:15px!important}
}

/* Zoom control: two magnifiers + percentage in one visible row */
.cps-zoom-control{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
}
.cps-zoom-control .cps-zoom-btn{
    display:inline-flex!important;
    width:42px!important;
    min-width:42px!important;
    height:40px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    font-size:17px!important;
    line-height:1!important;
}
.cps-zoom-control .cps-zoom-value{
    display:inline-flex!important;
    width:54px!important;
    min-width:54px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:9px!important;
    font-size:13px!important;
    font-weight:700!important;
    white-space:nowrap!important;
}
@media(max-width:700px){
    .cps-zoom-control{gap:3px!important}
    .cps-zoom-control .cps-zoom-btn{width:38px!important;min-width:38px!important;height:36px!important;font-size:15px!important}
    .cps-zoom-control .cps-zoom-value{width:48px!important;min-width:48px!important;height:34px!important;font-size:12px!important}
}

/* FINAL ZOOM UI: Povećalo− | postotak | Povećalo+ */
.cps-zoom-control{
 display:inline-flex!important;
 flex:0 0 auto!important;
 flex-direction:row!important;
 align-items:center!important;
 justify-content:center!important;
 gap:5px!important;
 white-space:nowrap!important;
 vertical-align:middle!important;
}
.cps-zoom-control .cps-zoom-btn{
 display:inline-flex!important;
 flex:0 0 42px!important;
 width:42px!important;
 min-width:42px!important;
 max-width:42px!important;
 height:40px!important;
 margin:0!important;
 padding:0!important;
 align-items:center!important;
 justify-content:center!important;
 border:1px solid rgba(0,0,0,.12)!important;
 border-radius:10px!important;
 background:#fff!important;
 color:#333!important;
 font-size:17px!important;
 font-weight:700!important;
 line-height:1!important;
 cursor:pointer!important;
 box-sizing:border-box!important;
}
.cps-zoom-control .cps-zoom-value{
 display:inline-flex!important;
 flex:0 0 56px!important;
 width:56px!important;
 min-width:56px!important;
 max-width:56px!important;
 height:38px!important;
 margin:0!important;
 padding:0!important;
 align-items:center!important;
 justify-content:center!important;
 border-radius:9px!important;
 background:rgba(0,0,0,.055)!important;
 color:#333!important;
 font-size:13px!important;
 font-weight:700!important;
 line-height:1!important;
 box-sizing:border-box!important;
}
@media(max-width:700px){
 .cps-zoom-control .cps-zoom-btn{flex-basis:38px!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:36px!important;font-size:15px!important}
 .cps-zoom-control .cps-zoom-value{flex-basis:48px!important;width:48px!important;min-width:48px!important;max-width:48px!important;height:34px!important;font-size:12px!important}
}

/* Zoom tool + two-finger pan */
.cps-zoom-control .cps-zoom-btn.active{
  transform:scale(1.06)!important;
  box-shadow:0 0 0 3px rgba(100,110,220,.18),0 5px 14px rgba(0,0,0,.14)!important;
}
.cps-canvas-wrap{
  overflow:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#cps-canvas{
  touch-action:none!important;
}

.cps-mobile-colors{display:none}


/* Color popup - original Boja control appearance is untouched */
#cps-color-control{position:relative;cursor:pointer}
#cps-color-control #cps-color{cursor:pointer}
.cps-color-popup{
 position:fixed;
 z-index:99999;
 width:300px;
 max-width:calc(100vw - 24px);
 padding:14px;
 box-sizing:border-box;
 background:#fff;
 border:1px solid rgba(0,0,0,.10);
 border-radius:14px;
 box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.cps-color-popup[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
.cps-color-popup-title{font-weight:700;font-size:14px;margin-bottom:10px}
.cps-my-palette-title{font-size:12px;font-weight:700;margin:10px 0 7px}

.cps-color-popup[hidden]{display:none!important}
.cps-palette-selector{margin:0 0 10px}
.cps-palette-selector label{display:block;font-size:12px;font-weight:700;margin:0 0 5px}
#cps-palette-select{display:block;width:100%;box-sizing:border-box;min-height:36px;padding:7px 10px;border:1px solid rgba(0,0,0,.12);border-radius:9px;background:#fff;color:#333;font-size:13px}
.cps-palette-swatches{display:grid;grid-template-columns:repeat(10,30px);gap:7px;max-height:180px;overflow-y:auto;overflow-x:hidden;padding:2px 1px 8px}
.cps-palette-swatch{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;margin:0!important;border-radius:50%!important;border:2px solid rgba(0,0,0,.11)!important;box-shadow:0 1px 4px rgba(0,0,0,.10);cursor:pointer!important;box-sizing:border-box!important}
.cps-palette-swatch.cps-recent-swatch{box-shadow:0 0 0 2px rgba(60,60,60,.28),0 1px 4px rgba(0,0,0,.10)}
@media(max-width:1100px){.cps-palette-swatches{grid-template-columns:repeat(8,30px)}}
@media(max-width:700px){.cps-color-popup{position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(92vw,340px)!important}.cps-palette-swatches{grid-template-columns:repeat(8,30px);max-height:190px}}

/* Final palette layout */
.cps-palette-swatches{
 display:grid!important;
 grid-template-columns:repeat(10,30px)!important;
 gap:7px!important;
 max-height:155px!important;
 overflow-y:auto!important;
 overflow-x:hidden!important;
 padding:2px 1px 8px!important;
}
.cps-my-palette-swatches{max-height:95px!important}
.cps-palette-swatch{
 width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;
 padding:0!important;margin:0!important;border-radius:50%!important;
 border:2px solid rgba(0,0,0,.11)!important;box-sizing:border-box!important;
}
.cps-palette-swatch.cps-recent-swatch{
 box-shadow:0 0 0 2px rgba(60,60,60,.28),0 1px 4px rgba(0,0,0,.10)!important;
}
@media(max-width:1100px) and (min-width:701px){
 .cps-palette-swatches{grid-template-columns:repeat(8,30px)!important}
}
@media(max-width:700px){
 .cps-color-popup{
  position:fixed!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;width:min(92vw,340px)!important;
 }
 .cps-palette-swatches{grid-template-columns:repeat(8,30px)!important;max-height:190px!important}
 .cps-my-palette-swatches{max-height:95px!important}
}

.cps-my-palette-empty{
 display:block;
 width:100%;
 padding:8px 2px;
 color:#999;
 font-size:12px;
 font-style:italic;
}

/* Custom color dialog: opens as a centered window, not below the button. */
.cps-custom-panel{
 position:fixed!important;
 z-index:100001!important;
 left:50%!important;
 top:50%!important;
 transform:translate(-50%,-50%)!important;
 width:320px!important;
 max-width:calc(100vw - 28px)!important;
 padding:18px!important;
 box-sizing:border-box!important;
 background:#fff!important;
 border:1px solid rgba(0,0,0,.12)!important;
 border-radius:16px!important;
 box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}
.cps-custom-panel[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
.cps-custom-panel .cps-slider-row{
 display:grid!important;
 grid-template-columns:90px 55px 1fr!important;
 align-items:center!important;
 gap:8px!important;
 margin:12px 0!important;
 font-size:13px!important;
}
.cps-custom-panel .cps-slider-row input[type="range"]{
 width:100%!important;
 margin:0!important;
}
.cps-custom-panel .cps-slider-row output{
 text-align:right!important;
 font-weight:600!important;
}
.cps-custom-panel #cps-hue{
 background:linear-gradient(90deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)!important;
}
.cps-custom-panel #cps-sat{
 background:linear-gradient(90deg,#aaa,#ff0000)!important;
}
.cps-custom-panel #cps-value{
 background:linear-gradient(90deg,#000,#fff)!important;
}
.cps-custom-preview{
 width:100%!important;
 height:34px!important;
 margin-top:12px!important;
 border-radius:9px!important;
 border:1px solid rgba(0,0,0,.10)!important;
}

/* Apply custom color only after pressing Odaberi */
.cps-custom-choose{
 display:block!important;
 width:100%!important;
 min-height:42px!important;
 margin-top:14px!important;
 padding:10px 16px!important;
 border:0!important;
 border-radius:10px!important;
 background:#333!important;
 color:#fff!important;
 font-size:14px!important;
 font-weight:700!important;
 cursor:pointer!important;
 box-sizing:border-box!important;
}
.cps-custom-choose:hover{opacity:.92}
@media(max-width:700px){
 .cps-custom-choose{
  min-height:44px!important;
  font-size:15px!important;
 }
}

/* Desktop palette: exactly 8 complete color circles per row */
@media(min-width:701px){
  .cps-palette-swatches{
    display:grid!important;
    grid-template-columns:repeat(8, minmax(0, 1fr))!important;
    gap:7px!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:2px 0 8px!important;
    overflow-x:hidden!important;
  }
  .cps-palette-swatch{
    width:100%!important;
    min-width:0!important;
    max-width:30px!important;
    justify-self:center!important;
    aspect-ratio:1/1!important;
    height:auto!important;
  }
}

/* Unified circular swatches: default palettes and Moja paleta look identical */
@media(min-width:701px){
  .cps-palette-swatches{
    display:grid!important;
    grid-template-columns:repeat(8,30px)!important;
    grid-auto-rows:30px!important;
    justify-content:start!important;
    align-items:start!important;
    column-gap:7px!important;
    row-gap:7px!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:2px 0 8px!important;
    overflow-x:hidden!important;
  }
  .cps-palette-swatch{
    display:block!important;
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    aspect-ratio:1 / 1!important;
    flex:none!important;
    box-sizing:border-box!important;
    border-radius:50%!important;
    padding:0!important;
    margin:0!important;
    justify-self:start!important;
    align-self:start!important;
  }
}
@media(max-width:700px){
  .cps-palette-swatch{
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
    aspect-ratio:1 / 1!important;
    flex:none!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
  }
}

/* Moja paleta: use exactly the same swatch geometry as the main Paleta */
#cps-my-palette-swatches{
  display:grid!important;
  align-items:start!important;
  justify-content:start!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  padding:2px 0 8px!important;
}
#cps-my-palette-swatches .cps-palette-swatch{
  display:block!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  aspect-ratio:1 / 1!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  padding:0!important;
  margin:0!important;
  justify-self:start!important;
  align-self:start!important;
  flex:none!important;
}
@media(min-width:701px){
  #cps-my-palette-swatches{
    grid-template-columns:repeat(8,30px)!important;
    grid-auto-rows:30px!important;
    column-gap:7px!important;
    row-gap:7px!important;
  }
}
@media(max-width:700px){
  #cps-my-palette-swatches{
    grid-template-columns:repeat(8,30px)!important;
    grid-auto-rows:30px!important;
    column-gap:7px!important;
    row-gap:7px!important;
  }
}

/* Moja paleta: identical visual treatment to Paleta.
   Recently used colors must not get an extra outer ring or different size. */
#cps-my-palette-swatches .cps-palette-swatch,
#cps-my-palette-swatches .cps-palette-swatch.cps-recent-swatch{
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  aspect-ratio:1 / 1!important;
  border-radius:50%!important;
  border:2px solid rgba(0,0,0,.11)!important;
  box-shadow:0 1px 4px rgba(0,0,0,.10)!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
#cps-my-palette-swatches .cps-palette-swatch.cps-recent-swatch{
  /* No special selected/recent ring — same as the main palette. */
  outline:none!important;
}

/* Slojevi – Photoshop-style raster layers */
.cps-workspace{display:flex;gap:12px;align-items:flex-start;width:100%}.cps-workspace .cps-canvas-wrap{flex:1;min-width:0}.cps-layers-panel{width:285px;max-width:100%;background:#f7f7f8;border:1px solid #d8d8dc;border-radius:14px;padding:12px;box-sizing:border-box;box-shadow:0 5px 18px rgba(0,0,0,.08)}.cps-layers-panel[hidden]{display:none!important}.cps-layers-head{display:flex;align-items:center;justify-content:space-between;font-size:17px;margin-bottom:7px}.cps-layers-head button{border:0;background:transparent;font-size:25px;line-height:1;cursor:pointer}.cps-layers-help{font-size:12px;line-height:1.35;color:#666;margin-bottom:10px}.cps-layers-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}.cps-layer-row{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #ddd;border-radius:10px;padding:6px}.cps-layer-row.active{border-color:#2271b1;box-shadow:0 0 0 2px rgba(34,113,177,.13)}.cps-layer-row button{font:inherit;border:0;background:#f2f2f2;border-radius:7px;min-width:28px;height:28px;cursor:pointer}.cps-layer-row button:hover{background:#e4e4e4}.cps-layer-select{flex:1;text-align:left;padding:0 8px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cps-layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cps-layer-actions{display:flex;gap:3px}.cps-layer-actions button{font-size:12px;min-width:24px}.cps-layer-fixed{font-size:11px;color:#888;margin-left:auto}.cps-layer-add{width:100%;margin-top:10px;border:1px dashed #aaa;background:#fff;border-radius:9px;padding:9px;cursor:pointer;font-weight:700}.cps-layers-toggle{font-weight:700}
@media(max-width:900px){.cps-workspace{display:block}.cps-layers-panel{width:100%;margin-top:10px}.cps-layers-list{max-height:300px}.cps-layer-actions button{min-width:30px;height:30px}}
@media(max-width:650px){.cps-layers-panel{padding:10px}.cps-layer-row{padding:7px}.cps-layer-actions{gap:4px}.cps-layer-actions button{min-width:29px;height:29px}.cps-layers-help{font-size:11px}}

/* ✥ Pomicanje sloja */
.cps-layer-actions .cps-layer-move{
  font-size:17px!important;
  font-weight:700!important;
}
.cps-layer-row.active .cps-layer-move{
  outline:1px solid rgba(0,0,0,.14);
}
#cps-canvas.cps-layer-moving{
  cursor:move!important;
  touch-action:none!important;
}

/* Aktivna ikona ✥ - isti vizualni feedback kao aktivni alati */
.cps-layer-actions .cps-layer-move.active{
  background:#2f80ed!important;
  color:#fff!important;
  border-color:#2f80ed!important;
  box-shadow:0 2px 6px rgba(47,128,237,.28)!important;
}

.cps-layer-actions .cps-layer-duplicate{
  font-size:16px!important;
  font-weight:700!important;
}


/* Aktivni alati ostaju plavi, a hover je samo svjetlija nijansa plave */
.cps-tool.active,
.cps-tool.active:focus,
.cps-tool.active:active{
  background:#2f80ed!important;
  color:#fff!important;
  border-color:#2f80ed!important;
}

.cps-tool.active:hover{
  background:#5a9cf0!important;
  color:#fff!important;
  border-color:#5a9cf0!important;
}

/* Aktivna ikona pomicanja sloja ✥ */
.cps-layer-actions .cps-layer-move.active,
.cps-layer-actions .cps-layer-move.active:focus,
.cps-layer-actions .cps-layer-move.active:active{
  background:#2f80ed!important;
  color:#fff!important;
  border-color:#2f80ed!important;
}

.cps-layer-actions .cps-layer-move.active:hover{
  background:#5a9cf0!important;
  color:#fff!important;
  border-color:#5a9cf0!important;
}


/* Zoom scrollbar is active only when the user actually enlarges the image.
   We do not modify canvas width/height rules here, so the original zoom remains intact. */
.cps-canvas-wrap.cps-zoomed-scroll{
  overflow-x:auto!important;
  overflow-y:auto!important;
  max-height:75vh!important;
  scrollbar-gutter:stable both-edges;
}

/* The normal state remains exactly as the original plugin: image fitted to its frame. */
.cps-canvas-wrap:not(.cps-zoomed-scroll){
  overflow-x:auto!important;
  overflow-y:hidden!important;
  max-height:none!important;
}

@media(max-width:900px){
  .cps-canvas-wrap.cps-zoomed-scroll{
    max-height:68vh!important;
  }
}


/* Mobile pinch pan: when the canvas is larger than the viewport, start the
   overflow area from its real top-left edge. Centering an overflowing flex item
   can create unreachable negative overflow on some mobile browsers. */
.cps-canvas-wrap.cps-zoomed-scroll{
  justify-content:flex-start!important;
  align-items:flex-start!important;
}

/* Keep the original centred "fit to frame" appearance when not zoomed. */
.cps-canvas-wrap:not(.cps-zoomed-scroll){
  justify-content:center!important;
}


/* Kistovi dropdown */
.cps-brushes-toggle{font-weight:700}
.cps-brushes-menu{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:5px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  position:relative;
  z-index:20;
}
.cps-brushes-menu[hidden]{display:none}

@media(max-width:700px){
  .cps-brushes-menu{
    width:100%;
    justify-content:center;
  }
}


/* Native-resolution canvas display:
   internal bitmap stays at original size; CSS controls only the visible scale. */
.cps-canvas-wrap:not(.cps-zoomed-scroll){
  overflow:hidden;
}
.cps-canvas-wrap:not(.cps-zoomed-scroll) #cps-canvas{
  margin-left:auto;
  margin-right:auto;
  flex:none;
}


/* Clickable zoom percentage and quick preset menu */
.cps-zoom-menu-wrap{position:relative;display:inline-flex;align-items:center}
.cps-zoom-value-button{cursor:pointer;border:1px solid rgba(0,0,0,.14);background:transparent;border-radius:8px;padding:6px 9px;min-width:58px;font:inherit;line-height:1.1}
.cps-zoom-value-button:hover{background:rgba(0,0,0,.06)}
.cps-zoom-menu{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);z-index:10050;min-width:112px;padding:5px;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.16);border:1px solid rgba(0,0,0,.1)}
.cps-zoom-menu[hidden]{display:none!important}
.cps-zoom-menu button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:7px;font:inherit;cursor:pointer;white-space:nowrap}
.cps-zoom-menu button:hover{background:rgba(0,0,0,.07)}

/* Administrator notice on the background picker */
.cps-picker-notice{box-sizing:border-box;border:2px solid;border-radius:14px;padding:14px 16px;margin:0 0 14px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
#cps-picker-notice-bottom .cps-picker-notice{margin:14px 0 0}
.cps-picker-notice-title{font-size:18px;font-weight:750;margin-bottom:5px}
.cps-picker-notice-message{line-height:1.55;white-space:pre-line}
.cps-picker-notice-green{background:#e8f7ec;border-color:#78b98a;color:#225c32}
.cps-picker-notice-blue{background:#e8f4ff;border-color:#75a9d8;color:#1d527f}
@media(max-width:650px){.cps-picker-notice{border-radius:12px;padding:12px 13px}.cps-picker-notice-title{font-size:16px}}

/* Public gallery of approved Dnevnik Crtanja works */
.cps-gallery{
  --cps-gallery-columns:4;
  display:grid;
  grid-template-columns:repeat(var(--cps-gallery-columns),minmax(0,1fr));
  gap:18px;
  width:100%;
}
.cps-gallery-item{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  min-width:0;
  padding:0;
  border:1px solid rgba(0,0,0,.09);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  box-shadow:0 3px 12px rgba(0,0,0,.06);
  transition:transform .18s ease,box-shadow .18s ease;
}
.cps-gallery-item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.cps-gallery-item img{
  display:block;
  width:100%;
  aspect-ratio:1.414 / 1;
  object-fit:cover;
  background:#f4f4f4;
}
.cps-gallery-caption{
  display:block;
  padding:10px 12px;
  font-weight:600;
  color:#2f3540;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cps-gallery-empty{
  padding:18px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:14px;
  background:#fafafa;
}
.cps-gallery-lightbox[hidden]{display:none!important}
.cps-gallery-lightbox{
  position:fixed;
  z-index:999999;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.cps-gallery-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
}
.cps-gallery-dialog{
  position:relative;
  z-index:1;
  width:min(1100px,100%);
  max-height:calc(100vh - 40px);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.cps-gallery-image-wrap{
  width:100%;
  max-height:calc(100vh - 105px);
  overflow:auto;
  background:#1f1f1f;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pan-x pan-y pinch-zoom;
}
.cps-gallery-large-image{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 105px);
  width:auto;
  height:auto;
  object-fit:contain;
}
.cps-gallery-large-title{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:0 16px;
  font-weight:650;
  color:#2f3540;
}
.cps-gallery-close{
  position:absolute;
  z-index:2;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#222;
  font-size:28px;
  line-height:34px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
body.cps-gallery-open{overflow:hidden}
@media(max-width:900px){
  .cps-gallery{grid-template-columns:repeat(min(3,var(--cps-gallery-columns)),minmax(0,1fr));gap:14px}
}
@media(max-width:650px){
  .cps-gallery{grid-template-columns:repeat(min(2,var(--cps-gallery-columns)),minmax(0,1fr));gap:10px}
  .cps-gallery-item{border-radius:13px}
  .cps-gallery-caption{padding:8px 10px;font-size:14px}
  .cps-gallery-lightbox{padding:10px}
  .cps-gallery-dialog{max-height:calc(100vh - 20px);border-radius:14px}
  .cps-gallery-image-wrap{max-height:calc(100vh - 75px)}
  .cps-gallery-large-image{max-height:calc(100vh - 75px)}
}

/* Gallery v2 – cards matching the background-selection visual language */
.cps-gallery{
  align-items:start;
}
.cps-gallery-item{
  border:1px solid rgba(50,55,65,.14);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 5px 16px rgba(35,45,60,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.cps-gallery-item:hover{
  transform:translateY(-3px);
  border-color:rgba(50,95,160,.28);
  box-shadow:0 10px 26px rgba(35,45,60,.14);
}
.cps-gallery-thumb{
  display:block;
  width:100%;
  aspect-ratio:1.414 / 1;
  overflow:hidden;
  background:#f4f5f7;
}
.cps-gallery-item img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  transition:transform .22s ease;
}
.cps-gallery-item:hover .cps-gallery-thumb img{
  transform:scale(1.025);
}
.cps-gallery-card-info{
  display:block;
  padding:12px 14px 14px;
  background:#fff;
}
.cps-gallery-caption{
  display:block;
  padding:0 0 9px;
  font-weight:700;
  color:#2e3541;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cps-gallery-meta{
  display:block;
  color:#596170;
  font-size:14px;
  line-height:1.45;
  text-align:left;
}
.cps-gallery-meta strong{
  color:#374151;
}
.cps-gallery-meta-desc{
  margin-top:4px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  white-space:normal;
}
.cps-gallery-dialog{
  width:min(1100px,100%);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
}
.cps-gallery-image-wrap{
  max-height:calc(100vh - 180px);
  min-height:220px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
  background:#f3f4f6;
}
.cps-gallery-large-image{
  display:block;
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  min-width:100%;
  min-height:100%;
  object-fit:contain;
}
.cps-gallery-popup-info{
  padding:13px 18px 16px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
}
.cps-gallery-large-title{
  min-height:0;
  padding:0 0 8px;
  font-size:18px;
  font-weight:750;
}
.cps-gallery-large-author,
.cps-gallery-large-description{
  color:#4f5866;
  line-height:1.5;
  margin-top:4px;
}
.cps-gallery-large-author strong,
.cps-gallery-large-description strong{
  color:#303743;
}
.cps-gallery-close{
  top:12px;
  right:12px;
}
@media(max-width:650px){
  .cps-gallery{gap:12px}
  .cps-gallery-item{border-radius:15px}
  .cps-gallery-card-info{padding:10px 11px 12px}
  .cps-gallery-caption{font-size:14px;padding-bottom:7px}
  .cps-gallery-meta{font-size:12px}
  .cps-gallery-lightbox{padding:8px}
  .cps-gallery-dialog{
    width:100%;
    max-height:calc(100vh - 16px);
    border-radius:15px;
  }
  .cps-gallery-image-wrap{
    min-height:180px;
    max-height:calc(100vh - 185px);
    touch-action:pan-x pan-y pinch-zoom;
  }
  .cps-gallery-large-image{
    min-width:100%;
    min-height:auto;
  }
  .cps-gallery-popup-info{padding:11px 13px 13px}
  .cps-gallery-large-title{font-size:16px}
  .cps-gallery-large-author,
  .cps-gallery-large-description{font-size:14px}
  .cps-gallery-close{
    position:fixed;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    font-size:30px;
    line-height:38px;
  }
}


/* ============================================================
   GALERIJA – JEDINSTVENA KARTICA
   Slika gore, centrirani Autor i Opis dolje, cijela kartica klikabilna.
   ============================================================ */

.cps-gallery {
    display: grid !important;
    grid-template-columns: repeat(var(--cps-gallery-columns, 4), minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.cps-gallery > button.cps-gallery-item {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
    cursor: pointer !important;
    text-align: center !important;

    border: 2px solid rgba(0,0,0,.10) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.06) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.cps-gallery > button.cps-gallery-item:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(50,95,160,.35) !important;
    box-shadow: 0 9px 24px rgba(35,45,60,.16) !important;
}

.cps-gallery > button.cps-gallery-item:focus-visible {
    outline: 3px solid rgba(50,95,160,.35) !important;
    outline-offset: 3px !important;
}

.cps-gallery > button.cps-gallery-item > .cps-gallery-thumb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    height: 250px !important;
    padding: 10px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
    background: #f7f8fa !important;
}

.cps-gallery > button.cps-gallery-item > .cps-gallery-thumb > img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: auto !important;

    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    transform: none !important;
}

.cps-gallery > button.cps-gallery-item > .cps-gallery-card-info {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    width: 100% !important;
    min-height: 86px !important;
    padding: 12px 16px 14px !important;
    box-sizing: border-box !important;

    background: #fff !important;
}

.cps-gallery > button.cps-gallery-item .cps-gallery-caption {
    display: none !important;
}

.cps-gallery > button.cps-gallery-item .cps-gallery-meta {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #4b5563 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
}

.cps-gallery > button.cps-gallery-item .cps-gallery-meta strong {
    color: #2f3743 !important;
}

.cps-gallery > button.cps-gallery-item .cps-gallery-meta-desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
}

/* Popup – prikazuje samo veliku sliku i podatke, nikada se ne umeće u galeriju. */
.cps-gallery-lightbox[hidden] {
    display: none !important;
}

.cps-gallery-lightbox {
    position: fixed !important;
    z-index: 999999 !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.cps-gallery-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.78) !important;
}

.cps-gallery-dialog {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(1100px, 100%) !important;
    max-height: calc(100vh - 40px) !important;

    border-radius: 18px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
}

.cps-gallery-image-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 260px !important;
    max-height: calc(100vh - 175px) !important;
    padding: 12px !important;
    box-sizing: border-box !important;

    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #f4f5f7 !important;

    touch-action: pan-x pan-y pinch-zoom !important;
}

.cps-gallery-large-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100vh - 205px) !important;
    object-fit: contain !important;
}

.cps-gallery-popup-info {
    padding: 13px 18px 16px !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    background: #fff !important;
    text-align: center !important;
}

.cps-gallery-large-title {
    display: none !important;
}

.cps-gallery-large-author,
.cps-gallery-large-description {
    margin-top: 4px !important;
    color: #4b5563 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.cps-gallery-large-author strong,
.cps-gallery-large-description strong {
    color: #2f3743 !important;
}

.cps-gallery-close {
    position: absolute !important;
    z-index: 5 !important;
    top: 10px !important;
    right: 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: #222 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

@media (max-width: 900px) {
    .cps-gallery {
        grid-template-columns: repeat(min(3, var(--cps-gallery-columns, 4)), minmax(0, 1fr)) !important;
    }
    .cps-gallery > button.cps-gallery-item > .cps-gallery-thumb {
        height: 220px !important;
    }
}

@media (max-width: 650px) {
    .cps-gallery {
        grid-template-columns: repeat(min(2, var(--cps-gallery-columns, 4)), minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .cps-gallery > button.cps-gallery-item {
        border-radius: 16px !important;
    }

    .cps-gallery > button.cps-gallery-item > .cps-gallery-thumb {
        height: 170px !important;
        padding: 8px !important;
    }

    .cps-gallery > button.cps-gallery-item > .cps-gallery-card-info {
        min-height: 76px !important;
        padding: 10px 10px 12px !important;
        gap: 3px !important;
    }

    .cps-gallery > button.cps-gallery-item .cps-gallery-meta {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .cps-gallery-lightbox {
        padding: 8px !important;
    }

    .cps-gallery-dialog {
        width: 100% !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: 16px !important;
    }

    .cps-gallery-image-wrap {
        min-height: 180px !important;
        max-height: calc(100vh - 165px) !important;
        padding: 8px !important;
        touch-action: pan-x pan-y pinch-zoom !important;
    }

    .cps-gallery-large-image {
        max-width: 100% !important;
        max-height: calc(100vh - 190px) !important;
    }

    .cps-gallery-popup-info {
        padding: 10px 12px 12px !important;
    }

    .cps-gallery-large-author,
    .cps-gallery-large-description {
        font-size: 14px !important;
    }

    .cps-gallery-close {
        width: 42px !important;
        height: 42px !important;
        top: 10px !important;
        right: 10px !important;
        font-size: 30px !important;
    }
}




/* ============================================================
   POŠALJI RAD – statusne poruke
   ============================================================ */
#cps-save-message.cps-save-message {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0 16px;
    padding: 12px 15px;
    border: 2px solid transparent;
    border-radius: 14px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

#cps-save-message.cps-save-message.is-visible {
    display: block;
}

/* Crveno – upozorenje / neispravan unos */
#cps-save-message.cps-save-message.cps-message-error {
    background: #fff0f0;
    border-color: #e69a9a;
    color: #8f2929;
    box-shadow: 0 2px 8px rgba(180,55,55,.07);
}

/* Plavo – radnja je u tijeku */
#cps-save-message.cps-save-message.cps-message-loading {
    background: #eef6ff;
    border-color: #8fbce6;
    color: #1f5f9d;
    box-shadow: 0 2px 8px rgba(45,120,190,.08);
}

/* Zeleno – uspješno završeno */
#cps-save-message.cps-save-message.cps-message-success {
    background: #eefaf1;
    border-color: #8fc59c;
    color: #276b3b;
    box-shadow: 0 2px 8px rgba(50,140,75,.08);
}

@media (max-width: 650px) {
    #cps-save-message.cps-save-message {
        margin: 10px 0 14px;
        padding: 11px 12px;
        border-radius: 12px;
        font-size: 13px;
    }
}


/* Anti-spam honeypot – potpuno skriven od stvarnih korisnika. */
.cps-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* Vrijeme crtanja – vizualno usklađeno s gumbom Gumica */
.cps-drawing-timer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-sizing:border-box;
  min-height:42px;
  margin-left:8px;
  padding:0 12px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#f9f9f9;
  color:#333;
  font-size:14px;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
}
.cps-drawing-timer strong{
  font-weight:400;
}
.cps-drawing-timer #cps-drawing-time{
  font-variant-numeric:tabular-nums;
  font-weight:400;
}
@media (max-width:700px){
  .cps-drawing-timer{
    margin-left:0;
    margin-top:0;
    min-height:42px;
    width:100%;
    justify-content:center;
  }
}


/* GALERIJA – PAGINACIJA */
.cps-gallery-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin:28px 0 6px;
    flex-wrap:wrap;
}
.cps-gallery-page{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    padding:0 12px;
    box-sizing:border-box;
    border:2px solid rgba(0,0,0,.10);
    border-radius:12px;
    background:#fff;
    color:#374151;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    line-height:1;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.cps-gallery-page:hover{
    transform:translateY(-2px);
    border-color:rgba(50,95,160,.35);
    box-shadow:0 8px 18px rgba(35,45,60,.12);
    color:#2f3540;
}
.cps-gallery-page.is-current{
    border-color:rgba(50,95,160,.45);
    background:#f4f7fb;
    color:#2f5f9f;
    font-weight:700;
    cursor:default;
    box-shadow:0 4px 12px rgba(35,45,60,.08);
}
.cps-gallery-page.is-disabled{
    opacity:.42;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
    box-shadow:none;
}
.cps-gallery-page-prev,
.cps-gallery-page-next{
    font-size:27px;
    font-weight:400;
    padding-bottom:2px;
}
@media(max-width:650px){
    .cps-gallery-pagination{gap:6px;margin-top:22px}
    .cps-gallery-page{min-width:38px;height:38px;padding:0 10px;border-radius:10px;font-size:14px}
    .cps-gallery-page-prev,.cps-gallery-page-next{font-size:24px}
}