.roof-tool { max-width: 1100px; }
.roof-panel { background: #fff; border: 1px solid #d8dee8; border-radius: 8px; padding: 24px; box-shadow: 0 8px 24px rgba(32,45,64,.08); }
.roof-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.roof-result { background: #1f2937; color: #f8fafc; font-size: 1.05rem; }
.roof-status { padding: 12px; border-radius: 8px; background: #f0f7ff; color: #1e3a5f; }
.roof-status.is-error { background: #fff1f1; color: #8a1f1f; }
.roof-status.is-success { background: #eefaf2; color: #14532d; }
@media (max-width: 767.98px) { .roof-panel { padding: 16px; } .roof-actions .btn { min-height: 44px; } }