.roof-palette-dialog{box-sizing:border-box;width:min(1000px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid #ded7ce;border-radius:22px;background:#faf8f5;color:#24231f;box-shadow:0 30px 100px #17141040;font-family:Inter,Arial,sans-serif;overflow:auto}
.roof-palette-dialog::backdrop{background:#241d19a6}
.roof-palette-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 30px;background:#faf8f5;border-bottom:1px solid #e5ddd3}
.roof-palette-header>div>span{display:block;font-size:13px;color:#8a6c55;margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase}
.roof-palette-header h2{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.035em}
.roof-palette-header button{flex-shrink:0;padding:12px 17px;background:#fff;border:1px solid #d9cec1;border-radius:9px;color:#40372e;font:600 15px Inter,Arial,sans-serif;cursor:pointer}
.roof-palette-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:34px;padding:28px 30px}
.roof-palette-figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;background:#ece7df;border-radius:16px}
.roof-palette-photo{position:relative;aspect-ratio:9/16;width:100%;max-width:260px}
.roof-palette-photo img{display:block;width:100%;height:100%;object-fit:fill;border-radius:8px}
.roof-palette-marker{position:absolute;left:7%;right:8%;border:2px solid #fff;border-radius:3px;box-shadow:0 0 0 1px #27221ea6,0 2px 10px #0002;pointer-events:none;transition:top .25s ease,height .25s ease}
.roof-palette-figure figcaption{font-size:13px;color:#6a6157;line-height:1.4;text-align:center;margin-top:12px}
.roof-palette-selected{margin:0 0 22px}
.roof-palette-selected>span{font-size:14px;color:#9b491a;font-weight:600;letter-spacing:.06em}
.roof-palette-selected h3{font-size:29px;line-height:1.15;letter-spacing:-.025em;margin:8px 0 0}
.roof-palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.roof-palette-color{position:relative;display:flex;align-items:center;gap:12px;min-height:82px;padding:13px 12px;text-align:left;border:1px solid #ded7cf;border-radius:12px;background:#fff;color:#29251f;font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.roof-palette-color:hover{border-color:#bb9477;background:#f9f3ec}
.roof-palette-color[aria-pressed=true]{border-color:#c44e12;box-shadow:inset 0 0 0 1px #c44e12;background:#fff8f1}
.roof-palette-swatch{display:block;flex-shrink:0;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002,inset 0 7px 12px #ffffff18}
.roof-palette-color strong{display:block;font-size:16px;line-height:1.25;font-weight:600}
.roof-palette-color>span>span{display:block;font-size:13px;color:#7b7066;margin-top:4px}
.roof-palette-check{display:none;position:absolute;top:6px;right:8px;color:#bd4d14;font-size:13px}
.roof-palette-color[aria-pressed=true] .roof-palette-check{display:block}
.roof-palette-color{min-width:0}.roof-palette-color>span:nth-child(2){min-width:0}.roof-palette-color strong{overflow-wrap:anywhere}
.roof-palette-note{margin:20px 0 0;font-size:15px;line-height:1.55;color:#746a60}
.roof-palette-preview{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:23px;border:1px solid #ded7cc;border-radius:14px;background:#f5f1eb;color:#2d2722;text-align:left;cursor:pointer;font-family:inherit}
.roof-palette-preview strong{display:block;font-size:22px;letter-spacing:-.02em}.roof-palette-preview small{display:block;margin-top:7px;font-size:16px;line-height:1.4;color:#77695b}
.roof-palette-mini{display:flex;gap:6px;flex-wrap:wrap;max-width:144px}.roof-palette-mini i{display:block;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002}
.e-roof-colors{margin:28px 0 0}.e-roof-colors h3{margin:0 0 14px;font-size:24px}
.roof-palette-dialog button:focus-visible,.roof-palette-preview:focus-visible{outline:3px solid #c44e12;outline-offset:3px}
@media(max-width:700px){.roof-palette-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:16px}.roof-palette-header{padding:17px 18px;gap:10px}.roof-palette-header h2{font-size:25px}.roof-palette-header button{padding:10px 12px;font-size:14px}.roof-palette-body{grid-template-columns:1fr;gap:20px;padding:18px}.roof-palette-figure{display:none}.roof-palette-selected{margin-bottom:17px}.roof-palette-selected h3{font-size:25px}.roof-palette-color{min-height:76px;padding:12px 10px;gap:9px}.roof-palette-swatch{width:28px;height:28px}.roof-palette-color strong{font-size:15px}.roof-palette-note{font-size:14px;margin-top:16px}.roof-palette-preview{padding:18px;gap:12px}.roof-palette-preview strong{font-size:20px}.roof-palette-preview small{font-size:15px}.roof-palette-mini{max-width:114px;gap:5px}.roof-palette-mini i{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.roof-palette-marker,.roof-palette-color{transition:none}}
@media(max-width:700px){.roof-palette-swatch{width:24px;height:24px}.roof-palette-color{gap:8px}.roof-palette-color strong{font-size:14px}}