/* Shared by the server-rendered page and the Vue workspace. */
.color-picker { --picker-bg: #17211f; --picker-card: #212e2a; --picker-text: #ebf0e9; --picker-muted: #b0bdb6; --picker-border: #3b4b43; --picker-soft: #293a32; --picker-accent: #a9d2b9; color-scheme: dark; color: var(--picker-text); background: var(--picker-bg); margin-top: 64px; padding: 42px 0 0; font-family: inherit; line-height: 1.5; }
.picker-tool { width: 100%; max-width: 1048px; margin: 0 auto; padding: 0 24px; }
.color-picker *, .color-picker *::before, .color-picker *::after { box-sizing: border-box; }
.color-picker h1, .color-picker h2, .color-picker h3, .color-picker p { margin: 0; color: inherit; }
.color-picker h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.25; }
.color-picker h2 { font-size: 18px; font-weight: 650; }
.color-picker h3 { font-size: 16px; font-weight: 650; }
.picker-heading { text-align: center; margin-bottom: 14px; }
.color-picker .picker-eyebrow { color: var(--picker-accent); font-size: 12px; font-weight: 700; letter-spacing: .14em; margin-bottom: 12px; }
.color-picker .picker-description { color: var(--picker-muted); font-size: 15px; margin-top: 12px; }
.color-picker .picker-muted { color: var(--picker-muted); font-size: 12px; }
.color-picker button, .color-picker input, .color-picker select { font: inherit; }
.color-picker button { cursor: pointer; }
.color-picker button:disabled { opacity: .4; cursor: not-allowed; }
[data-picker-server] .picker-palette-color { opacity: 1; }
.picker-workspace { position: relative; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr); gap: 38px; background: var(--picker-card); border: 1px solid var(--picker-border); border-radius: 24px; padding: 32px; align-items: start; }
.picker-image-column, .picker-color-column { min-width: 0; }
.picker-workspace:fullscreen, .picker-workspace.is-expanded { padding: 38px; border-radius: 0; overflow: auto; }
.picker-workspace.is-expanded { position: fixed; inset: 0; z-index: 1500; }
.picker-card { background: var(--picker-card); border: 1px solid var(--picker-border); border-radius: 16px; }
.picker-card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 22px; }
.picker-dimensions { font-size: 12px; color: var(--picker-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.picker-stage { min-height: 200px; position: relative; display: flex; justify-content: center; align-items: center; background: var(--picker-bg); border-radius: 5px; }
.picker-canvas-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.picker-image-canvas { display: block; max-width: 100%; max-height: 620px; width: auto; height: auto; cursor: crosshair; background-color: #f0f0f0; background-image: conic-gradient(#ddd 25%, transparent 0 50%, #ddd 0 75%, transparent 0); background-size: 16px 16px; }
.picker-point, .picker-match-point { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.picker-point { width: 16px; height: 16px; border: 2px solid #fff; box-shadow: 0 0 0 1px #17211f; }
.picker-match-point { width: clamp(18px, 2.5vw, 30px); height: clamp(18px, 2.5vw, 30px); background: #fff9ef; border: 4px solid var(--match-color); box-shadow: 0 0 0 2px #fff9efb3, 0 0 0 6px var(--match-glow), 0 2px 6px #0003; }
.picker-loupe { position: absolute; pointer-events: none; z-index: 3; width: 100px; height: 100px; border: 2px solid #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 18px #0007; }
.picker-loupe-pixels { position: relative; width: 96px; height: 96px; background: conic-gradient(#ddd 25%, #fff 0 50%, #ddd 0 75%, #fff 0); background-size: 19.2px 19.2px; }
.picker-loupe-pixels canvas { display: block; width: 96px; height: 96px; image-rendering: pixelated; }
.picker-loupe-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, transparent 18.2px, #ffffff40 18.2px), linear-gradient(to bottom, transparent 18.2px, #ffffff40 18.2px); background-size: 19.2px 19.2px; }
.picker-loupe-crosshair { position: absolute; width: 19.2px; height: 19.2px; left: 38.4px; top: 38.4px; border: 2px solid #ff2626; }
.picker-loupe-crosshair::before, .picker-loupe-crosshair::after { content: ''; position: absolute; background: #ff2626; }
.picker-loupe-crosshair::before { height: 1px; left: 3px; right: 3px; top: 50%; }
.picker-loupe-crosshair::after { width: 1px; top: 3px; bottom: 3px; left: 50%; }
.picker-loading { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: #17211fe0; color: var(--picker-text); font-weight: 600; z-index: 4; }
.picker-image-footer { display: flex; gap: 12px; justify-content: space-between; padding-top: 12px; }
.picker-filename { font-size: 12px; color: var(--picker-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.color-picker .picker-image-help { padding-top: 5px; font-size: 12px; }
.picker-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid var(--picker-border); border-radius: 50%; color: var(--picker-text); background: var(--picker-soft); box-shadow: 0 3px 7px #0002; transition: background-color .15s, border-color .15s; }
.picker-icon-button:hover:not(:disabled) { border-color: var(--picker-accent); background: #3b5144; }
.picker-icon-button svg { width: 22px; height: 22px; }
.picker-expand { position: absolute; right: -14px; top: -14px; z-index: 5; background: #111a17; border-color: var(--picker-border); }
.picker-workspace.is-expanded .picker-expand, .picker-workspace:fullscreen .picker-expand { top: 12px; right: 12px; }
.picker-palette-card { padding-top: 32px; }
.picker-palette-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.picker-count { position: relative; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 11px; color: var(--picker-muted); margin: 0; }
.picker-count-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 64px; min-height: 36px; padding: 7px 10px; border: 1px solid var(--picker-border); border-radius: 9px; color: var(--picker-text); background: var(--picker-bg); font-variant-numeric: tabular-nums; }
.picker-count-trigger:hover:not(:disabled), .picker-count-trigger.is-open { border-color: var(--picker-accent); background: var(--picker-soft); }
.picker-count-trigger svg { width: 14px; height: 14px; color: var(--picker-muted); }
.picker-count-trigger.is-open svg { transform: rotate(180deg); }
.picker-count-options { position: absolute; z-index: 6; top: calc(100% + 8px); right: 0; min-width: 96px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid var(--picker-border); border-radius: 12px; background: var(--picker-bg); box-shadow: 0 12px 32px #0006; scrollbar-width: thin; scrollbar-color: var(--picker-border) transparent; }
.picker-count-options.opens-up { top: auto; bottom: calc(100% + 8px); }
.picker-count-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--picker-text); font-size: 12px !important; font-variant-numeric: tabular-nums; text-align: left; }
.picker-count-option.is-active { background: var(--picker-soft); }
.picker-count-option.is-selected { color: var(--picker-accent); font-weight: 650; }
.picker-count-option svg { width: 14px; height: 14px; flex-shrink: 0; }
.picker-palette-toolbar { display: flex; align-items: center; gap: 14px; }
.picker-count-buttons, .picker-export-buttons { display: flex; gap: 8px; }
.picker-palette-strip { flex: 1; min-width: 0; display: flex; height: 54px; border-radius: 8px; overflow: hidden; }
.picker-palette-color { position: relative; flex: 1; min-width: 0; border: none; padding: 0; background: transparent; }
.picker-palette-color > span:first-child { display: block; position: absolute; inset: 0; }
.picker-palette-color:hover { box-shadow: inset 0 0 0 2px #fff; }
.picker-palette-color:hover > span:first-child { inset: 2px; }
.picker-palette-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #0e1412; box-shadow: 0 0 0 2px #fff9; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.picker-palette-hint { margin-top: 14px !important; }
.picker-match-status { color: var(--picker-accent) !important; font-size: 12px; margin-top: 6px !important; }
.picker-empty-palette { flex: 1; }
.picker-extra-tools { margin-top: 16px; }
.color-picker summary { cursor: pointer; font-size: 13px; color: var(--picker-muted); width: fit-content; }
.color-picker summary:hover { color: var(--picker-accent); }
.picker-palette-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.picker-checker { background-color: #f0f0f0; background-image: conic-gradient(#ddd 25%, transparent 0 50%, #ddd 0 75%, transparent 0); background-size: 16px 16px; }
.picker-swatches { display: flex; gap: 16px; margin: 30px 0 22px; }
.picker-swatch-item { min-width: 0; }
.picker-current { width: 58%; }
.picker-preview { width: 36%; }
.picker-selected-swatch { height: 105px; border-radius: 20px; overflow: hidden; border: 1px solid var(--picker-border); }
.picker-selected-swatch > div { width: 100%; height: 100%; }
.picker-swatch-item > span { display: block; color: var(--picker-muted); font-size: 11px; margin-top: 8px; }
.color-picker .picker-transparent { padding-bottom: 12px; }
.picker-codes { display: flex; flex-direction: column; gap: 10px; }
.picker-code-row { display: flex; align-items: stretch; border: 1px solid var(--picker-border); border-radius: 12px; min-height: 49px; overflow: hidden; }
.picker-code-label { display: flex; align-items: center; width: 63px; padding: 10px 12px; border-right: 1px solid var(--picker-border); font-size: 13px; font-weight: 600; color: var(--picker-muted); flex-shrink: 0; }
.color-picker code { color: inherit; font: 12px/1.5 monospace; user-select: text; overflow-wrap: anywhere; }
.picker-code-row code { flex: 1; min-width: 0; align-self: center; padding: 10px 12px; }
.picker-copy { border: 0; background: transparent; color: var(--picker-text); cursor: pointer; font-size: 11px !important; padding: 8px; flex-shrink: 0; min-width: 38px; align-self: center; min-height: 36px; border-radius: 8px; margin-right: 5px; }
.picker-copy svg { width: 18px; height: 18px; display: block; }
.picker-copy:hover { background: var(--picker-soft); color: var(--picker-accent); }
.picker-import { margin-top: 28px; background: var(--picker-soft); border-radius: 20px; padding: 20px; }
.picker-import-buttons { display: flex; flex-direction: column; gap: 10px; padding: 18px; margin-top: 18px; background: var(--picker-bg); border: 1px solid var(--picker-border); border-radius: 16px; }
.picker-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 15px; border: 1px solid var(--picker-border); border-radius: 9px; background: var(--picker-card); color: var(--picker-text); font-size: 13px !important; font-weight: 600 !important; transition: background-color .18s, border-color .18s; }
.picker-button:hover:not(:disabled) { background: var(--picker-soft); border-color: var(--picker-accent); }
.picker-import-buttons .picker-button { width: 100%; border-radius: 999px; min-height: 44px; }
.picker-primary { background: var(--picker-accent); border-color: var(--picker-accent); color: var(--picker-bg); }
.picker-primary:hover:not(:disabled) { background: #bfe4cd; border-color: #bfe4cd; }
.picker-button svg, .picker-privacy svg { width: 19px; height: 19px; flex-shrink: 0; }
.picker-demo { align-self: center; color: var(--picker-accent); border: none; background: transparent; font-size: 12px !important; padding: 4px; }
.picker-demo:hover { text-decoration: underline; }
.picker-file-input { display: none; }
.picker-paste-hint { margin-top: 14px !important; }
.picker-url-details { margin-top: 10px; }
.picker-url-row { display: flex; gap: 8px; margin-top: 10px; }
.picker-url-row input { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--picker-border); border-radius: 9px; background: var(--picker-bg); color: var(--picker-text); padding: 8px; font-size: 12px; }
.picker-url-row input::placeholder { color: var(--picker-muted); }
.picker-url-row .picker-button { padding-inline: 10px; font-size: 12px !important; }
.color-picker .picker-url-hint { margin-top: 8px; }
.picker-privacy { display: flex; gap: 10px; align-items: flex-start; padding-top: 18px; margin-top: 16px; border-top: 1px solid var(--picker-border); }
.picker-privacy svg { color: var(--picker-accent); margin-top: 2px; }
.picker-privacy strong { display: block; color: var(--picker-accent); font-size: 13px; font-weight: 650; }
.color-picker .picker-privacy p { margin-top: 5px; color: var(--picker-muted); font-size: 12px; }
.picker-error { padding: 12px 16px; background: #472c27; border: 1px solid #82534b; border-radius: 9px; margin-top: 16px !important; color: #ffcec1 !important; font-size: 14px; }
.picker-notice { min-height: 30px; padding: 5px 2px; font-size: 12px; overflow-wrap: anywhere; color: var(--picker-accent) !important; }
.picker-recent { margin-top: 22px; padding: 20px; }
.picker-recent .picker-card-header { margin-bottom: 14px; }
.picker-recent-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.picker-recent-colors button { display: flex; align-items: center; gap: 8px; background: var(--picker-bg); color: var(--picker-text); border: 1px solid var(--picker-border); border-radius: 8px; padding: 7px 10px; }
.picker-recent-colors button:hover { border-color: var(--picker-accent); }
.picker-recent-colors button > span { width: 24px; height: 24px; border-radius: 5px; overflow: hidden; }
.picker-recent-colors button > span > span { display: block; height: 100%; }
.picker-guide { --picker-bg: #1a202c; --picker-soft: #2d3748; --picker-border: #3e4a5f; --picker-muted: #b4bfce; margin-top: 40px; padding: 32px 24px 64px; background: var(--picker-bg); }
.picker-guide-inner { max-width: 1000px; margin: 0 auto; }
.color-picker[dir="rtl"] .picker-code-row, .color-picker[dir="rtl"] .picker-export-panel pre, .color-picker[dir="rtl"] .picker-palette-strip, .color-picker[dir="rtl"] .picker-guide-hex, .color-picker[dir="rtl"] .picker-guide-palette, .color-picker[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
.color-picker .picker-guide-inner > h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 750; line-height: 1.3; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.picker-guide-inner > h2 span { color: #efbc5b; }
.picker-guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 76px 0 0; list-style: none; }
.picker-guide-step { position: relative; min-width: 0; padding: 62px 24px 30px; border: 1px solid var(--picker-border); border-radius: 18px; background: var(--picker-soft); text-align: center; }
.picker-guide-number { position: absolute; top: -34px; left: 50%; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; color: #fff; background: #397cf0; font-size: 27px; font-weight: 750; box-shadow: 0 8px 24px #0002; }
.picker-guide-step-2 .picker-guide-number { background: #efbc5b; color: #17211f; }
.picker-guide-step-3 .picker-guide-number { background: #a855ed; }
.picker-guide-visual { position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; margin-bottom: 26px; background: var(--picker-bg); }
.picker-guide-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.picker-guide-upload { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #17211f; color: #fff; box-shadow: 0 3px 12px #0003; }
.picker-guide-upload svg { width: 22px; height: 22px; }
.picker-guide-cursor { position: absolute; width: 25px; height: 25px; left: 52%; top: 56%; filter: drop-shadow(0 2px 3px #0004); }
.picker-guide-zoom { position: absolute; width: 36%; height: auto; right: 8px; bottom: 8px; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 6px 16px #0004; }
.picker-guide-palette { position: absolute; display: flex; left: 0; bottom: 0; width: 100%; height: 28px; }
.picker-guide-palette span { flex: 1; }
.picker-guide-hex { position: absolute; bottom: 38px; right: 10px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--picker-border); border-radius: 8px; background: #17211f; color: var(--picker-text); font: 11px/1.5 monospace; box-shadow: 0 3px 12px #0003; }
.picker-guide-hex svg { width: 14px; height: 14px; }
.color-picker .picker-guide h3 { font-size: 19px; font-weight: 650; line-height: 1.4; }
.color-picker .picker-guide p { color: var(--picker-muted); font-size: 13px; line-height: 1.7; margin-top: 12px; text-wrap: pretty; }
.picker-drop-overlay { position: fixed; inset: 12px; border: 3px dashed var(--picker-accent); border-radius: 18px; background: #17211fed; color: var(--picker-accent); display: flex; align-items: center; justify-content: center; font-size: 28px; z-index: 2000; pointer-events: none; }
.color-picker button:focus-visible, .color-picker input:focus-visible, .color-picker select:focus-visible, .color-picker summary:focus-visible, .picker-image-canvas:focus-visible { outline: 3px solid var(--picker-accent); outline-offset: 3px; }
.picker-palette-color:focus-visible { outline-offset: -3px !important; position: relative; z-index: 1; }
@media (max-width: 1000px) { .picker-workspace { gap: 26px; padding: 24px; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); } .picker-icon-button { width: 36px; height: 36px; } .picker-palette-toolbar { gap: 8px; flex-wrap: wrap; } .picker-palette-strip { order: -1; flex-basis: 100%; } .picker-export-buttons { margin-left: auto; } .picker-import { padding: 16px; } .picker-import-buttons { padding: 14px; } }
@media (max-width: 760px) { .picker-workspace { grid-template-columns: minmax(0, 1fr); gap: 32px; } .picker-color-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } .picker-import { margin-top: 0; } .picker-swatches { margin-top: 22px; } .picker-guide-steps { gap: 16px; } .picker-guide-step { padding-inline: 16px; } }
@media (max-width: 580px) { .color-picker { margin-top: 48px; padding: 30px 0 0; } .picker-workspace { padding: 20px 16px; border-radius: 18px; } .picker-color-column { display: block; } .picker-import { margin-top: 26px; } .picker-expand { right: -9px; top: -12px; } .picker-palette-card { padding-top: 24px; } .picker-palette-header { margin-bottom: 14px; } .picker-count { gap: 5px; } .picker-palette-strip { height: 48px; } .picker-selected-swatch { height: 96px; } .picker-tool { padding-inline: 16px; } .picker-guide { margin-top: 24px; padding: 24px 16px 40px; } .picker-guide-steps { grid-template-columns: 1fr; gap: 62px; margin-top: 64px; } .picker-guide-step { padding: 54px 24px 26px; } .picker-guide-visual { max-width: 360px; margin-inline: auto; } .picker-workspace.is-expanded, .picker-workspace:fullscreen { padding: 48px 16px 24px; } .picker-match-point { border-width: 3px; box-shadow: 0 0 0 1px #fff9efb3, 0 0 0 4px var(--match-glow); } }
body.in-mobile-app .color-picker { margin-top: 0; }

.picker-export-dialog { width: min(900px, calc(100% - 32px)); max-width: 900px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 32px 40px 24px; margin: auto; border: 1px solid var(--picker-border); border-radius: 24px; background: var(--picker-card); color: var(--picker-text); box-shadow: 0 24px 80px #0008; color-scheme: dark; overscroll-behavior: contain; }
.picker-export-dialog::backdrop { background: #07100bc4; }
.picker-export-header { position: sticky; top: 0; z-index: 1; background: var(--picker-card); padding: 10px 40px 30px; text-align: center; }
.picker-export-header h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; }
.picker-export-close { position: absolute; top: 4px; right: -12px; width: 34px; height: 34px; box-shadow: none; }
.picker-export-option { border-top: 1px solid var(--picker-border); }
.picker-export-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 24px 16px; gap: 20px; border: 0; background: transparent; color: var(--picker-text); font-size: 20px !important; font-weight: 650 !important; min-height: 78px; text-align: left; }
.picker-export-toggle:hover { color: var(--picker-accent); }
.picker-export-toggle svg { width: 23px; height: 23px; flex-shrink: 0; color: var(--picker-muted); transition: transform .15s; }
.picker-export-toggle svg.is-open { transform: rotate(180deg); }
.picker-export-panel { padding: 0 16px 24px; }
.picker-export-panel pre { background: var(--picker-bg); border: 1px solid var(--picker-border); border-radius: 10px; padding: 16px; margin: 0; overflow-x: auto; text-align: left; }
.picker-export-panel pre code { font-size: 13px; white-space: pre; overflow-wrap: normal; }
.picker-export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.picker-export-code-actions { gap: 16px; }
.picker-export-code-actions .picker-button { flex: 1; min-width: 0; min-height: 44px; border-radius: 14px; }
.picker-export-preview { display: flex; overflow-x: auto; padding-bottom: 4px; }
.picker-export-preview > div { flex: 1; min-width: 76px; text-align: center; }
.picker-export-preview > div > span { display: block; height: 100px; }
.picker-export-preview > div > span > span { display: block; height: 100%; }
.picker-export-preview code { display: block; padding: 10px 3px 0; font-size: 11px; white-space: nowrap; }
.picker-export-message { font-size: 12px; color: var(--picker-accent) !important; margin-top: 12px !important; }
.picker-export-privacy { border-top: 1px solid var(--picker-border); margin-top: 16px !important; padding-top: 16px; text-align: center; }
@media (max-width: 580px) { .picker-export-dialog { width: calc(100% - 24px); padding: 20px 16px; border-radius: 18px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); } .picker-export-header { padding: 6px 30px 22px; } .picker-export-close { right: -4px; } .picker-export-toggle { min-height: 70px; padding: 20px 8px; font-size: 18px !important; } .picker-export-panel { padding-inline: 8px; } .picker-export-panel pre { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .color-picker * { transition: none !important; } }