/* Gentelella v4: Inter, 4/8/16/24 spacing, compact controls. */
#appearance-launcher{position:fixed;right:24px;bottom:24px;z-index:1040;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--sv-border);border-radius:var(--radius-sm);background:var(--sv-surface);color:var(--sv-primary-text);box-shadow:0 2px 4px color-mix(in srgb,var(--sv-text) 7%,transparent);cursor:pointer}
#appearance-launcher:hover{background:var(--sv-surface-elevated)}#appearance-launcher svg{width:20px;height:20px}
#appearance-drawer{--radius-sm:4px;--radius-lg:8px;position:fixed;inset:0 0 0 auto;margin:0;width:min(420px,100%);height:100%;height:100dvh;max-height:none;max-width:100%;border:0;border-left:1px solid var(--sv-border);border-radius:0;padding:0;background:var(--sv-surface);color:var(--sv-text);box-shadow:-8px 0 32px #00000018;overflow:hidden;font:400 14px/1.4286 'Inter',sans-serif}
#appearance-drawer[open]{display:flex;flex-direction:column;animation:appearance-enter .2s ease-out}#appearance-drawer::backdrop{background:color-mix(in srgb,var(--sv-bg) 70%,transparent)}
#appearance-drawer .appearance-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:24px;border-bottom:1px solid var(--sv-border);background:var(--sv-surface)}
#appearance-drawer .appearance-header span{font-size:11px;color:var(--sv-text-muted);font-weight:400}#appearance-drawer h2{font-size:18px;font-weight:600;line-height:1.4;letter-spacing:-.3px;margin:4px 0 0;color:var(--sv-text)}
#appearance-drawer .appearance-close{display:grid;place-items:center;width:32px;height:32px;min-height:32px;flex:none;padding:0;border:1px solid var(--sv-border);border-radius:var(--radius-sm);background:var(--sv-bg);font-size:24px;font-weight:400;line-height:1;color:var(--sv-text);cursor:pointer}
#appearance-drawer .appearance-scroll{overflow:auto;overscroll-behavior:contain;padding:24px;scrollbar-width:thin;scrollbar-color:var(--sv-border) transparent;flex:1;min-height:0}
#appearance-drawer .appearance-intro{font-size:14px;line-height:1.55;color:var(--sv-text-muted);margin:0 0 24px}#appearance-drawer form{margin:0;display:grid;gap:24px}
#appearance-drawer fieldset{min-width:0;margin:0;padding:16px;border:1px solid var(--sv-border);border-radius:var(--radius-lg)}#appearance-drawer legend{float:none;width:auto;padding:0 6px;margin:0;font-size:13px;line-height:1.4;font-weight:600;color:var(--sv-text)}
#appearance-drawer fieldset>p{font-size:11.5px;line-height:1.5;color:var(--sv-text-muted);margin:12px 0 0}
#appearance-drawer .appearance-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:8px 0 24px}
#appearance-drawer [data-color]{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--swatch);color:var(--swatch-fg,#fff);cursor:pointer;position:relative}
#appearance-drawer [data-color] svg{opacity:0;width:18px;height:18px}#appearance-drawer [data-color][aria-pressed=true]{outline:2px solid var(--sv-text-muted);outline-offset:4px}#appearance-drawer [data-color][aria-pressed=true] svg{opacity:1}
#appearance-drawer .appearance-color{display:flex;align-items:end;gap:12px}#appearance-drawer label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--sv-text);margin:0;min-width:0}
#appearance-drawer input[type=color]{display:block;width:42px;height:36px;padding:3px;border:1px solid var(--sv-border);border-radius:var(--radius-sm);background:var(--sv-bg);cursor:pointer}
#appearance-drawer input[type=text]{height:36px;min-height:36px;width:100%;padding:0 12px;border:1px solid var(--sv-border);border-radius:var(--radius-sm);color:var(--sv-text);background:var(--sv-surface);font:500 12.5px/1.4 'Inter',sans-serif}
#appearance-drawer .appearance-color label{max-width:190px;flex:1}#appearance-drawer .appearance-error{display:block;font-size:11px;margin-top:8px;color:var(--sv-danger)}#appearance-drawer .appearance-error:empty{display:none}
#appearance-drawer .appearance-segments{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}#appearance-drawer .appearance-segments button,#appearance-drawer .appearance-reset{height:36px;padding:0 10px;border:1px solid var(--sv-border);border-radius:var(--radius-sm);background:var(--sv-bg);color:var(--sv-text);font:500 12px/1.4 'Inter',sans-serif;cursor:pointer}
#appearance-drawer .appearance-segments button[aria-pressed=true]{background:var(--sv-soft);border-color:var(--sv-primary-text);color:var(--sv-primary-text)}#appearance-drawer .appearance-segments button:hover,#appearance-drawer .appearance-reset:hover{background:var(--sv-soft)}
#appearance-drawer .appearance-slider{margin:8px 0 20px;gap:12px}#appearance-drawer .appearance-slider:last-child{margin-bottom:4px}#appearance-drawer .appearance-slider>span{display:flex;justify-content:space-between;gap:12px}#appearance-drawer output{color:var(--sv-text-muted);font-variant-numeric:tabular-nums}
#appearance-drawer input[type=range]{appearance:none;display:block;width:100%;height:4px;min-height:4px;margin:0;padding:0;border:0;border-radius:2px;background:var(--sv-border);cursor:pointer;accent-color:var(--sv-primary)}#appearance-drawer input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--sv-primary);border:2px solid var(--sv-surface);box-shadow:0 0 0 1px var(--sv-primary-text)}#appearance-drawer input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--sv-primary);border:2px solid var(--sv-surface);box-shadow:0 0 0 1px var(--sv-primary-text)}
#appearance-drawer .appearance-footer{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:8px}#appearance-status{font-size:11.5px;line-height:1.5;min-height:18px;color:var(--sv-text-muted)}
@keyframes appearance-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:480px){#appearance-launcher{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}#appearance-drawer{width:min(390px,calc(100% - 16px))}#appearance-drawer .appearance-header,#appearance-drawer .appearance-scroll{padding:20px}#appearance-drawer .appearance-swatches{gap:12px 8px}}
@media(prefers-reduced-motion:reduce){#appearance-drawer[open]{animation:none}}

@media(max-width:360px){#appearance-drawer .appearance-swatches{grid-template-columns:repeat(5,minmax(0,1fr))}}