.appearance-settings{--ap-accent: hsl(var(--accent-h, 217), var(--accent-s, 91%), 55%);--ap-accent-glow: hsla(var(--accent-h, 217), var(--accent-s, 91%), 55%, .38);--ap-ring-gap: rgba(8, 10, 18, .92);--ap-field-bg: rgba(255, 255, 255, .025);--ap-option-bg: rgba(255, 255, 255, .045);--ap-swatch-edge: rgba(255, 255, 255, .14);display:grid;gap:2px}[data-theme=light] .appearance-settings{--ap-ring-gap: rgba(255, 255, 255, .96);--ap-field-bg: rgba(15, 23, 42, .025);--ap-option-bg: rgba(15, 23, 42, .04);--ap-swatch-edge: rgba(15, 23, 42, .12)}.appearance-settings .appearance-title{margin:0 0 2px;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text-heading, #f3f4f6)}[data-theme=light] .appearance-settings .appearance-title{color:var(--text-heading, #0f172a)}.appearance-settings .appearance-help{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--text-muted, #6b7280)}.appearance-settings .appearance-field{border:1px solid var(--border, rgba(255, 255, 255, .09));border-radius:14px;padding:14px 16px 16px;margin:12px 0;background:var(--ap-field-bg)}.appearance-settings .appearance-field legend{font-size:12px;font-weight:700;padding:0 6px;color:var(--text-secondary, #9ca3af);letter-spacing:.02em}.theme-segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-option{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 12px;border:1px solid var(--border-input, rgba(255, 255, 255, .12));border-radius:12px;background:var(--ap-option-bg);color:var(--text-secondary, #9ca3af);font-size:13.5px;font-weight:700;white-space:nowrap;transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease}.theme-option:hover{transform:translateY(-1px);color:var(--text, #f3f4f6);border-color:var(--border-hover, rgba(255, 255, 255, .2))}[data-theme=light] .theme-option:hover{color:var(--text, #1e293b)}.theme-option.selected{border-color:transparent;color:#fff;background:linear-gradient(135deg,hsl(var(--accent-h, 217),var(--accent-s, 91%),56%),hsl(var(--accent-h, 217),var(--accent-s, 91%),42%));box-shadow:0 8px 22px var(--ap-accent-glow),inset 0 1px #ffffff4d}.theme-option.selected:hover{color:#fff}.accent-swatches{display:flex;align-items:center;flex-wrap:wrap;gap:12px;row-gap:18px}.accent-swatch{box-sizing:border-box;width:32px;height:32px;border:0;border-radius:50%;padding:0;margin:0;flex-shrink:0;overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ap-swatch-edge),0 1px 2px #0000002e;background-clip:padding-box;-webkit-appearance:none;appearance:none;outline:none;transition:transform .18s ease,box-shadow .18s ease}.accent-swatch:hover{transform:scale(1.08);box-shadow:inset 0 0 0 1px #ffffff47,0 2px 8px #00000038}[data-theme=light] .accent-swatch:hover{box-shadow:inset 0 0 0 1px #0f172a33,0 2px 8px #0f172a1f}.accent-swatch.active{transform:none;box-shadow:inset 0 0 0 1px #ffffff38,0 0 0 2px var(--ap-ring-gap),0 0 0 4px var(--ap-accent),0 4px 16px var(--ap-accent-glow)}.accent-swatch:focus-visible{box-shadow:inset 0 0 0 1px #ffffff38,0 0 0 2px var(--ap-ring-gap),0 0 0 4px var(--ap-accent)}.swatch-wrap{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.swatch-remove{position:absolute;top:-5px;right:-5px;box-sizing:border-box;width:16px;height:16px;padding:0;margin:0;border:0;border-radius:50%;background:#0f121ce0;color:#ffffffeb;display:grid;place-items:center;cursor:pointer;opacity:0;box-shadow:inset 0 0 0 1px #ffffff24,0 2px 6px #00000059;-webkit-appearance:none;appearance:none;outline:none;transition:opacity .15s ease,transform .15s ease,background .15s ease,color .15s ease}[data-theme=light] .swatch-remove{background:#fffffff5;color:#0f172ac7;box-shadow:inset 0 0 0 1px #0f172a1f,0 2px 6px #0f172a24}.swatch-remove svg{display:block;width:8px;height:8px;pointer-events:none}.swatch-wrap:hover .swatch-remove,.swatch-remove:focus-visible{opacity:1}.swatch-remove:hover{transform:scale(1.08);background:#ef4444eb;color:#fff;box-shadow:inset 0 0 0 1px #ffffff2e,0 3px 10px #ef444459}[data-theme=light] .swatch-remove:hover{background:#ef4444f2;color:#fff}.custom-accent-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px}.custom-picker{display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border:1px solid var(--border-input, rgba(255, 255, 255, .12));border-radius:999px;background:var(--ap-option-bg);cursor:pointer;transition:border-color .2s ease}.custom-picker:hover{border-color:var(--border-hover, rgba(255, 255, 255, .2))}.custom-picker input[type=color]{width:28px;height:28px;padding:0;border:none;border-radius:50%;background:none;overflow:hidden;cursor:pointer}.custom-picker code{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--text, #f3f4f6)}[data-theme=light] .custom-picker code{color:var(--text, #1e293b)}.save-accent{min-height:36px;padding:8px 16px;border-radius:999px;border:1px solid hsla(var(--accent-h, 217),var(--accent-s, 91%),55%,.45);background:hsla(var(--accent-h, 217),var(--accent-s, 91%),55%,.14);color:var(--ap-accent);font-size:12.5px;font-weight:800;white-space:nowrap;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}.save-accent:hover{background:hsla(var(--accent-h, 217),var(--accent-s, 91%),55%,.26);box-shadow:0 6px 18px var(--ap-accent-glow);transform:translateY(-1px)}.accent-hint{margin:8px 0 0;font-size:12px;color:#fbbf24}.accent-lightness{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:12px 0 0;font-size:12px;font-weight:600;color:var(--text-secondary,#9ca3af)}.accent-lightness input[type=range]{width:100%;margin:0;padding:0;border:0;background:transparent;accent-color:hsl(var(--accent-h,217),var(--accent-s,91%),var(--accent-l,60%))}.accent-lightness code{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-muted,#6b7280)}.appearance-settings .appearance-field{min-width:0}.theme-segmented{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-option,.save-accent{min-width:0;white-space:normal;overflow-wrap:anywhere}.accent-lightness{grid-template-columns:auto minmax(0,1fr) auto}@media(max-width:560px){.theme-option{padding:10px 6px;flex-wrap:wrap}.accent-lightness{grid-template-columns:minmax(0,1fr) auto}.accent-lightness input[type=range]{grid-row:2;grid-column:1/-1;min-height:44px}.save-accent{min-height:44px}}@media(hover:none){.swatch-remove{opacity:1;width:18px;height:18px;top:-6px;right:-6px}.swatch-remove svg{width:9px;height:9px}.accent-swatches{gap:16px}}
