/* Cenk Kaptan Color Lab – Avada/WordPress-safe scoped styles */
.ck-color-lab-wrap{
  width:100%;
  max-width:100%;
  margin:0 auto;
  isolation:isolate;
  overflow-x:hidden;
}

.ck-color-lab-avada .resolve-page{
  min-height:min(92vh,920px);
  max-height:min(92vh,920px);
}
@media (min-width:1101px){
  .ck-color-lab-avada .resolve-page{
    min-height:0;
    max-height:100%;
    height:100%;
  }
}

.fusion-fullwidth .ck-color-lab-wrap,
.fusion-builder-row .ck-color-lab-wrap{
  width:100%!important;
  max-width:100%!important;
}

.ck-color-lab{
  --ck-bg:#05070b;
  --ck-line:rgba(255,255,255,.09);
  --ck-line2:rgba(255,255,255,.16);
  --ck-text:#f4f7fc;
  --ck-muted:#8f9bad;
  --ck-red:#e3363e;
  --ck-red2:#8d181e;
  --ck-blue:#35a8ff;
  --ck-shadow:0 26px 90px rgba(0,0,0,.48);
  box-sizing:border-box;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ck-text);
  line-height:1.4;
}

.ck-color-lab *, .ck-color-lab *::before, .ck-color-lab *::after{box-sizing:border-box}

.ck-color-lab .app-wrap{
  width:min(1540px, 100%);
  margin:0 auto;
  padding-bottom:14px;
}

.ck-color-lab .app{
  border:1px solid var(--ck-line);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), var(--ck-bg);
  box-shadow:var(--ck-shadow);
}

.ck-color-lab .topbar{
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;gap:16px;
  background:linear-gradient(180deg, #121925, #0d131d);
  border-bottom:1px solid var(--ck-line);
}

.ck-color-lab .brand{display:flex;align-items:center;gap:12px;min-width:0}
.ck-color-lab .brand-icon{
  width:40px;height:40px;border-radius:14px;flex:0 0 auto;
  background:
    radial-gradient(circle at 34% 32%, white 0 8%, transparent 9%),
    conic-gradient(#ff3b3b, #ffd166, #39d98a, #35a8ff, #a855f7, #ff3b3b);
  box-shadow:0 0 30px rgba(227,54,62,.28);
}
.ck-color-lab .brand-copy strong{display:block;font-size:14px;letter-spacing:.3px;color:var(--ck-text)}
.ck-color-lab .brand-copy span{display:block;color:var(--ck-muted);font-size:12px;margin-top:2px}

.ck-color-lab .hero{
  padding:22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;
}
.ck-color-lab .kicker{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  padding:8px 12px;border-radius:999px;color:#ffbcc0;
  background:rgba(227,54,62,.12);border:1px solid rgba(227,54,62,.28);
  font-size:12px;font-weight:800;
}
.ck-color-lab .hero h1{
  margin:14px 0 8px;font-size:clamp(24px, 4vw, 52px);line-height:.95;
  letter-spacing:-1.5px;max-width:900px;color:var(--ck-text);
}
.ck-color-lab .hero p{margin:0;max-width:850px;color:var(--ck-muted);line-height:1.58;font-size:15px}

.ck-color-lab .hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ck-color-lab .btn,.ck-color-lab .upload{
  border:1px solid var(--ck-line2);background:rgba(255,255,255,.07);color:#fff;
  border-radius:14px;padding:12px 15px;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;font-weight:800;font-size:14px;white-space:nowrap;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  font-family:inherit;
}
.ck-color-lab .btn:hover,.ck-color-lab .upload:hover{
  transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);
}
.ck-color-lab .btn.red{background:linear-gradient(135deg,var(--ck-red),var(--ck-red2));border-color:rgba(227,54,62,.42)}
.ck-color-lab .upload input{display:none}

.ck-color-lab .viewer-section{padding:0 22px 20px}
.ck-color-lab .viewer{
  position:relative;min-height:480px;border:1px solid rgba(255,255,255,.12);
  border-radius:24px;overflow:hidden;background:#030507;
}
.ck-color-lab .viewer canvas#previewCanvas{
  display:block;width:100%;height:min(58vh,720px);min-height:420px;background:#05070a;
}
.ck-color-lab .viewer-overlay{
  position:absolute;inset:14px 14px auto;display:flex;justify-content:space-between;gap:14px;z-index:4;pointer-events:none;
}
.ck-color-lab .pill{
  padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(6,9,13,.72);backdrop-filter:blur(12px);color:rgba(255,255,255,.88);
  font-size:12px;font-weight:850;
}
.ck-color-lab .frame-guides{position:absolute;inset:0;z-index:3;pointer-events:none}
.ck-color-lab .frame-guides .safe{position:absolute;left:6%;right:6%;top:8%;bottom:8%;border:1px solid rgba(255,255,255,.14);border-radius:6px}
.ck-color-lab .statusbar{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:5;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.ck-color-lab .status-group{display:flex;gap:8px;flex-wrap:wrap}

.ck-color-lab .panel-shell{
  border-top:1px solid var(--ck-line);
  background:linear-gradient(180deg,#111824,#0b0f16);
  padding:16px 18px 18px;
}
.ck-color-lab .panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ck-color-lab .tabs{display:flex;gap:8px;flex-wrap:wrap}
.ck-color-lab .tab{
  border:1px solid var(--ck-line);background:rgba(255,255,255,.05);color:var(--ck-muted);
  border-radius:999px;padding:9px 13px;font-size:12px;font-weight:800;cursor:pointer;
  font-family:inherit;transition:all .18s ease;
}
.ck-color-lab .tab:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.ck-color-lab .tab.active{
  color:#fff;border-color:rgba(227,54,62,.44);background:rgba(227,54,62,.14);
}
.ck-color-lab .panel-note{color:var(--ck-muted);font-size:12px;font-weight:700}
.ck-color-lab .panel-view{display:none}
.ck-color-lab .panel-view.active{display:block}
.ck-color-lab .card{
  min-width:0;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);
  border-radius:20px;padding:15px;
}
.ck-color-lab .card h2{
  margin:0 0 12px;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ck-text);
}
.ck-color-lab .card h2 span{color:var(--ck-muted);font-size:11px;font-weight:700}

.ck-color-lab .color-layout{display:grid;grid-template-columns:minmax(280px,340px) 1fr minmax(280px,350px);gap:14px}
.ck-color-lab .wheels{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ck-color-lab .wheel-box{
  padding:10px 8px;border-radius:16px;background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.075);display:grid;gap:6px;place-items:center;
}
.ck-color-lab:not(.resolve-chrome) .wheel{
  width:78px;height:78px;border-radius:50%;position:relative;cursor:grab;touch-action:none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.95) 0 7%, transparent 8%),
    conic-gradient(#ff3b3b, #ffd166, #41e28c, #35a8ff, #ab5cff, #ff3b3b);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.24), 0 8px 20px rgba(0,0,0,.26);
}
.ck-color-lab:not(.resolve-chrome) .wheel:active{cursor:grabbing}
.ck-color-lab:not(.resolve-chrome) .wheel::after{
  content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;
  left:50%;top:50%;
  transform:translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px)));
  box-shadow:0 0 0 4px rgba(0,0,0,.34);pointer-events:none;
}
.ck-color-lab .wheel-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 4px}
.ck-color-lab .wheel-label{font-size:10px;color:var(--ck-muted);font-weight:850;letter-spacing:.35px;text-transform:uppercase}
.ck-color-lab .wheel-reset{
  border:none;background:transparent;color:var(--ck-muted);font-size:10px;cursor:pointer;padding:2px 4px;font-family:inherit;
}
.ck-color-lab .wheel-reset:hover{color:#fff}
.ck-color-lab .wheel-lum{width:100%;display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;padding:0 4px}
.ck-color-lab .wheel-lum input[type="range"]{width:100%}
.ck-color-lab .wheel-lum span{font-size:10px;font-weight:800;min-width:28px;text-align:right;color:var(--ck-muted)}

.ck-color-lab .slider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ck-color-lab .control{padding:12px;border-radius:16px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.075)}
.ck-color-lab .control-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ck-color-lab .control label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:850;color:var(--ck-text)}
.ck-color-lab .dot{width:9px;height:9px;border-radius:999px;display:block;background:var(--ck-blue)}
.ck-color-lab .value{
  min-width:52px;text-align:center;border-radius:10px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);color:#fff;padding:5px 8px;font-size:12px;font-weight:850;
}
.ck-color-lab .control small{display:block;color:var(--ck-muted);font-size:11px;margin-top:7px;line-height:1.35}
.ck-color-lab input[type="range"]{width:100%;accent-color:var(--ck-red);cursor:pointer}

.ck-color-lab .lesson-box{
  border-radius:16px;min-height:120px;
  background:radial-gradient(circle at top right, rgba(227,54,62,.22), transparent 40%), rgba(0,0,0,.18);
  border:1px solid rgba(227,54,62,.20);padding:14px;margin-bottom:10px;
}
.ck-color-lab .lesson-box strong{display:block;margin-bottom:8px;font-size:18px;color:var(--ck-text)}
.ck-color-lab .lesson-box p{margin:0;color:rgba(255,255,255,.76);line-height:1.46;font-size:13px}

.ck-color-lab .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.ck-color-lab .preset{
  text-align:left;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.18);color:#fff;
  border-radius:14px;padding:12px;cursor:pointer;font-family:inherit;transition:transform .18s ease;
}
.ck-color-lab .preset:hover{transform:translateY(-1px);border-color:rgba(227,54,62,.35)}
.ck-color-lab .preset strong{display:block;font-size:12px;margin-bottom:5px}
.ck-color-lab .preset span{display:block;color:var(--ck-muted);font-size:11px;line-height:1.35}

.ck-color-lab .live-scopes{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:12px}
.ck-color-lab .scope-card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);border-radius:18px;padding:12px;min-width:0}
.ck-color-lab .scope-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ck-color-lab .scope-head strong{font-size:13px;color:var(--ck-text)}
.ck-color-lab .scope-head span{color:var(--ck-muted);font-size:11px;font-weight:700}
.ck-color-lab .scope-canvas{width:100%;display:block;background:#05070b;border:1px solid rgba(255,255,255,.075);border-radius:14px;height:180px}

.ck-color-lab .curve-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.ck-color-lab .curve-canvas{width:100%;height:320px;display:block;background:#05070b;border:1px solid rgba(255,255,255,.08);border-radius:16px}
.ck-color-lab .curve-list{display:grid;gap:10px}
.ck-color-lab .curve-item{
  padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);cursor:pointer;font-family:inherit;text-align:left;color:#fff;transition:all .18s ease;
}
.ck-color-lab .curve-item:hover,.ck-color-lab .curve-item.active{border-color:rgba(227,54,62,.35);background:rgba(227,54,62,.08)}
.ck-color-lab .curve-item strong{display:block;font-size:13px;margin-bottom:4px}
.ck-color-lab .curve-item span{display:block;color:var(--ck-muted);font-size:11px;line-height:1.35}
.ck-color-lab .curve-meta{margin-top:12px;color:var(--ck-muted);font-size:12px;line-height:1.5}

.ck-color-lab .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ck-color-lab .gallery-shot{
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:16px;overflow:hidden;
  cursor:pointer;font-family:inherit;padding:0;text-align:left;color:inherit;transition:all .18s ease;
}
.ck-color-lab .gallery-shot:hover{transform:translateY(-2px);border-color:rgba(227,54,62,.35)}
.ck-color-lab .gallery-shot canvas{width:100%;aspect-ratio:16/10;display:block;background:#05070b}
.ck-color-lab .gallery-shot .copy{padding:10px}
.ck-color-lab .gallery-shot strong{display:block;font-size:12px;color:var(--ck-text)}
.ck-color-lab .gallery-shot span{color:var(--ck-muted);font-size:11px;line-height:1.35;display:block}

.ck-color-lab .nodes-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.ck-color-lab .node-stage{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16)}
.ck-color-lab .node-flow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ck-color-lab .node{
  min-width:100px;padding:14px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));text-align:center;
}
.ck-color-lab .node strong{display:block;font-size:12px;color:var(--ck-text)}
.ck-color-lab .node span{display:block;font-size:11px;color:var(--ck-muted)}
.ck-color-lab .node.active{border-color:rgba(227,54,62,.44);background:linear-gradient(180deg, rgba(227,54,62,.16), rgba(255,255,255,.04))}
.ck-color-lab .node-clickable{
  cursor:pointer;font-family:inherit;text-align:center;color:inherit;padding:14px 12px;
  transition:border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ck-color-lab .node-clickable:hover{border-color:rgba(255,255,255,.28)}
.ck-color-lab .node-clickable.selected{
  border-color:rgba(227,54,62,.55);
  box-shadow:0 0 0 1px rgba(227,54,62,.2) inset, 0 0 24px rgba(227,54,62,.12);
  background:linear-gradient(180deg, rgba(227,54,62,.18), rgba(255,255,255,.04));
}
.ck-color-lab .node-clickable.has-changes strong::after{content:" ·";color:var(--ck-red)}
.ck-color-lab .node-clickable.bypassed{opacity:.45}
.ck-color-lab .node-bypass{
  display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);
  font-size:9px;font-weight:900;letter-spacing:.5px;cursor:pointer;font-family:inherit;color:#fff;
}
.ck-color-lab .node-bypass[aria-pressed="false"]{color:#ff8a8a;border-color:rgba(255,100,100,.4)}
.ck-color-lab .node-static{opacity:.7}
.ck-color-lab .arrow{flex:1 1 20px;height:2px;min-width:20px;background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.05))}
.ck-color-lab .node-detail{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);padding:15px}
.ck-color-lab .node-detail h3{margin:0 0 6px;font-size:16px;color:var(--ck-text);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ck-color-lab .node-detail .node-sub{color:var(--ck-muted);font-size:12px;font-weight:700;margin:0 0 10px}
.ck-color-lab .node-detail p{margin:0 0 14px;color:var(--ck-muted);line-height:1.55;font-size:13px}
.ck-color-lab .node-tag{font-size:10px;padding:3px 8px;border-radius:999px;background:rgba(65,226,140,.15);color:#7dffb8;border:1px solid rgba(65,226,140,.3)}
.ck-color-lab .node-tag.off{background:rgba(255,100,100,.12);color:#ffb0b0;border-color:rgba(255,100,100,.3)}
.ck-color-lab .node-edit-btn{margin-top:4px;font-size:12px;padding:10px 14px}
.ck-color-lab .node-focus{
  border-color:rgba(227,54,62,.45)!important;
  box-shadow:0 0 0 1px rgba(227,54,62,.15) inset;
}
.ck-color-lab .compare-wipe{
  position:absolute;left:14px;right:14px;bottom:52px;z-index:6;
  display:none;align-items:center;gap:10px;pointer-events:auto;
}
.ck-color-lab .compare-wipe.visible{display:flex}
.ck-color-lab .compare-wipe input{flex:1;accent-color:var(--ck-red);cursor:pointer}
.ck-color-lab .compare-wipe span{font-size:10px;font-weight:800;color:rgba(255,255,255,.7);white-space:nowrap}
.ck-color-lab .btn.compare.active{background:rgba(227,54,62,.22);border-color:rgba(227,54,62,.45)}

@media (max-width:1260px){
  .ck-color-lab .color-layout,.ck-color-lab .curve-layout,.ck-color-lab .nodes-layout,.ck-color-lab .live-scopes{grid-template-columns:1fr}
}
@media (max-width:980px){
  .ck-color-lab .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .ck-color-lab .hero{grid-template-columns:1fr}
  .ck-color-lab .hero-actions{justify-content:flex-start}
  .ck-color-lab .slider-grid,.ck-color-lab .preset-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ck-color-lab .viewer{min-height:320px}
  .ck-color-lab .viewer canvas#previewCanvas{min-height:320px;height:360px}
  .ck-color-lab .wheels{grid-template-columns:1fr}
  .ck-color-lab .gallery-grid{grid-template-columns:1fr}
}