.jtc-native-color-panel,
.jtc-color-magnifier {
  box-sizing: border-box;
  position: fixed;
  z-index: 1200;
  color: var(--painting-text-body, var(--color-text-primary));
  background: var(--painting-surface-raised, var(--color-surface));
  border: 1px solid var(--painting-line, var(--color-border));
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 12px 36px #0003;
  font: inherit;
}
.painting-ps-swatches [data-native-color-open] { background: linear-gradient(var(--jtc-color, #272522),var(--jtc-color, #272522)),repeating-conic-gradient(#e7e7e7 0% 25%,#fff 0% 50%) 0 0 / 8px 8px; cursor: pointer; }
.painting-color-swap { position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; padding: 0; border: 1px solid var(--painting-line); background: var(--painting-surface-raised); color: var(--painting-text-body); border-radius: 5px; font: inherit; }
.painting-ps-swatches [data-native-color-open]:focus-visible,.painting-color-swap:focus-visible { outline: 2px solid var(--painting-accent); outline-offset: 2px; }
.jtc-native-color-panel { width: min(328px, calc(100vw - 16px)); padding: 12px; overflow-y: auto; overscroll-behavior: contain; animation: jtc-color-enter 140ms cubic-bezier(.2,0,0,1); }
.jtc-native-color-panel header,
.jtc-native-color-panel footer,
.jtc-color-slot-row,
.jtc-color-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jtc-native-color-panel header { justify-content: space-between; margin-bottom: 10px; }
.jtc-native-color-panel footer { justify-content: flex-end; padding-top: 10px; }
.jtc-native-color-panel button,
.jtc-native-color-panel input,
.jtc-native-color-panel select { box-sizing: border-box; font: inherit; color: inherit; min-width: 0; min-height: 32px; border: 1px solid var(--painting-line, var(--color-border)); border-radius: var(--radius-sm, 6px); background: var(--painting-surface, var(--color-background)); }
.jtc-native-color-panel button { padding: 5px 9px; cursor: pointer; }
.jtc-native-color-panel button[aria-pressed='true'],
.jtc-native-color-panel [data-native-color-action='apply'] { color: var(--painting-accent, var(--color-accent)); background: var(--painting-accent-soft, var(--color-accent-soft)); }
.jtc-native-color-panel :is(button,input,select):focus-visible { outline: 2px solid var(--painting-focus, var(--color-accent)); outline-offset: 2px; }
.jtc-native-color-panel :disabled { opacity: .55; cursor: wait; }
.jtc-native-color-panel label { display: grid; gap: 4px; min-width: 0; margin-top: 8px; font-size: var(--painting-font-support, 11px); }
.jtc-native-color-panel input:not([type='range']),
.jtc-native-color-panel select { width: 100%; padding: 5px 7px; text-align: left; }
.jtc-color-sv { position: relative; height: 150px; margin-top: 10px; background: linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--jtc-color-hue); border: 1px solid var(--painting-line); border-radius: var(--radius-sm,6px); touch-action: none; cursor: crosshair; overflow: hidden; }
.jtc-color-sv > i { position: absolute; left: var(--jtc-color-s); top: var(--jtc-color-v); width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; transform: translate(-50%,-50%); pointer-events: none; }
.jtc-color-wide-label { grid-template-columns: 50px minmax(0,1fr); align-items: center; }
.jtc-color-values { display: grid; grid-template-columns: minmax(90px,2fr) repeat(3,minmax(0,1fr)); gap: 5px; }
.jtc-color-tools { margin-top: 8px; }
.jtc-color-palette { margin-top: 12px; min-width: 0; }
.jtc-color-palette > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jtc-color-palette strong { font-size: var(--painting-font-support,11px); }
.jtc-color-palette span:not(.jtc-color-favorite) { color: var(--painting-text-muted); overflow-wrap: anywhere; }
.jtc-color-swatch,
.jtc-color-loupe-swatches > i { background: repeating-conic-gradient(#e7e7e7 0% 25%,#fff 0% 50%) 0 0 / 10px 10px !important; position: relative; overflow: hidden; }
.jtc-color-swatch { width: 32px; height: 32px; padding: 0 !important; }
.jtc-color-swatch > i,
.jtc-color-loupe-swatches > i::after { position: absolute; inset: 0; background: var(--jtc-color); content: ''; }
.jtc-color-favorite { display: flex; align-items: center; gap: 1px; }
.jtc-color-favorite > button:last-child { padding: 2px 4px; }
.jtc-color-sampling { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 8px; }
.jtc-color-note { margin: 10px 0 0; font-size: var(--painting-font-support,11px); color: var(--painting-text-muted); overflow-wrap: anywhere; }
.jtc-native-color-panel [role='status'] { margin: 8px 0 0; color: var(--color-danger,#a53737); overflow-wrap: anywhere; }
.jtc-color-magnifier { pointer-events: none; width: 168px; padding: 8px; overflow: hidden; }
.jtc-color-pixel-grid { display: grid; grid-template-columns: repeat(var(--jtc-grid),1fr); grid-template-rows: repeat(var(--jtc-grid),1fr); width: 150px; height: 150px; background: repeating-conic-gradient(#e7e7e7 0% 25%,#fff 0% 50%) 0 0 / 12px 12px; }
.jtc-color-pixel-grid > i { background: var(--jtc-color); min-width: 0; min-height: 0; }
.jtc-color-pixel-grid > .is-center { outline: 1px solid #fff; box-shadow: inset 0 0 0 1px #000; position: relative; }
.jtc-color-pixel-grid > .is-center::before,
.jtc-color-pixel-grid > .is-center::after { content: ''; position: absolute; background: #000; }
.jtc-color-pixel-grid > .is-center::before { left: 50%; top: 0; width: 1px; height: 100%; }
.jtc-color-pixel-grid > .is-center::after { top: 50%; left: 0; height: 1px; width: 100%; }
.jtc-color-loupe-swatches { display: flex; margin-top: 6px; gap: 6px; }
.jtc-color-loupe-swatches > i { width: 25px; height: 18px; border: 1px solid var(--painting-line); }
.jtc-color-magnifier > strong { display: block; margin-top: 4px; font-size: 10px; overflow-wrap: anywhere; }
@keyframes jtc-color-enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (pointer: coarse) { .jtc-native-color-panel :is(button,input,select) { min-height: 44px; } .jtc-color-swatch { min-width: 44px; } .painting-ps-swatches [data-native-color-open],.painting-color-swap { min-width: 44px; min-height: 44px; } .painting-ps-swatches { min-width: 98px; min-height: 88px; } .painting-color-swap { right: 0; top: 44px; } }
@media (max-width: 600px) { .jtc-native-color-panel { left: 8px !important; top: auto !important; bottom: max(8px,env(safe-area-inset-bottom)); width: calc(100vw - 16px); max-height: min(72dvh,calc(100dvh - 16px)) !important; } .jtc-color-sv { height: 132px; } }
@media (prefers-reduced-motion: reduce) { .jtc-native-color-panel { animation-duration: 80ms; } }