[data-roof-editor]{--roof-ink:#18313e;--roof-accent:#17756d;color:var(--roof-ink)}
[data-roof-editor] section,[data-roof-editor] details{margin:20px 0;padding:20px;border:1px solid #d5e0e4;border-radius:16px;background:#fff}
[data-roof-editor] .roof-hero{background:#183d46;color:#fff}
[data-roof-editor] h2{font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.25;margin:0 0 12px}
[data-roof-editor] h3{font-size:1.1rem;margin:0 0 14px}
[data-roof-editor] p{line-height:1.55}
.roof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.roof-field{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:6px;min-width:0;align-content:start}
.roof-field>span{font-weight:650;line-height:1.35}.roof-field small{color:#546873;font-size:.85rem;line-height:1.4}
[data-roof-editor] input,[data-roof-editor] select{box-sizing:border-box;width:100%;min-width:0;height:48px;padding:9px 11px;border:1px solid #b8cbd1;border-radius:9px;background:#fff;color:#18313e;font:inherit}
[data-roof-editor] button{min-height:44px;padding:10px 15px;border:1px solid #a8c2c8;border-radius:9px;background:#f0f7f7;color:#174b50;font:inherit;cursor:pointer}
[data-roof-editor] button:hover{background:#dfeeed;color:#133a40}[data-roof-editor] :focus-visible{outline:3px solid #2269bb;outline-offset:3px}
.roof-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0}.roof-card{padding:18px 0;border-top:1px solid #d5e0e4}.roof-card:first-child{border-top:0}.roof-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}
.roof-sketches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}.roof-sketches figure{margin:0;background:#f4f8f8;border:1px solid #d8e4e6;border-radius:12px;padding:14px}.roof-sketches svg{width:100%;height:185px;display:block}.roof-sketches figcaption{font-size:.9rem;line-height:1.45}
.roof-orders{display:grid;gap:12px}.roof-order{background:#f4f8f8;padding:16px;border-radius:12px}.roof-order strong{font-size:1.3rem}.roof-order p{margin:6px 0}.roof-error{background:#fff0ec;color:#9d2b17;padding:16px;border-radius:10px}.roof-note{color:#546873}.roof-print{display:none}
@media(max-width:750px){.roof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.roof-grid{grid-template-columns:1fr}[data-roof-editor] section,[data-roof-editor] details{padding:15px}}
@media print{body *{visibility:hidden!important}[data-roof-editor] .roof-print,[data-roof-editor] .roof-print *{visibility:visible!important}.roof-print{display:block!important;position:absolute;inset:0;white-space:pre-wrap;font:12pt/1.5 sans-serif;color:#000}}