/* Renk araçları (sekme ve kart temeli text.css'ten gelir). Renkler JS'ten CSSOM ile atanır. */
.cp-panel { padding: 20px; display: grid; gap: 22px; }
.cp-panel[hidden] { display: none; }
.cp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .cp-main { grid-template-columns: minmax(0, 1fr); } }
.cp-left { display: grid; gap: 12px; align-content: start; }
.cp-preview { height: 150px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(var(--c, transparent), var(--c, transparent)), conic-gradient(#d9dde3 25%, #fff 0 50%, #d9dde3 0 75%, #fff 0) 0 0 / auto, #fff; background-size: auto, 20px 20px; }
.cp-inputs { display: flex; gap: 10px; align-items: stretch; }
.cp-picker { width: 52px; min-width: 52px; height: 44px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; }
.cp-text {
  flex: 1; min-width: 0; padding: 10px 12px; font: 500 15px var(--font-file); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
}
.cp-text:focus-visible, .cp-picker:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.cp-text.bad { border-color: var(--danger); }
.cp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-actions .btn-ghost, .ct-inputs .btn-ghost { border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; color: var(--ink); }
.cp-actions .btn-ghost:hover, .ct-inputs .btn-ghost:hover { border-color: var(--signal); }
.cp-left .msg { margin: 0; min-height: 0; }
.cp-left .msg:empty { display: none; }
.cp-left .msg.warn { color: var(--danger); }
.cp-left .note, .ct-result .note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.cp-values { margin: 0; display: grid; gap: 10px; }
.cp-val { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.cp-val dt { margin: 0; font: 600 13px var(--font-ui); color: var(--muted); }
.cp-val dd { margin: 0; font: 600 15px var(--font-file); overflow-wrap: anywhere; }
.cp-copy { padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }

.cp-groups { display: grid; gap: 16px; }
.cp-groups h2 { margin: 0 0 8px; font-size: 14px; letter-spacing: -.01em; color: var(--muted); font-weight: 600; }
.cp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-sw { display: grid; gap: 4px; justify-items: center; padding: 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; color: var(--ink); font: inherit; }
.cp-sw:hover { border-color: var(--signal); }
.cp-sw:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.cp-chip { display: block; width: 62px; height: 44px; border-radius: 8px; border: 1px solid var(--line); }
.cp-hex { font: 500 11.5px var(--font-file); color: var(--muted); }

.ct-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: end; }
@media (max-width: 760px) { .ct-inputs { grid-template-columns: minmax(0, 1fr); } }
.ct-field { display: grid; gap: 6px; }
.ct-label { font-weight: 600; font-size: 14px; }
.ct-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 760px) { .ct-out { grid-template-columns: minmax(0, 1fr); } }
.ct-sample { padding: 22px; border-radius: 14px; border: 1px solid var(--line); min-height: 150px; }
.ct-sample p { margin: 0 0 8px; }
.ct-big { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.ct-ratio { margin: 0 0 12px; font: 700 30px var(--font-file); letter-spacing: -.02em; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ct-table th, .ct-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.ct-table th { color: var(--muted); font-weight: 600; font-size: 13px; }
.ct-table tr.ok td:last-child { color: #2f9e6b; font-weight: 600; }
.ct-table tr.bad td:last-child { color: var(--danger); font-weight: 600; }

/* Resimden renk */
.cp-drop { padding: 34px 20px; text-align: center; border: 2px dashed var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; color: var(--muted); }
.cp-drop p { margin: 0; font-size: 15px; }
.cp-drop strong { color: var(--ink); }
.cp-drop:hover, .cp-drop.over { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 6%, var(--paper)); }
.cp-drop:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.cp-drop[hidden] { display: none; }
.cp-panel[data-for="image"] .msg { margin: 0; min-height: 0; }
.cp-panel[data-for="image"] .msg:empty { display: none; }
.cp-panel[data-for="image"] .msg.warn { color: var(--danger); }
.cp-panel[data-for="image"] .note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cp-imgwork { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.cp-imgwork[hidden] { display: none; }
@media (max-width: 860px) { .cp-imgwork { grid-template-columns: minmax(0, 1fr); } }
.img-wrap { position: relative; background: repeating-conic-gradient(#d9dde3 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; line-height: 0; }
#imgCanvas { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; cursor: crosshair; }
#imgCanvas:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
.img-loupe { position: absolute; z-index: 2; width: 99px; pointer-events: none; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(8, 12, 22, .45); overflow: hidden; background: #fff; }
.img-loupe[hidden] { display: none; }
.img-loupe canvas { display: block; width: 99px; height: 99px; }
.img-loupe-hex { display: block; padding: 3px 0; text-align: center; font: 600 12px/1.2 var(--font-file); background: #fff; color: #0f1b2d; }
.img-side { display: grid; gap: 12px; align-content: start; }
.img-side h2 { margin: 0; font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: -.01em; }
.img-side .btn-ghost { justify-self: start; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; color: var(--ink); }
.img-sel { height: 64px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(var(--c, transparent), var(--c, transparent)), repeating-conic-gradient(#d9dde3 0 25%, #fff 0 50%) 0 0 / 14px 14px; }