/* Faithful Social appearance-control layout, scoped overrides for KDS. */
.appearance-settings{display:grid;gap:13px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:23px}
.appearance-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.appearance-section-head h3,.optic-heading{font-size:12px;font-weight:700;color:var(--ink)}
.appearance-auto{font-size:10px;font-weight:650;color:var(--accent-display);text-decoration:underline;text-underline-offset:3px;padding:3px 0}
.appearance-segment{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;background:var(--soft-fill);border:1px solid var(--glass-border);border-radius:12px}
.appearance-segment button{min-height:36px;border-radius:9px;font-size:12px;color:var(--muted);font-weight:600}
.appearance-segment button[aria-pressed=true]{color:var(--ink);background:color-mix(in srgb,var(--theme-accent) 14%,transparent);box-shadow:inset 0 0 0 1px var(--glass-border),0 2px 8px #133b6433}
html[data-social-theme=dark] .appearance-segment button[aria-pressed=true]{color:var(--ink);background:color-mix(in srgb,var(--theme-accent) 20%,transparent);box-shadow:inset 0 0 0 1px #a9d5e668,0 2px 8px #0209146b}
.appearance-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.appearance-preset{display:grid;gap:6px;min-width:0;padding:5px 5px 8px;border-radius:9px;font-size:10px;font-weight:600;color:var(--ink);text-align:center;box-shadow:none}
.appearance-preset[aria-pressed=true]{outline:2px solid var(--accent-display);outline-offset:1px}
.appearance-swatch{display:block;position:relative;width:100%;height:40px;border-radius:6px;background:linear-gradient(135deg,var(--swatch-a),var(--swatch-b) 52%,var(--swatch-c));border:1px solid var(--glass-border)}
.appearance-swatch::after{content:'';position:absolute;right:5px;bottom:5px;width:11px;height:11px;border-radius:50%;background:var(--swatch-accent);border:1px solid #ffffffb8;box-shadow:0 1px 3px #07182755}
.appearance-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.appearance-color{display:grid;grid-template-columns:39px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:8px;min-width:0;border:1px solid var(--glass-border);border-radius:9px;padding:7px;background:var(--soft-fill);cursor:pointer}
.appearance-color>span{grid-column:2;font-size:10px;line-height:1.2;font-weight:650;white-space:normal;overflow-wrap:anywhere}
.appearance-color>input{grid-column:1;grid-row:1/3;width:39px;height:39px;border:0;padding:0;background:none;cursor:pointer}
.appearance-color>input::-webkit-color-swatch-wrapper{padding:0}.appearance-color>input::-webkit-color-swatch{border:1px solid var(--glass-border);border-radius:6px}
.appearance-color output{grid-column:2;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}
.appearance-gradient-colors{margin-bottom:2px}
.optic-heading{margin:0 0 4px}
.appearance-dialog .glass-control{margin:8px 0;padding:10px 12px;border:1px solid var(--glass-border);border-radius:9px}
.appearance-dialog .glass-control>span{margin-bottom:7px}
.appearance-dialog .live-check{min-height:38px}
.appearance-dialog .appearance-toggle{padding:7px 11px;margin:7px 0;border:1px solid var(--glass-border);border-radius:9px;font-size:11px}
.appearance-dialog .appearance-reset{margin-top:16px}
.live-modal>.panel.dialog:has(.appearance-dialog)>.dialog-scroll{height:auto;max-height:calc(90dvh - 48px);margin-top:48px}
.live-modal>.panel.dialog:has(.appearance-dialog)>.sg-pane{z-index:0!important}
.live-modal>.panel.dialog:has(.appearance-dialog)>.dialog-scroll{position:relative;z-index:1}
.live-modal>.panel.dialog:has(.appearance-dialog)>.dialog-scroll{background:transparent}
html[data-social-theme=dark] .appearance-reset.btn.glass{color:var(--accent-display)!important;background:#29485c;border-color:#a9d5e670}
html[data-social-theme=dark][data-social-background=sunrise] .appearance-reset.btn.glass:not(.glass-painted){background:#43242f}
@media(max-width:600px){.appearance-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.appearance-colors{grid-template-columns:1fr 1fr}.appearance-color:last-child{grid-column:1/-1}.appearance-settings{gap:12px}}
@media(max-width:390px){.appearance-presets{gap:6px}.appearance-preset{font-size:9px}}
:root{--soft-fill:#ffffff55;--glass-border:#f2faff9c;--accent-display:#0757dc;--ink:var(--theme-text);--blue:var(--theme-accent)}html[data-social-theme=dark]{--soft-fill:#bed8e51c;--glass-border:#a9d5e64d}.modal>.icon-btn{position:absolute;right:18px;top:18px;z-index:8}.modal-header{padding-right:44px}.modal.appearance-dialog{width:min(650px,calc(100vw - 24px));border-radius:24px}.appearance-dialog .modal-scroll{padding:76px 30px 24px}.appearance-dialog .modal-header{margin-bottom:6px;padding-right:0}.appearance-dialog .modal-header h2{font-size:18px;font-weight:700;letter-spacing:0;line-height:1.5}.appearance-dialog .modal-header p{font-size:14px;margin-top:17px;line-height:1.5}.appearance-dialog .appearance-settings{margin-top:0}.appearance-dialog .appearance-segment{width:100%;max-width:none}.appearance-dialog .appearance-segment button{padding:0 8px;min-height:36px}.appearance-dialog .appearance-preset{min-height:76px;display:grid;grid-template-rows:40px auto;align-items:center;justify-content:stretch;flex-direction:initial}.appearance-dialog .appearance-color{min-height:54px;gap:0 8px;text-align:left;position:relative;z-index:0}.appearance-color>.appearance-chip{grid-column:1;grid-row:1/3;width:39px;height:39px;display:block;border-radius:6px;border:1px solid var(--glass-border);position:relative;z-index:1}.appearance-color>span,.appearance-color>output{position:relative;z-index:1}.appearance-dialog .appearance-swatch{height:40px}.appearance-dialog .optics-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}.appearance-dialog .optic-control{padding:10px 12px;border:1px solid var(--glass-border);border-radius:9px;gap:7px;font-size:12px;min-height:67px}.appearance-dialog .optic-control>span{color:var(--muted)}.appearance-dialog .optic-control output{color:var(--accent-display);font-weight:600}.appearance-dialog .optic-control input{min-height:18px;height:18px}.appearance-dialog .appearance-toggle{display:flex;align-items:center;gap:11px;width:100%;padding:7px 11px;min-height:44px;margin:7px 0;border:1px solid var(--glass-border);border-radius:9px;font-size:11px}.appearance-dialog .appearance-toggle input{width:20px;height:20px;min-height:20px;border-radius:3px}.appearance-dialog .appearance-reset{margin-top:16px}.appearance-dialog input[type=range]::-webkit-slider-runnable-track,.appearance-picker input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:6px;background:linear-gradient(to right,#0860ff 0 var(--range-fill,50%),#d4dfeb var(--range-fill,50%) 100%);border:1px solid #93a9c278}.appearance-dialog input[type=range]::-webkit-slider-thumb,.appearance-picker input[type=range]::-webkit-slider-thumb{width:15px;height:15px;margin-top:-5px;border:0;background:#0860ff;box-shadow:none}.appearance-dialog input[type=range]::-moz-range-track,.appearance-picker input[type=range]::-moz-range-track{height:7px;background:#d4dfeb}.appearance-dialog input[type=range]::-moz-range-progress,.appearance-picker input[type=range]::-moz-range-progress{height:7px;background:#0860ff}.appearance-dialog input[type=range]::-moz-range-thumb,.appearance-picker input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;background:#0860ff}.appearance-segment button[aria-pressed=true]{outline:0!important}.appearance-picker{position:fixed!important;z-index:350;border-radius:18px;overflow:hidden;box-shadow:0 16px 50px #173d724d}.appearance-picker-scroll{overflow:auto;padding:16px;overscroll-behavior:contain;border-radius:inherit}.appearance-picker h3{font-size:15px}.appearance-picker .icon-btn{width:36px;min-height:36px;font-size:20px}.appearance-picker .color-hex-row{display:grid;grid-template-columns:52px 1fr;align-items:end;gap:12px;margin:15px 0}.appearance-picked-color{height:48px;border-radius:10px;border:1px solid var(--glass-border)}.appearance-picker .color-palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:12px 0}.color-palette button{display:grid;place-items:center;min-height:44px;border-radius:8px}.color-palette button i{width:29px;height:29px;background:var(--color);border:1px solid var(--glass-border);border-radius:7px}.color-palette button:focus-visible{outline:2px solid var(--accent-display)}.appearance-picker .optic-control{padding:10px 12px;margin-top:8px;gap:8px;border-radius:11px}.appearance-picker .optic-control>span{font-size:11px}.appearance-picker .optic-control output{color:var(--accent-display)}.appearance-picker .tiny{margin-top:12px}.appearance-picker [aria-invalid=true]{outline:2px solid #c76176}.appearance-picker .gc-input{background:transparent}.settings-appearance h2{font-size:19px}.settings-appearance .mt{margin-top:6px}
@media(max-width:650px){.appearance-dialog .modal-scroll{padding:66px 18px 20px}.appearance-dialog .modal-header p{font-size:12px}.appearance-dialog .appearance-color{padding:7px}.appearance-dialog .appearance-toggle{min-height:46px}.appearance-dialog .appearance-segment button{min-height:44px}.appearance-dialog .appearance-reset{width:100%}.modal>.icon-btn{right:14px;top:14px}}

@media(pointer:coarse){.appearance-dialog .appearance-segment button,.appearance-picker .icon-btn{min-width:44px;min-height:44px}}
