.tm-color-picker{display:block;position:relative;margin:0 auto;max-width:1200px}.tm-color-picker *,.tm-color-picker *:before,.tm-color-picker *:after{box-sizing:border-box}.tm-color-picker__sr-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.tm-color-picker__toast{position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%);background:var(--fg-strong);color:var(--fg-invert, #FFFFFF);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);box-shadow:var(--shadow-lift);z-index:200;pointer-events:none}.tm-color-picker__trust-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-success-subtle);color:var(--color-success);font-size:var(--text-sm);font-weight:var(--weight-medium);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-4)}.tm-color-picker__mode-toggle{display:flex;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-1);margin:0 auto var(--space-6);box-shadow:var(--shadow-soft);max-width:400px}.tm-color-picker__mode-btn{flex:1;padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);background:transparent;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--fg-body);cursor:pointer;transition:background var(--duration-fast, .15s) var(--ease-standard, ease),color var(--duration-fast, .15s) var(--ease-standard, ease)}.tm-color-picker__mode-btn[aria-pressed=true]{background:var(--accent-primary);color:var(--fg-on-accent);box-shadow:var(--shadow-soft)}.tm-color-picker__mode-btn[aria-pressed=false]:hover{background:var(--hover-overlay)}.tm-color-picker__main{display:grid;grid-template-columns:1fr 380px;gap:var(--space-6);align-items:start}@media(max-width:900px){.tm-color-picker__main{grid-template-columns:1fr}}.tm-color-picker__card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft);overflow:hidden}.tm-color-picker__panel-heading{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em;padding:var(--space-4) var(--space-5) var(--space-2)}.tm-color-picker__image-mode{display:block}.tm-color-picker__drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);min-height:320px;margin:var(--space-5);padding:var(--space-8);border:2px dashed var(--border);border-radius:var(--radius-lg);cursor:pointer;text-align:center;background:transparent;color:var(--fg-body);transition:border-color var(--duration-fast, .15s),background var(--duration-fast, .15s)}.tm-color-picker__drop-zone:hover,.tm-color-picker__drop-zone.is-dragover{border-color:var(--accent-primary);background:var(--accent-primary-subtle)}.tm-color-picker__drop-zone:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tm-color-picker__drop-zone-icon{width:64px;height:64px;color:var(--fg-muted);opacity:.5}.tm-color-picker__drop-zone h3{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--fg-body);margin:0}.tm-color-picker__drop-zone p{margin:0;font-size:var(--text-sm);color:var(--fg-muted)}.tm-color-picker__drop-zone-caption{font-size:var(--text-xs);color:var(--fg-muted)}.tm-color-picker__drop-methods{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}.tm-color-picker__method-chip{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--bg-surface-alt);border:1px solid var(--border);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--fg-muted)}.tm-color-picker__url-row{display:flex;gap:var(--space-2);padding:0 var(--space-5) var(--space-3)}.tm-color-picker__url-input{flex:1;padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:var(--font-mono);background:var(--bg-surface);color:var(--fg-body);transition:border-color var(--duration-fast, .15s)}.tm-color-picker__url-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.tm-color-picker__inline-feedback{padding:0 var(--space-5) var(--space-4);font-size:var(--text-sm);color:var(--color-danger)}.tm-color-picker__canvas-container{position:relative;width:100%;padding:var(--space-4)}.tm-color-picker__canvas-wrapper{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:crosshair;border:1px solid var(--border);touch-action:none}.tm-color-picker__canvas{display:block;width:100%;height:auto}.tm-color-picker__image-controls{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-top:1px solid var(--border);flex-wrap:wrap}.tm-color-picker__image-controls label{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--fg-muted);display:inline-flex;align-items:center;gap:var(--space-1)}.tm-color-picker__image-controls select{padding:var(--space-1) var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-xs);background:var(--bg-surface);color:var(--fg-body);cursor:pointer}.tm-color-picker__image-controls-spacer{flex:1}.tm-color-picker__magnifier{position:absolute;width:140px;height:140px;border-radius:50%;border:3px solid var(--bg-surface);box-shadow:0 4px 20px #0000004d,inset 0 0 0 1px #0000001a;pointer-events:none;display:none;overflow:hidden;z-index:10}.tm-color-picker__magnifier.is-active{display:block}.tm-color-picker__magnifier canvas{position:absolute;top:0;left:0}.tm-color-picker__magnifier-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px #0000004d;pointer-events:none}.tm-color-picker__magnifier-label{position:absolute;bottom:6px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;font-size:10px;font-family:var(--font-mono);padding:2px 6px;border-radius:var(--radius-xs);white-space:nowrap}.tm-color-picker__spectrum{padding:var(--space-5)}.tm-color-picker__sv-field{position:relative;width:100%;aspect-ratio:1;border-radius:var(--radius-md);cursor:crosshair;overflow:hidden;border:1px solid var(--border);touch-action:none}.tm-color-picker__sv-field:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tm-color-picker__sv-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent)}.tm-color-picker__sv-black{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000)}.tm-color-picker__sv-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1px #0000004d,0 2px 6px #00000040;transform:translate(-50%,-50%);pointer-events:none}.tm-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}.tm-color-picker__slider-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--fg-muted);width:16px;text-align:center;flex-shrink:0}.tm-color-picker__slider-track{flex:1;height:14px;border-radius:var(--radius-full);position:relative;cursor:pointer;border:1px solid var(--border);touch-action:none}.tm-color-picker__slider-track:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tm-color-picker__hue-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tm-color-picker__alpha-track{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.tm-color-picker__alpha-track-gradient{position:absolute;inset:0;border-radius:var(--radius-full)}.tm-color-picker__slider-thumb{position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1px #0003,0 2px 6px #0003;transform:translate(-50%,-50%);top:50%;pointer-events:none}.tm-color-picker__spectrum-inputs{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.tm-color-picker__spectrum-inputs-row{display:grid;grid-template-columns:1fr;gap:var(--space-2)}.tm-color-picker__spectrum-inputs-row--cols-4{grid-template-columns:repeat(4,1fr)}.tm-color-picker__spectrum-row-label{font-size:10px;font-weight:var(--weight-semibold);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:calc(-1 * var(--space-1))}.tm-color-picker__input-group{display:flex;flex-direction:column;gap:2px}.tm-color-picker__input-group--full{grid-column:1 / -1}.tm-color-picker__input-group label{font-size:10px;font-weight:var(--weight-semibold);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}.tm-color-picker__input-group input{width:100%;padding:var(--space-1) var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);font-family:var(--font-mono);background:var(--bg-surface);color:var(--fg-body);text-align:center;transition:border-color var(--duration-fast, .15s)}.tm-color-picker__input-group input:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.tm-color-picker__input-group input.tm-color-picker__input--invalid{border-color:var(--color-danger);background:var(--color-danger-subtle)}.tm-color-picker__input-error{font-size:10px;color:var(--color-danger);min-height:14px;line-height:14px;padding:0 var(--space-1)}.tm-color-picker__sidebar,.tm-color-picker__sidebar-panels{display:flex;flex-direction:column;gap:var(--space-4)}.tm-color-picker__sheet-toggle{display:none}.tm-color-picker__preview-block{display:flex;align-items:stretch;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}.tm-color-picker__preview-swatch{width:80px;height:80px;border-radius:var(--radius-lg);border:1px solid var(--border);flex-shrink:0;position:relative;overflow:hidden}.tm-color-picker__preview-swatch-bg{position:absolute;inset:0;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}.tm-color-picker__preview-swatch-color{position:absolute;inset:0}.tm-color-picker__preview-info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--space-1)}.tm-color-picker__preview-hex{font-size:var(--text-2xl);font-weight:var(--weight-bold);font-family:var(--font-mono);color:var(--fg-strong)}.tm-color-picker__preview-name{font-size:var(--text-sm);color:var(--fg-muted)}.tm-color-picker__preview-actions{display:flex;gap:var(--space-2);margin-top:var(--space-1)}.tm-color-picker__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-xs);line-height:1;white-space:nowrap;cursor:pointer;user-select:none;border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);transition:background var(--duration-fast, .15s),color var(--duration-fast, .15s),border-color var(--duration-fast, .15s)}.tm-color-picker__btn--primary{background:var(--accent-primary);color:var(--fg-on-accent);border-color:var(--accent-primary)}.tm-color-picker__btn--primary:hover{background:var(--accent-primary-hover)}.tm-color-picker__btn--secondary{background:var(--bg-surface);color:var(--fg-body);border-color:var(--border)}.tm-color-picker__btn--secondary:hover{background:var(--bg-surface-alt)}.tm-color-picker__btn--ghost{background:transparent;color:var(--fg-muted)}.tm-color-picker__btn--ghost:hover{background:var(--hover-overlay);color:var(--fg-body)}.tm-color-picker__btn--lg{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);min-height:44px;min-width:44px;border-radius:var(--radius-md)}.tm-color-picker__btn:disabled{opacity:.5;cursor:not-allowed}.tm-color-picker__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tm-color-picker__output-list{padding:var(--space-2) var(--space-5) var(--space-4)}.tm-color-picker__output-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--border-subtle)}.tm-color-picker__output-row:last-child{border-bottom:none}.tm-color-picker__output-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--fg-muted);width:52px;flex-shrink:0;text-transform:uppercase;display:inline-flex;align-items:baseline;gap:4px}.tm-color-picker__output-approx{font-size:var(--text-xs);color:var(--fg-muted);text-decoration:dotted underline;cursor:help;font-weight:var(--weight-regular, 400)}.tm-color-picker__output-value{flex:1;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--fg-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tm-color-picker__output-value.is-disabled{opacity:.4;font-style:italic}.tm-color-picker__copy-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer;color:var(--fg-muted);flex-shrink:0;transition:all var(--duration-fast, .15s)}.tm-color-picker__copy-btn:hover:not(:disabled){border-color:var(--accent-primary);color:var(--accent-primary);background:var(--accent-primary-subtle)}.tm-color-picker__copy-btn.is-copied{border-color:var(--color-success);color:var(--color-success);background:var(--color-success-subtle)}.tm-color-picker__copy-btn:disabled{opacity:.4;cursor:not-allowed}.tm-color-picker__copy-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tm-color-picker__recent-section,.tm-color-picker__palette-section{padding:var(--space-3) var(--space-5);border-top:1px solid var(--border)}.tm-color-picker__palette-section{padding-bottom:var(--space-4)}.tm-color-picker__section-label{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2)}.tm-color-picker__section-label--inline{margin:0}.tm-color-picker__palette-count{font-weight:var(--weight-regular);text-transform:none;letter-spacing:normal}.tm-color-picker__swatch-strip{display:flex;gap:var(--space-1);flex-wrap:wrap}.tm-color-picker__swatch{width:28px;height:28px;border-radius:var(--radius-sm);border:2px solid transparent;background:transparent;padding:0;cursor:pointer;transition:transform var(--duration-fast, .15s),border-color var(--duration-fast, .15s)}.tm-color-picker__swatch:hover{transform:scale(1.15);border-color:var(--accent-primary)}.tm-color-picker__swatch:focus-visible{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.tm-color-picker__swatch-empty{width:28px;height:28px;border-radius:var(--radius-sm);border:1px dashed var(--border)}.tm-color-picker__palette-swatches{display:flex;gap:var(--space-1);flex-wrap:wrap;margin-bottom:var(--space-3)}.tm-color-picker__palette-swatch-wrap{position:relative}.tm-color-picker__palette-swatch{width:32px;height:32px;border-radius:var(--radius-sm);border:2px solid transparent;background:transparent;padding:0;cursor:pointer;transition:transform var(--duration-fast, .15s),border-color var(--duration-fast, .15s)}.tm-color-picker__palette-swatch:hover{transform:scale(1.1);border-color:var(--fg-body)}.tm-color-picker__palette-swatch:focus-visible{outline:none;border-color:var(--fg-body);box-shadow:var(--focus-ring)}.tm-color-picker__remove-x{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--color-danger);color:#fff;font-size:10px;display:none;align-items:center;justify-content:center;line-height:1;cursor:pointer;border:1.5px solid var(--bg-surface);padding:0}.tm-color-picker__palette-swatch-wrap:hover .tm-color-picker__remove-x,.tm-color-picker__palette-swatch-wrap:focus-within .tm-color-picker__remove-x{display:flex}.tm-color-picker__remove-x:focus-visible{display:flex;outline:none;box-shadow:var(--focus-ring)}.tm-color-picker__palette-warning{font-size:var(--text-xs);color:var(--color-warning);background:var(--color-warning-subtle);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-1)}.tm-color-picker__palette-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.tm-color-picker__export-dropdown{position:relative;display:inline-block}.tm-color-picker__export-menu{position:absolute;bottom:100%;left:0;margin-bottom:var(--space-1);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lift);min-width:180px;z-index:20;padding:var(--space-1);display:block}.tm-color-picker__export-menu button{display:block;width:100%;text-align:left;padding:var(--space-2) var(--space-3);border:none;background:transparent;font-size:var(--text-sm);cursor:pointer;border-radius:var(--radius-sm);color:var(--fg-body)}.tm-color-picker__export-menu button:hover{background:var(--hover-overlay)}.tm-color-picker__export-menu button:focus-visible{outline:none;background:var(--accent-primary-subtle);box-shadow:var(--focus-ring)}.tm-color-picker__contrast-panel{padding:var(--space-4) var(--space-5)}.tm-color-picker__contrast-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.tm-color-picker__contrast-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}.tm-color-picker__contrast-row:last-child{border-bottom:none}.tm-color-picker__contrast-pair{display:flex;gap:2px;flex-shrink:0}.tm-color-picker__contrast-fg,.tm-color-picker__contrast-bg{width:24px;height:24px;border-radius:var(--radius-xs);border:1px solid var(--border)}.tm-color-picker__contrast-label{font-size:var(--text-xs);color:var(--fg-muted);width:70px;flex-shrink:0}.tm-color-picker__contrast-ratio{font-size:var(--text-sm);font-weight:var(--weight-bold);font-family:var(--font-mono);min-width:48px}.tm-color-picker__contrast-badges{display:flex;gap:var(--space-1);flex-wrap:wrap}.tm-color-picker__badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:var(--radius-xs);font-size:10px;font-weight:var(--weight-bold);letter-spacing:.04em}.tm-color-picker__badge--pass{background:var(--color-success-subtle);color:var(--color-success)}.tm-color-picker__badge--fail{background:var(--color-danger-subtle);color:var(--color-danger)}.tm-color-picker__contrast-custom{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border-subtle);flex-wrap:wrap}.tm-color-picker__contrast-custom label{font-size:var(--text-xs);color:var(--fg-muted);white-space:nowrap}.tm-color-picker__contrast-color-input{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:2px;background:var(--bg-surface)}.tm-color-picker__contrast-hex-input{width:90px;padding:var(--space-1) var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:var(--font-mono);background:var(--bg-surface);color:var(--fg-body)}.tm-color-picker__contrast-hex-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.tm-color-picker__swap-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer;color:var(--fg-muted);font-size:var(--text-xs)}.tm-color-picker__swap-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.tm-color-picker__swap-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tm-color-picker__samples{margin-top:var(--space-6);padding:var(--space-4) var(--space-5);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft)}.tm-color-picker__samples-strip{display:flex;gap:var(--space-3);flex-wrap:wrap}.tm-color-picker__sample-color{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);background:transparent;border:0;padding:0;cursor:pointer}.tm-color-picker__sample-swatch{width:48px;height:48px;border-radius:var(--radius-md);border:2px solid transparent;transition:transform var(--duration-fast, .15s),border-color var(--duration-fast, .15s);display:block}.tm-color-picker__sample-color:hover .tm-color-picker__sample-swatch{transform:scale(1.08);border-color:var(--fg-body)}.tm-color-picker__sample-color:focus-visible{outline:none}.tm-color-picker__sample-color:focus-visible .tm-color-picker__sample-swatch{border-color:var(--fg-body);box-shadow:var(--focus-ring)}.tm-color-picker__sample-label{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--fg-muted)}@media(max-width:640px){.tm-color-picker__main{gap:var(--space-4)}.tm-color-picker__output-row{flex-wrap:nowrap}.tm-color-picker__preview-block{flex-direction:column;align-items:flex-start}.tm-color-picker__preview-swatch{width:100%;height:60px}.tm-color-picker__sidebar{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:0 var(--space-3) max(var(--space-3),env(safe-area-inset-bottom));pointer-events:none}.tm-color-picker__sheet-toggle,.tm-color-picker__sidebar-panels{pointer-events:auto}.tm-color-picker__sheet-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-surface);color:var(--fg-body);box-shadow:var(--shadow-lift);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer}.tm-color-picker__sheet-toggle:after{content:"↑";font-size:var(--text-base);transition:transform var(--duration-base, .2s) var(--ease-standard, ease)}.tm-color-picker__sidebar.is-open .tm-color-picker__sheet-toggle:after{transform:rotate(180deg)}.tm-color-picker__sidebar-panels{display:none;max-height:min(68vh,560px);overflow:auto;padding-top:var(--space-3)}.tm-color-picker__sidebar.is-open .tm-color-picker__sidebar-panels{display:flex}}