/* Buttons, inputs, and common control primitives */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 41px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: var(--accent-ink); background: var(--accent-strong); border-color: var(--accent-strong); }
.button-primary:hover { background: #c4bdff; border-color: #c4bdff; }
.button-secondary { color: var(--text-soft); background: #202228; border-color: #383b45; }
.button-secondary:hover { color: var(--text); background: #282a32; border-color: #4b4e5a; }
.button-small { min-height: 32px; padding: 0 10px; border-radius: 7px; font-size: 10px; }
.button-full { width: 100%; }
.text-button { padding: 4px 0; border: 0; color: var(--muted); background: transparent; font-size: 10px; }
.text-button:hover { color: var(--accent-strong); }
.text-input { min-width: 0; width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid #363943; border-radius: 8px; background: #111216; color: var(--text); font: 12px var(--font-mono); transition: border-color .15s ease, background .15s ease; }
.text-input:hover { border-color: #4a4d58; }
.text-input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(157,145,255,.1); }
.text-input[aria-invalid="true"] { border-color: var(--danger); }
.number-input { text-align: center; font-variant-numeric: tabular-nums; }
.field-error { min-height: 0; margin: 0; color: var(--danger); font-size: 10px; }
.field-error:not(:empty) { margin: 7px 20px 0; }
.native-color-picker { flex: 0 0 auto; width: 44px; height: 38px; padding: 3px; border: 1px solid #3b3e47; border-radius: 8px; background: #111216; cursor: pointer; }
.native-color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.native-color-picker::-webkit-color-swatch { border: 0; border-radius: 4px; }
.native-color-picker::-moz-color-swatch { border: 0; border-radius: 4px; }
.copy-icon { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; }
.copy-icon:hover { color: var(--text); border-color: #3b3e47; background: #25272e; }
.copy-icon svg { width: 15px; height: 15px; }
/* Home and workspace polish */
.hero-art, .tool-card, .panel { overflow: hidden; }
/* Explorer */
.range-panel { overflow: hidden; }
.range-toolbar { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 18px 14px; border-bottom: 1px solid #282a31; }
.range-filter { min-height: 29px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 600; transition: all .15s ease; }
.range-filter:hover { background: #23252b; color: var(--text-soft); }
.range-filter.is-active { color: #d7d2ff; background: var(--accent-soft); border-color: var(--accent-border); }
.range-grid-wrap { padding: 17px; background: #141519; }
.range-grid { display: grid; grid-template-columns: repeat(25,minmax(0,1fr)); gap: 4px; }
.range-swatch { position: relative; aspect-ratio: 1 / 1; min-width: 0; padding: 0; border: 1px solid rgba(0,0,0,.28); border-radius: 3px; background: var(--swatch); transition: transform .12s ease, outline-color .12s ease, box-shadow .12s ease; }
.range-swatch:hover { z-index: 1; transform: scale(1.13); box-shadow: 0 3px 10px rgba(0,0,0,.42); }
.range-swatch.is-selected { z-index: 2; outline: 2px solid #f0eefc; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(157,145,255,.38); }
.range-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid #282a31; color: var(--muted-2); font-size: 9px; }
.range-footer > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.inspector-panel { padding-bottom: 16px; }
.inspector-panel > .panel-heading { padding-bottom: 13px; }
.color-entry-row { display: flex; align-items: center; gap: 8px; padding: 0 18px; }
.hex-entry-form { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.hex-input { min-width: 0; font-size: 12px; letter-spacing: .04em; }
.color-entry-row + .field-error { margin: 0; }
.inspector-color-chip { position: relative; display: flex; align-items: flex-end; min-height: 124px; margin: 15px 18px 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #7468df; }
.chip-lightness { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,.12),transparent 55%,rgba(0,0,0,.15)); }
.chip-meta { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px; background: linear-gradient(0deg,rgba(0,0,0,.42),transparent); }
.chip-meta span { color: rgba(255,255,255,.78); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.chip-meta strong { color: #fff; font: 600 17px var(--font-mono); text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.value-list { margin: 13px 18px 0; border-top: 1px solid #2a2c33; }
.value-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 25px; align-items: center; gap: 8px; min-height: 39px; border-bottom: 1px solid #2a2c33; }
.value-row > span { color: var(--muted-2); font: 9px var(--font-mono); }
.value-row code { overflow: hidden; color: var(--text-soft); font: 10px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.inspector-section { margin: 19px 18px 0; padding-top: 1px; }
.subheading-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.subheading-row h3, .subheading-row label { margin: 0; color: var(--text-soft); font-size: 11px; font-weight: 650; }
.section-description { margin: 7px 0 10px; color: var(--muted-2); font-size: 10px; line-height: 1.55; }
.segmented-control { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #30323a; border-radius: 8px; background: #111216; }
.segmented-control button { min-height: 25px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 9px; }
.segmented-control button.is-active { color: var(--text); background: #2c2b38; box-shadow: inset 0 0 0 1px #454257; }
.shade-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; }
.shade-button { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; }
.shade-swatch { display: block; width: 100%; aspect-ratio: 1/1; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; background: var(--swatch); }
.shade-button span:last-child { color: var(--muted-2); font: 8px var(--font-mono); }
.shade-button.is-base .shade-swatch { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.shade-button:hover .shade-swatch { outline: 2px solid var(--text-soft); outline-offset: 1px; }
.inspector-bottom { margin: 18px 18px 0; }
/* Gradient generator */
.gradient-builder { padding-bottom: 1px; }
.gradient-preview { min-height: 224px; margin: 0 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: linear-gradient(135deg,#7468df 0%,#e879a6 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.gradient-under-preview { display: flex; align-items: center; justify-content: space-between; margin: 10px 20px 23px; color: var(--muted-2); font: 10px var(--font-mono); }
.preview-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 10px var(--font-ui); }
.preview-check i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.gradient-track-section { margin: 0 20px; padding-top: 19px; border-top: 1px solid #2b2d34; }
.gradient-track-section .section-description { margin-bottom: 12px; }
.gradient-track { position: relative; height: 34px; margin: 18px 8px 20px; border: 1px solid #555863; border-radius: 7px; background: linear-gradient(135deg,#7468df 0%,#e879a6 100%); touch-action: pan-y; }
.gradient-track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 2px rgba(0,0,0,.22); pointer-events: none; }
.gradient-stop-handle { position: absolute; top: 50%; width: 17px; height: 31px; padding: 0; border: 2px solid #f5f3ff; border-radius: 5px; background: var(--stop-color); box-shadow: 0 2px 5px rgba(0,0,0,.35); transform: translate(-50%,-50%); cursor: ew-resize; touch-action: none; }
.gradient-stop-handle::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 50%; width: 2px; border-radius: 2px; background: rgba(0,0,0,.42); transform: translateX(-50%); }
.gradient-stop-handle.is-active { z-index: 2; outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.stop-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 0 20px; }
.stop-card { min-width: 0; padding: 11px; border: 1px solid #2e3038; border-radius: 10px; background: #141519; }
.stop-card.is-active { border-color: #696188; background: #1d1c26; }
.stop-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.stop-card-title { display: flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: 10px; font-weight: 650; }
.stop-card-title i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.24); background: var(--stop-color); }
.stop-remove { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; }
.stop-remove:hover:not(:disabled) { border-color: #584149; color: var(--danger); background: rgba(239,130,136,.08); }
.stop-remove svg { width: 14px; height: 14px; }
.stop-card-controls { display: grid; grid-template-columns: 30px minmax(0,1fr) 54px; align-items: center; gap: 7px; }
.stop-color-picker { width: 30px; height: 30px; padding: 2px; border: 1px solid #3b3e47; border-radius: 7px; background: #0f1013; cursor: pointer; }
.stop-color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.stop-color-picker::-webkit-color-swatch { border: 0; border-radius: 4px; }
.stop-color-picker::-moz-color-swatch { border: 0; border-radius: 4px; }
.stop-hex-input { min-height: 30px; padding: 0 7px; font-size: 10px; }
.stop-position-input { min-height: 30px; padding: 0 5px; font-size: 10px; }
.stop-position-label { margin-top: 9px; color: var(--muted-2); font-size: 9px; }
.gradient-controls-bottom { display: flex; align-items: end; gap: 17px; margin: 23px 20px 0; padding-top: 19px; border-top: 1px solid #2b2d34; }
.angle-control { flex: 1; min-width: 0; }
.angle-control output { color: var(--accent-strong); font: 11px var(--font-mono); }
.styled-range { display: block; width: 100%; height: 5px; margin: 17px 0 0; border-radius: 100px; appearance: none; background: #3a3c45; cursor: pointer; }
.styled-range::-webkit-slider-thumb { width: 15px; height: 15px; border: 3px solid #f3f1ff; border-radius: 50%; appearance: none; background: var(--accent); box-shadow: 0 0 0 3px rgba(157,145,255,.15); }
.styled-range::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid #f3f1ff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(157,145,255,.15); }
.range-extremes { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; color: var(--muted-2); font-size: 8px; }
.angle-number-wrap { width: 81px; flex: 0 0 auto; }
.angle-number-wrap label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; }
.gradient-presets { margin: 22px 20px 20px; padding-top: 18px; border-top: 1px solid #2b2d34; }
.minor-note { color: var(--muted-2); font-size: 9px; }
.preset-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.gradient-preset { min-width: 0; padding: 0; border: 1px solid #383a43; border-radius: 8px; overflow: hidden; background: #18191e; text-align: left; }
.gradient-preset:hover { border-color: #77708f; }
.gradient-preset-swatch { display: block; height: 36px; background: var(--preset-gradient); }
.gradient-preset span:last-child { display: block; overflow: hidden; padding: 7px 8px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.css-output-panel { padding-bottom: 15px; }
.code-mark { padding: 5px 7px; border: 1px solid #3e3d4f; border-radius: 5px; color: #b7afff; background: #24222f; font: 10px var(--font-mono); }
.panel-help { margin: -5px 20px 13px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.code-output { position: relative; margin: 0 14px; padding: 14px 12px 53px; border: 1px solid #2f313a; border-radius: 9px; background: #101115; }
.code-output pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.code-output code { color: #d7d3f2; font: 10px/1.8 var(--font-mono); }
.copy-code-button { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 10px; border: 1px solid #4a4560; border-radius: 7px; color: #e6e2ff; background: #2a2738; font-size: 10px; font-weight: 600; }
.copy-code-button:hover { background: #353047; }
.copy-code-button svg { width: 14px; height: 14px; }
.output-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px 0; color: var(--muted); font-size: 10px; }
.output-detail-row strong { color: var(--text-soft); font-weight: 550; text-align: right; }
.gradient-guidance { position: relative; padding: 18px; background: linear-gradient(140deg,#1d1b27,#17181c 70%); }
.guidance-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 15px; border: 1px solid #39344c; border-radius: 10px; color: var(--accent-strong); background: #272433; }
.guidance-icon svg { width: 18px; height: 18px; }
.gradient-guidance h3 { margin-bottom: 7px; font-size: 13px; font-weight: 650; }
.gradient-guidance p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
/* Palette collection */
.palette-search-wrap .search-input { min-height: 36px; padding-left: 0; border: 0; background: transparent; box-shadow: none; font-family: var(--font-ui); font-size: 12px; }
.palette-search-wrap .search-input:focus { outline: 0; }
.custom-select { position: relative; min-width: 172px; }
.custom-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid #393c46; border-radius: 8px; color: var(--text-soft); background: #121317; font-size: 11px; text-align: left; }
.custom-select-trigger:hover, .custom-select-trigger[aria-expanded="true"] { border-color: #666078; }
.custom-select-trigger svg { width: 14px; height: 14px; color: var(--muted); transition: transform .15s ease; }
.custom-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.custom-select-menu { position: absolute; z-index: 15; top: calc(100% + 6px); right: 0; left: 0; max-height: 275px; overflow: auto; padding: 5px; border: 1px solid #3a3c46; border-radius: 10px; background: #1b1d23; box-shadow: 0 18px 38px rgba(0,0,0,.36); }
.custom-select-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 9px; border: 0; border-radius: 6px; color: var(--text-soft); background: transparent; font-size: 10px; text-align: left; }
.custom-select-option:hover, .custom-select-option:focus-visible { outline: 0; color: var(--text); background: #2b2a35; }
.custom-select-option[aria-selected="true"] { color: #dcd7ff; background: var(--accent-soft); }
.custom-select-option small { margin-left: auto; color: var(--muted-2); font: 9px var(--font-mono); }
.palette-group { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.palette-group-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; }
.palette-group-summary::-webkit-details-marker { display: none; }
.palette-group-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.palette-group-title::before { content: ""; width: 3px; height: 22px; border-radius: 2px; background: var(--group-accent, #9d91ff); }
.palette-group-title strong { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.palette-group-title span { color: var(--muted-2); font: 9px var(--font-mono); }
.palette-group-meta { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 9px; }
.palette-group-meta svg { width: 14px; height: 14px; transition: transform .15s ease; }
.palette-group[open] .palette-group-meta svg { transform: rotate(180deg); }
.palette-group-body { padding: 0 17px 18px; }
.palette-subgroup + .palette-subgroup { margin-top: 17px; }
.palette-subgroup-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 9px; border-top: 1px solid #2b2d34; color: var(--text-soft); font-size: 10px; font-weight: 620; text-transform: capitalize; }
.palette-subgroup-heading span { color: var(--muted-2); font: 9px var(--font-mono); }
.palette-colors { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.palette-color-button { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; transition: border-color .14s ease, background .14s ease; }
.palette-color-button:hover { border-color: #3e414c; background: #202228; }
.palette-color-button.is-selected { border-color: var(--accent-border); background: var(--accent-soft); }
.palette-color-chip { display: block; width: 100%; height: 39px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: var(--swatch); }
.palette-color-name { overflow: hidden; color: var(--text-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.palette-color-hex { overflow: hidden; color: var(--muted-2); font: 8px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.palette-inspector { padding-bottom: 16px; }
.palette-inspector-empty { padding: 19px 20px 22px; text-align: center; }
.empty-swatch-stack { display: flex; justify-content: center; align-items: center; margin: 12px auto 15px; }
.empty-swatch-stack i { width: 49px; height: 49px; margin-left: -11px; border: 3px solid var(--panel); border-radius: 12px; background: #4a465b; transform: rotate(-9deg); }
.empty-swatch-stack i:first-child { margin-left: 0; background: #8d83ac; transform: rotate(-12deg); }
.empty-swatch-stack i:last-child { background: #c6a9bd; transform: rotate(9deg); }
.palette-inspector-empty p { max-width: 230px; margin: 0 auto; color: var(--muted); font-size: 11px; line-height: 1.7; }
.palette-inspector-chip { height: 133px; margin: 0 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #7468df; }
.selected-color-name { margin: 13px 18px 0; color: var(--text); font-size: 13px; font-weight: 650; }
.palette-inspector-content .value-list { margin-top: 9px; }
.palette-inspector-content .inspector-section { margin-top: 17px; }
.palette-selected-shades { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; margin-top: 11px; }
.palette-selected-shades button { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; background: var(--swatch); }
.palette-selected-shades button:hover { outline: 2px solid var(--text-soft); outline-offset: 1px; }
.palette-inspector-content > .button { width: calc(100% - 36px); margin: 18px; }
.palette-empty-results { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 35px; border: 1px dashed #393b45; border-radius: 13px; text-align: center; }
.palette-empty-results svg { width: 29px; height: 29px; margin-bottom: 15px; color: var(--muted-2); }
.palette-empty-results strong { margin-bottom: 6px; font-size: 13px; }
.palette-empty-results p { max-width: 300px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
/* Status and error states */
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; max-width: min(360px, calc(100vw - 32px)); padding: 11px 14px; border: 1px solid #45404f; border-radius: 10px; color: var(--text); background: #24222c; box-shadow: 0 16px 35px rgba(0,0,0,.32); font-size: 11px; animation: toast-in .18s ease-out both; }
.toast::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.toast.is-error::before { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* The category menu must escape the toolbar surface rather than being clipped. */
.palette-toolbar { position: relative; z-index: 8; overflow: visible; }
.palette-group-title strong, .custom-select-trigger [data-selected-label] { text-transform: capitalize; }
.palette-inspector .value-row { grid-template-columns: 34px minmax(0,1fr) 25px; }
.stop-position-label strong { color: var(--text-soft); font: 10px var(--font-mono); }

/* Color relationship, accessibility, saved-set and export controls */
.capability-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:42px 0 17px; }
.capability-heading h2 { margin:8px 0 0; font-size:24px; font-weight:620; letter-spacing:-.04em; }
.capability-heading > p { max-width:360px; margin:0 0 2px; color:var(--muted); font-size:12px; line-height:1.75; }
.capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.capability-card { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; row-gap:13px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(155deg,#1a1c22,#15161a 85%); }
.capability-icon { display:grid; place-items:center; width:34px; height:34px; border:1px solid #3a374a; border-radius:10px; color:var(--accent-strong); background:#24222d; font:650 14px var(--font-mono); }
.capability-card h3 { margin:1px 0 7px; font-size:13px; font-weight:650; letter-spacing:-.02em; }
.capability-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.75; }
.capability-meta { grid-column:2; padding-top:10px; border-top:1px solid #2a2c33; color:var(--muted-2); font:9px var(--font-mono); letter-spacing:.1em; }
.range-density-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 18px; border-bottom:1px solid #282a31; background:#17181d; }
.range-density-label { display:flex; flex-direction:column; gap:3px; min-width:0; }
.range-density-label strong { color:var(--text-soft); font-size:10px; font-weight:650; }
.range-density-label span { color:var(--muted-2); font-size:9px; line-height:1.5; }
.range-density-control { flex:0 0 auto; }
.range-density-control button { min-width:52px; font:10px var(--font-mono); }
.range-density-control button:disabled { opacity:.45; cursor:not-allowed; }
.range-grid { transition:opacity .16s ease; }
.range-grid.is-loading { opacity:.35; pointer-events:none; }
.range-grid-wrap { position:relative; min-height:110px; }
.range-loading { display:flex; align-items:center; justify-content:center; gap:10px; min-height:100px; padding:20px; color:var(--muted); font-size:11px; }
.loading-spinner { width:15px; height:15px; border:2px solid #3c394d; border-top-color:var(--accent-strong); border-radius:50%; animation:studio-spin .75s linear infinite; }
@keyframes studio-spin { to { transform:rotate(360deg); } }
.range-error { grid-column:1/-1; display:grid; gap:6px; padding:22px; color:var(--text-soft); font-size:12px; }
.range-error span { color:var(--muted); font-size:10px; }
.range-batch-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid #282a31; color:var(--muted-2); font-size:10px; }
.range-batch-footer > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.range-batch-footer .button { white-space:nowrap; }
.inspector-advanced-formats, .palette-more-formats { margin:8px 18px 0; border:1px solid #2c2e37; border-radius:8px; background:#141519; }
.inspector-advanced-formats summary, .palette-more-formats summary { padding:9px 10px; color:var(--muted); font-size:10px; cursor:pointer; list-style:none; }
.inspector-advanced-formats summary::-webkit-details-marker, .palette-more-formats summary::-webkit-details-marker { display:none; }
.inspector-advanced-formats summary::after, .palette-more-formats summary::after { content:'+'; float:right; color:var(--accent-strong); font:13px var(--font-mono); }
.inspector-advanced-formats[open] summary::after, .palette-more-formats[open] summary::after { content:'−'; }
.inspector-advanced-formats .value-row, .palette-more-formats .value-row { margin:0 10px; grid-template-columns:38px minmax(0,1fr) 25px; }
.inspector-advanced-formats .value-row:last-child, .palette-more-formats .value-row:last-child { border-bottom:0; }
.inspector-action-stack { display:grid; gap:8px; }
.button-quiet { border:1px solid #333540; color:var(--text-soft); background:transparent; }
.button-quiet:hover, .button-quiet.is-saved { border-color:#6b5d4a; color:#f2d59a; background:rgba(216,178,103,.08); }
.explorer-extras-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:16px; align-items:start; }
.harmony-panel, .contrast-panel, .saved-colors-panel { min-width:0; }
.harmony-tabs { display:flex; flex-wrap:wrap; margin:0 18px; }
.harmony-tabs button { min-height:28px; padding:0 9px; font-size:9px; }
.harmony-swatches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:15px 18px 10px; }
.harmony-swatch { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; gap:4px; padding:6px; border:1px solid #2b2d35; border-radius:9px; background:#141519; }
.harmony-color-button { display:flex; align-items:center; gap:9px; min-width:0; padding:0; border:0; background:transparent; text-align:left; }
.harmony-color-chip { display:block; flex:0 0 35px; width:35px; height:36px; border:1px solid rgba(255,255,255,.16); border-radius:6px; background:var(--swatch); }
.harmony-color-meta { display:flex; flex-direction:column; min-width:0; gap:3px; }
.harmony-color-meta strong { overflow:hidden; color:var(--text-soft); font-size:9px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.harmony-color-meta code { color:var(--muted-2); font:9px var(--font-mono); }
.harmony-copy { width:25px; height:25px; }
.panel-footnote { margin:0 18px 16px; padding-top:10px; border-top:1px solid #2a2c33; color:var(--muted-2); font-size:10px; line-height:1.65; }
.contrast-inputs { display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); gap:8px; align-items:end; padding:0 18px 14px; }
.contrast-color-field { display:grid; gap:7px; min-width:0; color:var(--muted); font-size:10px; }
.contrast-color-entry { display:grid; grid-template-columns:30px minmax(0,1fr); gap:6px; min-width:0; }
.contrast-color-entry input[type=color] { width:30px; height:31px; padding:2px; border:1px solid #393c46; border-radius:7px; background:#111216; }
.contrast-color-entry input[type=color]::-webkit-color-swatch-wrapper { padding:2px; }
.contrast-color-entry input[type=color]::-webkit-color-swatch { border:0; border-radius:4px; }
.contrast-color-entry .text-input { width:100%; min-width:0; min-height:31px; padding:0 7px; font:10px var(--font-mono); }
.swap-contrast-button { width:28px; height:28px; border:1px solid #3a3d46; border-radius:7px; color:var(--text-soft); background:#24252c; font-size:16px; }
.swap-contrast-button:hover { border-color:var(--accent-border); color:var(--accent-strong); }
.contrast-preview { display:flex; align-items:center; min-height:126px; margin:0 18px; padding:20px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:#fff; color:#7468df; }
.contrast-preview > div { display:flex; flex-direction:column; gap:7px; }
.contrast-preview strong { font-size:22px; line-height:1.2; letter-spacing:-.04em; }
.contrast-preview span { font-size:12px; line-height:1.5; }
.contrast-preview small { font-size:10px; opacity:.85; }
.contrast-result { display:grid; grid-template-columns:116px minmax(0,1fr); gap:12px; margin:15px 18px 0; }
.contrast-ratio-block { display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid #32343d; border-radius:9px; background:#141519; }
.contrast-ratio-block span { color:var(--muted-2); font-size:8px; font-weight:700; letter-spacing:.09em; }
.contrast-ratio-block strong { color:var(--text); font:650 23px var(--font-mono); letter-spacing:-.06em; }
.contrast-levels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.contrast-level { display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0; padding:8px; border:1px solid #30323a; border-radius:7px; background:#141519; }
.contrast-level span { color:var(--muted-2); font-size:9px; }
.contrast-level strong { color:#efa6a9; font-size:9px; font-weight:650; }
.contrast-level.is-pass { border-color:rgba(129,198,167,.32); background:rgba(129,198,167,.06); }
.contrast-level.is-pass strong { color:var(--success); }
.contrast-level.is-fail strong { color:var(--danger); }
.contrast-note { margin:12px 18px 17px; color:var(--muted-2); font-size:9px; line-height:1.65; }
.saved-colors-panel { margin-top:14px; }
.saved-colors-panel .panel-heading { align-items:center; }
.saved-color-groups { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:0 18px 18px; }
.saved-group-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.saved-group-heading h3 { margin:0; font-size:11px; font-weight:650; }
.saved-group-heading span { color:var(--muted-2); font:9px var(--font-mono); }
.saved-color-row { display:flex; align-items:flex-start; flex-wrap:wrap; gap:7px; min-height:40px; }
.saved-color-item { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid #2f3139; border-radius:8px; background:#141519; }
.saved-color-button { display:flex; align-items:center; gap:7px; padding:0 5px 0 0; border:0; color:var(--text-soft); background:transparent; font:9px var(--font-mono); }
.saved-color-chip { display:block; width:24px; height:24px; border-radius:5px; background:var(--swatch); border:1px solid rgba(255,255,255,.13); }
.saved-remove-button { width:22px; height:24px; border:0; border-radius:5px; color:var(--muted); background:transparent; font-size:16px; }
.saved-remove-button:hover { color:var(--danger); background:rgba(239,130,136,.08); }
.saved-empty { color:var(--muted-2); font-size:10px; }
.gradient-type-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 20px 15px; padding-top:14px; border-top:1px solid #2b2d34; color:var(--text-soft); font-size:10px; font-weight:650; }
.gradient-type-row .segmented-control button { min-width:55px; }
.gradient-radial-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; margin:0 20px 16px; padding:13px; border:1px solid #30323a; border-radius:10px; background:#141519; }
.radial-setting { display:flex; flex-direction:column; gap:9px; color:var(--muted); font-size:9px; }
.radial-setting .segmented-control { align-self:flex-start; }
.gradient-position-grid { display:grid; grid-template-columns:repeat(3,23px); gap:3px; }
.gradient-position-grid button { display:grid; place-items:center; width:23px; height:23px; padding:0; border:1px solid #343640; border-radius:5px; color:var(--muted); background:#1b1d22; font-size:11px; }
.gradient-position-grid button:hover, .gradient-position-grid button.is-active { border-color:var(--accent-border); color:var(--accent-strong); background:var(--accent-soft); }
.palette-toolbar-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.export-menu { position:relative; z-index:12; flex:0 0 auto; }
.export-menu > summary { display:flex; align-items:center; gap:7px; min-height:34px; padding:0 11px; border:1px solid #42404f; border-radius:8px; color:var(--text-soft); background:#23222d; font-size:10px; font-weight:650; cursor:pointer; list-style:none; }
.export-menu > summary::-webkit-details-marker { display:none; }
.export-menu > summary:hover, .export-menu[open] > summary { border-color:var(--accent-border); color:var(--accent-strong); }
.export-menu-popover { position:absolute; top:calc(100% + 6px); right:0; display:grid; gap:3px; width:190px; padding:5px; border:1px solid #3a3c46; border-radius:9px; background:#1b1d23; box-shadow:0 16px 34px rgba(0,0,0,.36); }
.export-menu-popover button { min-height:34px; padding:0 9px; border:0; border-radius:6px; color:var(--text-soft); background:transparent; font-size:10px; text-align:left; }
.export-menu-popover button:hover, .export-menu-popover button:focus-visible { color:var(--text); background:#2b2a35; }
.palette-more-formats { margin:10px 18px 0; }
.palette-more-formats .value-row { margin:0 10px; }
.palette-inspector-content > .button + .button { margin-top:8px; }
.not-found-shell { position:relative; }
.not-found-art { display:flex; align-items:center; gap:8px; margin:0 0 28px; color:#2c2a36; font:700 clamp(74px,12vw,126px)/.8 var(--font-mono); letter-spacing:-.12em; }
.not-found-color-grid { display:grid; grid-template-columns:repeat(3,18px); grid-template-rows:repeat(3,18px); gap:4px; margin:0 13px 0 10px; transform:rotate(-8deg); }
.not-found-color-grid i { border-radius:4px; background:#7266dc; }
.not-found-color-grid i:nth-child(2){background:#c17cac}.not-found-color-grid i:nth-child(3){background:#e4a07f}.not-found-color-grid i:nth-child(4){background:#658fa7}.not-found-color-grid i:nth-child(5){background:#6aa98e}.not-found-color-grid i:nth-child(6){background:#d6bd75}.not-found-color-grid i:nth-child(7){background:#b8a8d8}.not-found-color-grid i:nth-child(8){background:#9b7a9b}.not-found-color-grid i:nth-child(9){background:#63747b}
.not-found-actions { display:flex; flex-wrap:wrap; gap:9px; }
.not-found-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:25px; color:var(--muted); font-size:11px; }
.not-found-links a:hover { color:var(--accent-strong); }
.not-found-links span { margin-left:5px; color:var(--accent-strong); }
@media (max-width:1050px) {
  .capability-card { padding:15px; }
  .explorer-extras-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:820px) {
  .capability-grid { grid-template-columns:1fr; }
  .capability-card { grid-template-columns:34px minmax(0,1fr) auto; align-items:start; }
  .capability-meta { grid-column:3; grid-row:1; align-self:center; padding:0; border:0; text-align:right; }
  .saved-color-groups { gap:18px; }
}
@media (max-width:590px) {
  .capability-heading { display:block; margin-top:32px; }
  .capability-heading > p { margin-top:10px; }
  .capability-card { grid-template-columns:30px minmax(0,1fr); padding:14px; }
  .capability-icon { width:30px; height:30px; }
  .capability-meta { grid-column:2; grid-row:auto; padding-top:9px; border-top:1px solid #2a2c33; text-align:left; }
  .range-density-row { align-items:flex-start; flex-direction:column; gap:9px; padding:12px; }
  .range-density-control { max-width:100%; }
  .range-density-control button { min-width:0; padding:0 10px; }
  .range-batch-footer { align-items:flex-start; flex-direction:column; padding:11px 13px; }
  .range-batch-footer > div { width:100%; justify-content:flex-start; }
  .harmony-swatches { grid-template-columns:1fr; padding-right:12px; padding-left:12px; }
  .contrast-inputs { grid-template-columns:minmax(0,1fr); }
  .swap-contrast-button { justify-self:center; transform:rotate(90deg); }
  .contrast-result { grid-template-columns:1fr; }
  .saved-color-groups { grid-template-columns:1fr; }
  .gradient-type-row { align-items:flex-start; flex-direction:column; margin:0 13px 14px; }
  .gradient-radial-controls { grid-template-columns:1fr; margin-right:13px; margin-left:13px; }
  .palette-toolbar-actions { width:100%; justify-content:space-between; margin-left:0; }
  .export-menu-popover { left:0; right:auto; }
  .not-found-art { font-size:82px; }
  .not-found-color-grid { grid-template-columns:repeat(3,13px); grid-template-rows:repeat(3,13px); margin-right:5px; margin-left:2px; }
}

/* Responsive polish for inspector disclosures and utility actions. */
.contrast-use-current { margin: -5px 18px 12px; }
@media (max-width:820px) {
  .inspector-panel > .inspector-advanced-formats { grid-column:1 / -1; }
}
@media (max-width:590px) {
  .contrast-use-current { margin: -2px 14px 12px; }
  .contrast-preview { margin-right:14px; margin-left:14px; padding:16px; }
  .contrast-result, .contrast-note { margin-right:14px; margin-left:14px; }
  .saved-colors-panel .panel-heading { align-items:flex-start; }
}

/* Small, quiet note for conversions whose result depends on an external profile. */
.format-note {
  margin: 0.4rem 0 0.7rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}