/* Palette tool — color.martinifrancesco.it (studio layout) */

body.body-color-app, body.body-palette-app {
    --pl-bg: #f5f5f5;
    --pl-surface: #ffffff;
    --pl-border: rgba(0, 0, 0, 0.08);
    --pl-border-strong: rgba(0, 0, 0, 0.14);
    --pl-ink: #2c2c2c;
    --pl-muted: rgba(44, 44, 44, 0.62);
    --pl-primary: var(--color-primary-500, #136ef5);
    --pl-studio-radius: 1.25rem;
    --pl-studio-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* ── Tool shell ── */
body.body-color-app .stage-palette-tool , body.body-palette-app .stage-palette-tool  {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body.body-color-app .stage-palette-tool__studio , body.body-palette-app .stage-palette-tool__studio  {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
    min-height: clamp(22rem, 52vh, 28rem);
}

/* ── Picker column (wheel) ── */
body.body-color-app .stage-palette-tool__picker , body.body-palette-app .stage-palette-tool__picker  {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-studio-radius);
    box-shadow: var(--pl-studio-shadow);
}

body.body-color-app .stage-palette-tool__wheel-wrap , body.body-palette-app .stage-palette-tool__wheel-wrap  {
    position: relative;
    width: min(100%, 18.5rem);
    aspect-ratio: 1;
}

body.body-color-app .stage-palette-tool__wheel , body.body-palette-app .stage-palette-tool__wheel  {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    border-radius: 50%;
}

body.body-color-app .stage-palette-tool__wheel-markers , body.body-palette-app .stage-palette-tool__wheel-markers  {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.body-color-app .stage-palette-tool__wheel-marker , body.body-palette-app .stage-palette-tool__wheel-marker  {
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    margin: -0.4375rem 0 0 -0.4375rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease, width 0.12s ease, height 0.12s ease, margin 0.12s ease;
}

body.body-color-app .stage-palette-tool__wheel-marker.is-base , body.body-palette-app .stage-palette-tool__wheel-marker.is-base  {
    width: 1.125rem;
    height: 1.125rem;
    margin: -0.5625rem 0 0 -0.5625rem;
    z-index: 2;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.2);
}

body.body-color-app .stage-palette-tool__harmony , body.body-palette-app .stage-palette-tool__harmony  {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}

body.body-color-app .stage-palette-tool__harmony-btn , body.body-palette-app .stage-palette-tool__harmony-btn  {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--pl-muted);
    border-radius: 0.65rem;
    padding: 0.35rem 0.45rem;
    min-width: 3.1rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

body.body-color-app .stage-palette-tool__harmony-icon , body.body-palette-app .stage-palette-tool__harmony-icon  {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--pl-border-strong);
    background: #fafafa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.body-color-app .stage-palette-tool__harmony-icon svg , body.body-palette-app .stage-palette-tool__harmony-icon svg  {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

body.body-color-app .stage-palette-tool__harmony-label , body.body-palette-app .stage-palette-tool__harmony-label  {
    font: inherit;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

body.body-color-app .stage-palette-tool__harmony-btn:hover , body.body-palette-app .stage-palette-tool__harmony-btn:hover  {
    color: var(--pl-ink);
}

body.body-color-app .stage-palette-tool__harmony-btn:hover .stage-palette-tool__harmony-icon , body.body-palette-app .stage-palette-tool__harmony-btn:hover .stage-palette-tool__harmony-icon  {
    border-color: rgba(0, 0, 0, 0.22);
    background: #fff;
}

body.body-color-app .stage-palette-tool__harmony-btn.is-active , body.body-palette-app .stage-palette-tool__harmony-btn.is-active  {
    color: var(--pl-ink);
}

body.body-color-app .stage-palette-tool__harmony-btn.is-active .stage-palette-tool__harmony-icon , body.body-palette-app .stage-palette-tool__harmony-btn.is-active .stage-palette-tool__harmony-icon  {
    border-color: var(--pl-ink);
    background: #fff;
    box-shadow: 0 0 0 1px var(--pl-ink);
}

body.body-color-app .stage-palette-tool__base , body.body-palette-app .stage-palette-tool__base  {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

body.body-color-app .stage-palette-tool__base-label , body.body-palette-app .stage-palette-tool__base-label  {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pl-muted);
}

body.body-color-app .stage-palette-tool__base-row , body.body-palette-app .stage-palette-tool__base-row  {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

body.body-color-app .stage-palette-tool__base-swatch , body.body-palette-app .stage-palette-tool__base-swatch  {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid var(--pl-border-strong);
    flex-shrink: 0;
}

body.body-color-app .stage-palette-tool__hex-input , body.body-palette-app .stage-palette-tool__hex-input  {
    flex: 1;
    min-width: 0;
    height: 2.25rem;
    padding: 0 0.65rem;
    border-radius: 0.375rem;
    border: 1px solid var(--pl-border-strong);
    background: #fff;
    color: var(--pl-ink);
    font: inherit;
    font-size: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body.body-color-app .stage-palette-tool__hex-input:focus , body.body-palette-app .stage-palette-tool__hex-input:focus  {
    outline: none;
    border-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

body.body-color-app .stage-palette-tool__hint , body.body-palette-app .stage-palette-tool__hint  {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--pl-muted);
}

/* ── Palette panel (vertical stripes) ── */
body.body-color-app .stage-palette-tool__palette-panel , body.body-palette-app .stage-palette-tool__palette-panel  {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-studio-radius);
    box-shadow: var(--pl-studio-shadow);
    overflow: hidden;
}

body.body-color-app .stage-palette-tool__palette-toolbar , body.body-palette-app .stage-palette-tool__palette-toolbar  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--pl-border);
    background: #fafafa;
}

body.body-color-app .stage-palette-tool__palette-title , body.body-palette-app .stage-palette-tool__palette-title  {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pl-ink);
}

body.body-color-app .stage-palette-tool__palette-tools , body.body-palette-app .stage-palette-tool__palette-tools  {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.body-color-app .stage-palette-tool__toolbar-btn , body.body-palette-app .stage-palette-tool__toolbar-btn  {
    appearance: none;
    border: 1px solid var(--pl-border-strong);
    background: #fff;
    color: var(--pl-ink);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

body.body-color-app .stage-palette-tool__toolbar-btn:hover , body.body-palette-app .stage-palette-tool__toolbar-btn:hover  {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.2);
}

body.body-color-app .stage-palette-tool__swatches , body.body-palette-app .stage-palette-tool__swatches  {
    flex: 1;
    display: flex;
    min-height: clamp(14rem, 38vh, 20rem);
}

body.body-color-app .stage-palette-tool__swatch , body.body-palette-app .stage-palette-tool__swatch  {
    appearance: none;
    border: none;
    padding: 0;
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    background: var(--swatch-color);
    color: var(--swatch-ink, #fff);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    transition: flex-grow 0.2s ease, filter 0.15s ease;
}

body.body-color-app .stage-palette-tool__swatch:hover , body.body-palette-app .stage-palette-tool__swatch:hover  {
    flex-grow: 1.15;
    filter: brightness(1.03);
    z-index: 1;
}

body.body-color-app .stage-palette-tool__swatch.is-base , body.body-palette-app .stage-palette-tool__swatch.is-base  {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.95);
    z-index: 2;
}

body.body-color-app .stage-palette-tool__swatch-meta , body.body-palette-app .stage-palette-tool__swatch-meta  {
    padding: 0.85rem 0.65rem 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent 85%);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--swatch-ink, #fff);
}

body.body-color-app .stage-palette-tool__swatch-hex , body.body-palette-app .stage-palette-tool__swatch-hex  {
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.02em;
}

body.body-color-app .stage-palette-tool__swatch-rgb , body.body-palette-app .stage-palette-tool__swatch-rgb  {
    font-size: 0.6875rem;
    opacity: 0.88;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.body-color-app .stage-palette-tool__swatch-copy , body.body-palette-app .stage-palette-tool__swatch-copy  {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.15s, transform 0.15s;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

body.body-color-app .stage-palette-tool__swatch:hover .stage-palette-tool__swatch-copy , body.body-palette-app .stage-palette-tool__swatch:hover .stage-palette-tool__swatch-copy  {
    opacity: 1;
    transform: scale(1);
}

body.body-color-app .stage-palette-tool__swatch-copy svg , body.body-palette-app .stage-palette-tool__swatch-copy svg  {
    width: 0.875rem;
    height: 0.875rem;
}

body.body-color-app .stage-palette-tool__palette-footer , body.body-palette-app .stage-palette-tool__palette-footer  {
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--pl-border);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: #fafafa;
}

body.body-color-app .stage-palette-tool__actions , body.body-palette-app .stage-palette-tool__actions  {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

body.body-color-app .stage-palette-tool__action-btn , body.body-palette-app .stage-palette-tool__action-btn  {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--pl-ink);
    color: #fff;
    transition: opacity 0.15s;
}

body.body-color-app .stage-palette-tool__action-btn:hover , body.body-palette-app .stage-palette-tool__action-btn:hover  {
    opacity: 0.88;
}

body.body-color-app .stage-palette-tool__action-btn--ghost , body.body-palette-app .stage-palette-tool__action-btn--ghost  {
    background: #fff;
    color: var(--pl-ink);
    border-color: var(--pl-border-strong);
}

body.body-color-app .stage-palette-tool__action-btn--ghost:hover , body.body-palette-app .stage-palette-tool__action-btn--ghost:hover  {
    background: #fff;
    opacity: 1;
    border-color: rgba(0, 0, 0, 0.22);
}

body.body-color-app .stage-palette-tool__contrast-title , body.body-palette-app .stage-palette-tool__contrast-title  {
    margin: 0 0 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pl-muted);
}

body.body-color-app .stage-palette-tool__contrast-grid , body.body-palette-app .stage-palette-tool__contrast-grid  {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

body.body-color-app .stage-palette-tool__contrast-item , body.body-palette-app .stage-palette-tool__contrast-item  {
    border-radius: 0.5rem;
    padding: 0.55rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.6875rem;
    border: 1px solid var(--pl-border);
}

body.body-color-app .stage-palette-tool__contrast-item strong , body.body-palette-app .stage-palette-tool__contrast-item strong  {
    font-size: 0.75rem;
}

body.body-color-app .stage-palette-tool__contrast-tip , body.body-palette-app .stage-palette-tool__contrast-tip  {
    margin: 0.45rem 0 0;
    font-size: 0.6875rem;
    color: var(--pl-muted);
}

/* ── Preview (collapsible) ── */
body.body-color-app .stage-palette-tool__preview-details , body.body-palette-app .stage-palette-tool__preview-details  {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-studio-radius);
    background: var(--pl-surface);
    overflow: hidden;
}

body.body-color-app .stage-palette-tool__preview-summary , body.body-palette-app .stage-palette-tool__preview-summary  {
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pl-ink);
    cursor: pointer;
    list-style: none;
    background: #fafafa;
    border-bottom: 1px solid transparent;
}

body.body-color-app .stage-palette-tool__preview-details[open] .stage-palette-tool__preview-summary , body.body-palette-app .stage-palette-tool__preview-details[open] .stage-palette-tool__preview-summary  {
    border-bottom-color: var(--pl-border);
}

body.body-color-app .stage-palette-tool__preview-summary::-webkit-details-marker , body.body-palette-app .stage-palette-tool__preview-summary::-webkit-details-marker  {
    display: none;
}

body.body-color-app .stage-palette-tool__preview , body.body-palette-app .stage-palette-tool__preview  {
    overflow: hidden;
    color: var(--pl-ink);
}

body.body-color-app .stage-palette-tool__mock , body.body-palette-app .stage-palette-tool__mock  {
    --mock-1: #136ef5;
    --mock-2: #428bf7;
    --mock-3: #141414;
    --mock-4: #a1c5fb;
    --mock-5: #f0f0f0;
    --mock-hero-ink: #fff;
}

body.body-color-app .stage-palette-tool__mock-nav , body.body-palette-app .stage-palette-tool__mock-nav  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: var(--mock-5);
    border-bottom: 1px solid var(--pl-border);
}

body.body-color-app .stage-palette-tool__mock-logo , body.body-palette-app .stage-palette-tool__mock-logo  {
    width: 5.5rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--mock-3);
}

body.body-color-app .stage-palette-tool__mock-links , body.body-palette-app .stage-palette-tool__mock-links  {
    width: 8rem;
    height: 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mock-3) 35%, transparent);
}

body.body-color-app .stage-palette-tool__mock-hero , body.body-palette-app .stage-palette-tool__mock-hero  {
    padding: 1.5rem 1.25rem 1.75rem;
    background: var(--mock-1);
    color: var(--mock-hero-ink);
}

body.body-color-app .stage-palette-tool__mock-kicker , body.body-palette-app .stage-palette-tool__mock-kicker  {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

body.body-color-app .stage-palette-tool__mock-title , body.body-palette-app .stage-palette-tool__mock-title  {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    line-height: 1.15;
}

body.body-color-app .stage-palette-tool__mock-text , body.body-palette-app .stage-palette-tool__mock-text  {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 36ch;
    opacity: 0.92;
}

body.body-color-app .stage-palette-tool__mock-cta-row , body.body-palette-app .stage-palette-tool__mock-cta-row  {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.body-color-app .stage-palette-tool__mock-btn , body.body-palette-app .stage-palette-tool__mock-btn  {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

body.body-color-app .stage-palette-tool__mock-btn--primary , body.body-palette-app .stage-palette-tool__mock-btn--primary  {
    background: var(--mock-hero-ink);
    color: var(--mock-1);
}

body.body-color-app .stage-palette-tool__mock-btn--secondary , body.body-palette-app .stage-palette-tool__mock-btn--secondary  {
    background: transparent;
    color: var(--mock-hero-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mock-hero-ink) 55%, transparent);
}

body.body-color-app .stage-palette-tool__mock-cards , body.body-palette-app .stage-palette-tool__mock-cards  {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    background: #fff;
}

body.body-color-app .stage-palette-tool__mock-card , body.body-palette-app .stage-palette-tool__mock-card  {
    border-radius: 0.75rem;
    border: 1px solid var(--pl-border);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--mock-5) 65%, #fff);
}

body.body-color-app .stage-palette-tool__mock-card:nth-child(1) span , body.body-palette-app .stage-palette-tool__mock-card:nth-child(1) span  {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--mock-2);
}

body.body-color-app .stage-palette-tool__mock-card:nth-child(2) span , body.body-palette-app .stage-palette-tool__mock-card:nth-child(2) span  {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--mock-4);
}

body.body-color-app .stage-palette-tool__mock-card:nth-child(3) span , body.body-palette-app .stage-palette-tool__mock-card:nth-child(3) span  {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--mock-3);
}

body.body-color-app .stage-palette-tool__mock-card strong , body.body-palette-app .stage-palette-tool__mock-card strong  {
    font-size: 0.875rem;
}

body.body-color-app .stage-palette-tool__mock-card small , body.body-palette-app .stage-palette-tool__mock-card small  {
    font-size: 0.75rem;
    color: var(--pl-muted);
}

body.body-color-app .stage-palette-tool__toast , body.body-palette-app .stage-palette-tool__toast  {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ── Studio layout (/crea — Adobe Color) ── */
body.body-color-create .stage-palette-tool--studio {
    width: 100%;
    background: #fff;
    gap: 0;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__studio {
    display: grid;
    grid-template-columns: minmax(22rem, 28rem) minmax(0, 1fr);
    min-height: calc(100vh - var(--stage-navbar-height, 4.25rem) - var(--color-create-main-offset, clamp(1.25rem, 3vw, 2rem)));
    gap: 0;
    align-items: stretch;
}

body.body-color-create .stage-palette-tool__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
    background: #fff;
    min-height: 0;
}

body.body-color-create .stage-palette-tool__brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pl-ink);
}

body.body-color-create .stage-palette-tool__brand-mark {
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
}

body.body-color-create .stage-palette-tool__sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

body.body-color-create .stage-palette-tool__sidebar-title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--pl-ink);
}

body.body-color-create .stage-palette-tool__sidebar-lede {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--pl-muted);
    max-width: 34ch;
}

body.body-color-create .stage-palette-tool__mode-tabs {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    border-bottom: 1px solid var(--pl-border);
    margin-top: 0.25rem;
}

body.body-color-create .stage-palette-tool__mode-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0 0 0.65rem;
    margin: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pl-muted);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

body.body-color-create .stage-palette-tool__mode-tab-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

body.body-color-create .stage-palette-tool__mode-tab-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    display: block;
}

body.body-color-create .stage-palette-tool__mode-tab:disabled {
    opacity: 0.45;
    cursor: default;
}

body.body-color-create .stage-palette-tool__mode-tab.is-active {
    color: var(--pl-ink);
    font-weight: 600;
}

body.body-color-create .stage-palette-tool__mode-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--pl-ink);
    border-radius: 1px;
}

body.body-color-create .stage-palette-tool__mode-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.body-color-create .stage-palette-tool__mode-panel[hidden] {
    display: none;
}

/* ── Primary color picker ── */
body.body-color-create .stage-palette-tool__primary {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
}

body.body-color-create .stage-palette-tool__primary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body.body-color-create .stage-palette-tool__primary-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pl-ink);
}

body.body-color-create .stage-palette-tool__primary-format {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pl-muted);
}

body.body-color-create .stage-palette-tool__primary-hex-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--pl-border-strong);
    border-radius: 0.5rem;
    background: #fff;
}

body.body-color-create .stage-palette-tool__primary-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

body.body-color-create .stage-palette-tool__primary-hex {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pl-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.body-color-create .stage-palette-tool__primary-hex:focus {
    outline: none;
}

body.body-color-create .stage-palette-tool__primary-lock {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--pl-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.55;
    cursor: default;
}

body.body-color-create .stage-palette-tool__primary-lock svg {
    width: 1rem;
    height: 1rem;
}

body.body-color-create .stage-palette-tool__primary-sv-wrap {
    position: relative;
    width: 100%;
    border-radius: 0.65rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.body-color-create .stage-palette-tool__primary-sv {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.35;
    touch-action: none;
    cursor: crosshair;
}

body.body-color-create .stage-palette-tool__primary-sv-marker {
    position: absolute;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

body.body-color-create .stage-palette-tool__primary-hue-wrap {
    padding: 0.15rem 0;
}

body.body-color-create .stage-palette-tool__primary-hue {
    appearance: none;
    width: 100%;
    height: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    outline: none;
    cursor: pointer;
}

body.body-color-create .stage-palette-tool__primary-hue::-webkit-slider-thumb {
    appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.12);
    background: var(--primary-hue-thumb, #136ef5);
}

body.body-color-create .stage-palette-tool__primary-hue::-moz-range-thumb {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.12);
    background: var(--primary-hue-thumb, #136ef5);
}

body.body-color-create .stage-palette-tool__primary-bright-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
}

body.body-color-create .stage-palette-tool__primary-bright-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--pl-muted);
}

body.body-color-create .stage-palette-tool__primary-bright-icon svg {
    width: 100%;
    height: 100%;
}

body.body-color-create .stage-palette-tool__primary-bright-track {
    --primary-bright-edge: #136ef5;
}

body.body-color-create .stage-palette-tool__primary-bright {
    appearance: none;
    width: 100%;
    height: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(to right, #000, var(--primary-bright-edge));
    outline: none;
    cursor: pointer;
}

body.body-color-create .stage-palette-tool__primary-bright::-webkit-slider-thumb {
    appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.12);
    background: var(--primary-bright-thumb, #136ef5);
}

body.body-color-create .stage-palette-tool__primary-bright::-moz-range-thumb {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.12);
    background: var(--primary-bright-thumb, #136ef5);
}

body.body-color-create .stage-palette-tool__primary-bright-val {
    width: 3rem;
    height: 2.25rem;
    padding: 0 0.35rem;
    border: 1px solid var(--pl-border-strong);
    border-radius: 0.45rem;
    font: inherit;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--pl-ink);
    background: #fff;
}

body.body-color-create .stage-palette-tool__primary-bright-val:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.35);
}

body.body-color-create .stage-palette-tool__mode-panel[data-palette-mode-panel="image"] {
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.body-color-create .stage-palette-tool__image-drop {
    --pl-image-drop-checker: #ececec;
    --pl-image-drop-checker-alt: #fff;
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    min-height: clamp(17rem, 36vh, 22rem);
    margin-top: 0.5rem;
    padding: clamp(2rem, 5vw, 2.75rem) clamp(1.25rem, 3vw, 1.75rem);
    border: 1px dashed rgba(44, 44, 44, 0.55);
    border-radius: 1rem;
    background: #f5f5f5;
    text-align: center;
    transition: border-color 0.15s ease;
    overflow: hidden;
}

body.body-color-create .stage-palette-tool__image-drop::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background-color: var(--pl-image-drop-checker-alt);
    background-image:
        linear-gradient(45deg, var(--pl-image-drop-checker) 25%, transparent 25%),
        linear-gradient(-45deg, var(--pl-image-drop-checker) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--pl-image-drop-checker) 75%),
        linear-gradient(-45deg, transparent 75%, var(--pl-image-drop-checker) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    transition: opacity 0.15s ease;
}

body.body-color-create .stage-palette-tool__image-drop:hover::before,
body.body-color-create .stage-palette-tool__image-drop.is-dragover::before {
    opacity: 1;
}

body.body-color-create .stage-palette-tool__image-drop:hover,
body.body-color-create .stage-palette-tool__image-drop.is-dragover {
    border-color: rgba(44, 44, 44, 0.72);
}

body.body-color-create .stage-palette-tool__image-drop > * {
    position: relative;
    z-index: 1;
}

body.body-color-create .stage-palette-tool__image-drop.is-dragover {
    border-color: var(--pl-primary);
}

body.body-color-create .stage-palette-tool__image-upload-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.72rem 1.35rem;
    border: 0;
    border-radius: 999px;
    background: var(--pl-primary, #136ef5);
    color: #fff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s ease;
}

body.body-color-create .stage-palette-tool__image-upload-btn:hover {
    background: var(--color-primary-700, #0f57c4);
}

body.body-color-create .stage-palette-tool__image-upload-btn:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: 2px;
}

body.body-color-create .stage-palette-tool__image-upload-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    display: block;
}

body.body-color-create #stage-main button.stage-palette-tool__image-upload-btn,
body.body-color-create #stage-main button.stage-palette-tool__image-upload-btn:hover {
    color: #fff;
    text-decoration: none;
}

body.body-color-create .stage-palette-tool__image-drop-title {
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: #141414;
}

body.body-color-create .stage-palette-tool__image-drop-hint {
    margin: 0.55rem auto 0;
    max-width: 34ch;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(44, 44, 44, 0.72);
}

body.body-color-create .stage-palette-tool__image-preview {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-height: clamp(16rem, 42vh, 22rem);
    margin-top: 0.5rem;
}

body.body-color-create .stage-palette-tool__image-preview[hidden] {
    display: none;
}

body.body-color-create .stage-palette-tool__image-preview img {
    width: 100%;
    max-height: min(22rem, 42vh);
    object-fit: contain;
    border-radius: 0.75rem;
    border: 1px solid var(--pl-border);
    background: #fafafa;
}

body.body-color-create .stage-palette-tool__image-clear {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pl-primary);
    cursor: pointer;
}

body.body-color-create .stage-palette-tool__image-clear:hover {
    text-decoration: underline;
}

body.body-color-create .stage-palette-tool__image-samples {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 0;
}

body.body-color-create .stage-palette-tool__image-samples[hidden] {
    display: none;
}

body.body-color-create .stage-palette-tool__image-samples-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    color: #141414;
}

body.body-color-create .stage-palette-tool__image-samples-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

body.body-color-create .stage-palette-tool__image-sample {
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body.body-color-create .stage-palette-tool__image-sample:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.body-color-create .stage-palette-tool__image-sample:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: 2px;
}

body.body-color-create .stage-palette-tool__image-sample.is-active {
    border-color: var(--pl-ink);
    box-shadow: 0 0 0 1px var(--pl-ink);
}

body.body-color-create .stage-palette-tool__image-sample-photo {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.45rem 0.45rem 0 0;
    background: #f0f0f0;
}

body.body-color-create .stage-palette-tool__image-sample-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.body-color-create .stage-palette-tool__image-sample-swatches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 0.85rem;
    border-radius: 0 0 0.45rem 0.45rem;
    overflow: hidden;
}

body.body-color-create .stage-palette-tool__image-sample-swatches span {
    display: block;
    min-height: 100%;
}

@media (max-width: 28rem) {
    body.body-color-create .stage-palette-tool__image-samples-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.body-color-create .stage-palette-tool__wheel-wrap {
    position: relative;
    width: 100%;
    max-width: none;
    margin-top: 0.5rem;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    aspect-ratio: 1;
    max-height: min(100%, 22rem);
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__wheel {
    width: min(100%, 22rem) !important;
    height: auto !important;
    aspect-ratio: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__wheel-marker {
    width: 1.05rem;
    height: 1.05rem;
    margin: -0.525rem 0 0 -0.525rem;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.12);
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__wheel-marker.is-base {
    width: 1.2rem;
    height: 1.2rem;
    margin: -0.6rem 0 0 -0.6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.14);
}

body.body-color-create .stage-palette-tool__base--studio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.body-color-create .stage-palette-tool__harmony-block--bottom {
    margin-top: auto;
    padding-top: 0.5rem;
}

body.body-color-create .stage-palette-tool__harmony-block--bottom.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

body.body-color-create .stage-palette-tool__harmony-heading {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--pl-muted);
    white-space: nowrap;
}

body.body-color-create .stage-palette-tool__harmony-heading strong {
    color: var(--pl-ink);
    font-weight: 600;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__harmony {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    justify-content: flex-start;
    scrollbar-width: thin;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__harmony-btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__harmony-icon {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #2c2c2c;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__harmony-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__harmony-label {
    display: none;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__harmony-btn.is-active .stage-palette-tool__harmony-icon {
    border: 2px solid var(--pl-ink);
    box-shadow: none;
}

body.body-color-create .stage-palette-tool__palette-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

body.body-color-create .stage-palette-tool--studio[data-palette-active-mode="image"] #stage-palette-random {
    display: none;
}

body.body-color-create .stage-palette-tool__palette-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--pl-border);
    flex-shrink: 0;
}

body.body-color-create .stage-palette-tool__palette-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pl-ink);
}

body.body-color-create .stage-palette-tool__palette-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.body-color-create .stage-palette-tool__toolbar-icon-btn {
    appearance: none;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--pl-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body.body-color-create .stage-palette-tool__toolbar-icon-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

body.body-color-create .stage-palette-tool__toolbar-icon-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
}

body.body-color-create .stage-palette-tool__toolbar-icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

body.body-color-create .stage-palette-tool__toolbar-btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    background: #fff;
    color: var(--pl-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

body.body-color-create .stage-palette-tool__toolbar-btn--outline:hover {
    background: #f8f8f8;
    border-color: rgba(0, 0, 0, 0.28);
}

body.body-color-create .stage-palette-tool__swatches-wrap {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(0.75rem, 2vw, 1.5rem) 0;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatches {
    flex: 1;
    min-height: clamp(18rem, 48vh, 32rem);
    border-radius: 1rem;
    overflow: hidden;
    gap: 0.2rem;
    padding: 0.2rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatch {
    border-radius: 0.75rem;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatch-meta {
    background: none;
    padding: 0 0 1rem 1rem;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatch-hex {
    font-size: 0.8125rem;
    font-weight: 600;
    text-shadow: none;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatch-rgb {
    display: none;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatch-copy {
    top: auto;
    bottom: 0.85rem;
    right: 0.75rem;
    opacity: 1;
    transform: none;
    width: 1.65rem;
    height: 1.65rem;
}

body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatch.is-base {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95);
}

body.body-color-create .stage-palette-tool__palette-footer--studio {
    padding: 0.75rem clamp(0.75rem, 2vw, 1.5rem) 0.85rem;
    background: #fff;
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

body.body-color-create .stage-palette-tool__footer-bar {
    display: flex;
    align-items: center;
    gap: clamp(0.65rem, 1.5vw, 1rem);
    width: 100%;
    min-height: 2.75rem;
}

body.body-color-create .stage-palette-tool__footer-start {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

body.body-color-create .stage-palette-tool__footer-center,
body.body-color-create .stage-palette-tool__footer-actions,
body.body-color-create .stage-palette-tool__footer-harmony,
body.body-color-create .stage-palette-tool__footer-row,
body.body-color-create .stage-palette-tool__footer-row--tools,
body.body-color-create .stage-palette-tool__footer-row--actions,
body.body-color-create .stage-palette-tool__footer-cta {
    display: contents;
}

body.body-color-create .stage-palette-tool__mini-strip {
    display: flex;
    height: 1.5rem;
    width: 7.5rem;
    border-radius: 0.35rem;
    overflow: hidden;
    border: 1px solid var(--pl-border);
    flex: 0 0 auto;
}

body.body-color-create .stage-palette-tool__mini-strip span {
    flex: 1 1 0;
    min-width: 0;
}

body.body-color-create .stage-palette-tool__footer-tools {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

body.body-color-create .stage-palette-tool__icon-btn {
    appearance: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--pl-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body.body-color-create .stage-palette-tool__icon-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

body.body-color-create .stage-palette-tool__icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.body-color-create .stage-palette-tool__name-field {
    position: relative;
    display: block;
    flex: 0 1 14rem;
    min-width: min(100%, 10rem);
    max-width: 16rem;
    margin: 0;
}

body.body-color-create .stage-palette-tool__name-label {
    position: absolute;
    top: 0;
    left: 0.65rem;
    transform: translateY(-50%);
    padding: 0 0.3rem;
    background: #fff;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--pl-muted);
    line-height: 1;
    pointer-events: none;
}

body.body-color-create .stage-palette-tool__name-input {
    width: 100%;
    height: 2.75rem;
    padding: 0.85rem 0.75rem 0.55rem;
    border: 1px solid var(--pl-border-strong);
    border-radius: 0.45rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--pl-ink);
    background: #fff;
}

body.body-color-create .stage-palette-tool__name-input:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

body.body-color-create .stage-palette-tool__create-btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: #141414;
    border: 1px solid #141414;
    color: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}

body.body-color-create .stage-palette-tool__create-btn:hover {
    background: #2c2c2c;
    border-color: #2c2c2c;
    color: #fff;
}

body.body-color-create .stage-palette-tool__save-link {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pl-primary);
    text-decoration: none;
    cursor: pointer;
}

body.body-color-create .stage-palette-tool__save-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.body-color-create .stage-palette-tool__save-link:hover:not(:disabled) {
    text-decoration: underline;
}

body.body-color-create .stage-palette-tool__contrast-details {
    width: 100%;
    font-size: 0.8125rem;
    color: var(--pl-muted);
}

body.body-color-create .stage-palette-tool__contrast-details:not([open]) .stage-palette-tool__contrast {
    display: none;
}

body.body-color-create .stage-palette-tool__contrast-details[open] {
    padding-top: 0.35rem;
    border-top: 1px dashed var(--pl-border);
}

body.body-color-create #stage-main a.stage-palette-tool__create-btn,
body.body-color-create #stage-main a.stage-palette-tool__create-btn:hover {
    color: #fff;
    text-decoration: none;
    background: #141414;
    border-color: #141414;
}

body.body-color-create #stage-main a.stage-palette-tool__create-btn:hover {
    background: #2c2c2c;
    border-color: #2c2c2c;
}

@media (max-width: 960px) {
    body.body-color-create .stage-palette-tool--studio .stage-palette-tool__studio {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body.body-color-create .stage-palette-tool__sidebar {
        border-bottom: 1px solid var(--pl-border);
    }

    body.body-color-create .stage-palette-tool--studio .stage-palette-tool__wheel-wrap {
        margin-top: 0;
        max-width: 20rem;
        margin-inline: auto;
    }

    body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatches {
        min-height: 16rem;
    }

    body.body-color-create .stage-palette-tool__swatches-wrap {
        padding: 1rem;
    }

    body.body-color-create .stage-palette-tool__footer-bar {
        flex-wrap: wrap;
        align-items: stretch;
        row-gap: 0.75rem;
    }

    body.body-color-create .stage-palette-tool__footer-start {
        width: 100%;
    }

    body.body-color-create .stage-palette-tool__name-field {
        flex: 1 1 100%;
        max-width: none;
    }

    body.body-color-create .stage-palette-tool__create-btn {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatches {
        flex-direction: column;
        min-height: 0;
    }

    body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatch {
        min-height: 4.5rem;
    }
}

/* ── Tooltips (Adobe-like) ── */
body.body-color-create .stage-palette-tool {
    --pl-tooltip-bg: #2c2c2c;
    --pl-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

body.body-color-create .stage-palette-tool [data-tooltip] {
    position: relative;
}

body.body-color-create .stage-palette-tool [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    visibility: hidden;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
    color: #fff;
    background: var(--pl-tooltip-bg);
    box-shadow: var(--pl-tooltip-shadow);
    pointer-events: none;
    z-index: 30;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

body.body-color-create .stage-palette-tool [data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--pl-tooltip-bg);
    pointer-events: none;
    z-index: 31;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

body.body-color-create .stage-palette-tool [data-tooltip]:hover::after,
body.body-color-create .stage-palette-tool [data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

body.body-color-create .stage-palette-tool [data-tooltip]:hover::before,
body.body-color-create .stage-palette-tool [data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

body.body-color-create .stage-palette-tool__harmony-block--bottom,
body.body-color-create .stage-palette-tool__palette-toolbar,
body.body-color-create .stage-palette-tool__footer-tools,
body.body-color-create .stage-palette-tool__swatches-wrap,
body.body-color-create .stage-palette-tool--studio .stage-palette-tool__swatches {
    overflow: visible;
}