.appearance-overlay{z-index:82;background:var(--scrim,#201e1d80);animation:.15s both appearance-fade;position:fixed;inset:0}.appearance-dialog{z-index:83;overscroll-behavior:contain;width:min(32rem,100vw);max-height:min(44rem,100dvh - 12px);padding:18px max(18px, env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px, env(safe-area-inset-left,0px));background:var(--card);color:var(--foreground);border:1px solid var(--border);border-top:3px solid var(--primary);border-radius:calc(var(--radius) + 10px) calc(var(--radius) + 10px) 0 0;box-shadow:var(--popover-shadow);font-family:var(--font-body);gap:14px;font-size:15px;line-height:1.45;animation:.2s cubic-bezier(.2,.8,.2,1) both appearance-rise;display:grid;position:fixed;bottom:0;left:50%;overflow-y:auto;transform:translate(-50%)}@media (width>=640px){.appearance-dialog{border-radius:calc(var(--radius) + 6px);width:min(32rem,100vw - 32px);animation-name:appearance-pop;top:50%;bottom:auto;transform:translate(-50%,-50%)}}.appearance-dialog:focus{outline:none}.appearance-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.appearance-title{font-family:var(--font-heading);font-size:22px;font-weight:var(--heading-weight);align-items:center;gap:10px;margin:0;display:flex}.appearance-title svg{width:24px;height:24px;color:var(--primary)}.appearance-close{border-radius:var(--radius);width:44px;height:44px;color:var(--muted-foreground);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.appearance-close:hover{background:var(--secondary);color:var(--foreground)}.appearance-desc{color:var(--muted-foreground);margin:-8px 0 0;font-size:14px}.appearance-group{border:0;gap:8px;min-width:0;margin:0;padding:0;display:grid}.appearance-group legend{letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:8px;padding:0;font-size:12px;font-weight:600}.appearance-dialog input[type=radio]{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0;position:absolute}.appearance-modes{border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);grid-template-columns:repeat(3,minmax(0,1fr));gap:0;display:grid;overflow:hidden}.appearance-mode{min-height:44px;color:var(--muted-foreground);background:var(--card);cursor:pointer;justify-content:center;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:600;display:flex;position:relative}.appearance-mode+.appearance-mode{border-left:1px solid var(--border)}.appearance-hint{color:var(--muted-foreground);margin:2px 0 0;font-size:13px}.appearance-mode svg{width:20px;height:20px}.appearance-mode:has(input:checked){background:var(--primary);color:var(--primary-foreground)}.appearance-mode:has(input:focus-visible){outline:3px solid var(--ring);outline-offset:-3px}.appearance-options{gap:8px;display:grid}.appearance-option{border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);background:var(--card);cursor:pointer;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;margin:0;padding:8px 12px 8px 8px;font-size:15px;display:grid;position:relative}.appearance-option:hover{border-color:var(--input)}.appearance-option:has(input:checked){border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:var(--accent)}.appearance-option:has(input:focus-visible){outline:3px solid var(--ring);outline-offset:2px}.appearance-text{gap:1px;min-width:0;display:grid}.appearance-name{color:var(--foreground);font-weight:600}.appearance-option:has(input:checked) .appearance-name{color:var(--accent-foreground)}.appearance-note{color:var(--muted-foreground);font-size:13px}.appearance-check{width:20px;height:20px;color:var(--primary);visibility:hidden}.appearance-option:has(input:checked) .appearance-check{visibility:visible}.appearance-swatch{border-radius:6px;width:64px;height:44px;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #7f7f7f59}.appearance-swatch .sw-bar{height:6px;position:absolute;top:0;left:0;right:0}.appearance-swatch .sw-card{border-radius:3px;align-content:center;gap:4px;padding:0 6px;display:grid;position:absolute;inset:13px 8px 7px}.appearance-swatch .sw-line{opacity:.85;border-radius:2px;height:3px;display:block}.appearance-swatch .sw-line.short{opacity:1;width:55%}.appearance-sample{background:var(--secondary);width:64px;height:44px;color:var(--foreground);border-radius:6px;justify-content:center;align-items:center;font-size:24px;font-weight:600;line-height:1;display:flex}@media (width>=640px){.appearance-dialog{width:min(42rem,100vw - 32px)}.appearance-options{grid-template-columns:repeat(3,minmax(0,1fr))}.appearance-option{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:8px 8px 10px}.appearance-swatch,.appearance-sample{width:100%;height:56px}.appearance-swatch .sw-card{inset:15px 12px 9px}.appearance-check{background:var(--card);border-radius:999px;width:22px;height:22px;padding:2px;position:absolute;top:12px;right:12px}}.appearance-foot{justify-content:space-between;align-items:center;gap:12px;padding-top:4px;display:flex}.appearance-reset{min-height:44px;color:var(--primary);font:inherit;text-underline-offset:.18em;cursor:pointer;background:0 0;border:0;padding:0 4px;font-weight:600;text-decoration:underline}.appearance-done{border-radius:var(--radius);background:var(--primary);min-height:44px;color:var(--primary-foreground);font:inherit;cursor:pointer;border:0;padding:0 22px;font-weight:600}.appearance-done:hover{filter:brightness(1.08)}.appearance-btn{border-radius:var(--radius);width:44px;height:44px;color:var(--primary);cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.appearance-btn:hover{background:var(--accent)}.appearance-btn svg{width:1.3rem;height:1.3rem}@keyframes appearance-fade{0%{opacity:0}to{opacity:1}}@keyframes appearance-rise{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@keyframes appearance-pop{0%{opacity:0;transform:translate(-50%,calc(8px - 50%))}to{opacity:1;transform:translate(-50%,-50%)}}@media (prefers-reduced-motion:reduce){.appearance-overlay,.appearance-dialog{animation:none}}@media print{.appearance-overlay,.appearance-dialog{display:none!important}}
