.tiles-page { max-width: 1280px; margin: 70px auto 32px; }
.tiles-page [hidden] { display: none !important; }
.tiles-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tiles-panel { border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px; background: #fff; }
.tiles-panel h2 { font-size: 22px; margin: 0 0 16px; }
.tiles-panel h3 { font-size: 17px; margin: 16px 0 10px; }
.tiles-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tiles-page label, .tiles-label { display: block; font-weight: 600; margin-bottom: 6px; }
.tiles-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.tiles-hint { color: #616161; font-size: 13px; line-height: 1.6; }
.tiles-wall-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiles-wall-options label, .tiles-check { font-weight: 400 !important; }
.tiles-check { margin-top: 16px; }
.tiles-page .tiles-card { padding: 14px; border: 1px solid #ddd; border-radius: 6px; margin: 16px 0; }
.tiles-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tiles-card-header h3 { margin: 0; }
.tiles-remove { color: #9c2c22; padding: 6px 10px; }
.tiles-actions { display: flex; flex-wrap: wrap; gap: 8px; }
[data-surface-actions] { margin-top: 12px; }
[data-surface-openings] .tiles-card { background: #fafafa; }
.tiles-submit { width: 100%; padding: 14px; font-size: 18px; }
.tiles-preview { position: sticky; top: 60px; max-height: calc(100vh - 80px); overflow: auto; }
.tiles-preview svg { display: block; width: 100%; height: auto; max-height: 320px; }
.tiles-svg-button { cursor: pointer; }
.tiles-svg-button:focus { outline: 3px solid #333; outline-offset: 3px; }
.tiles-svg-button:hover { opacity: 0.8; }
.tiles-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin: 0 4px 0 10px; }
.tiles-wall-color { background: #b9dfd0; }
.tiles-floor-color { background: #ffe4a3; }
.tiles-legend { font-size: 13px; color: #616161; }
.tiles-elevation { border-top: 1px solid #eee; padding-top: 12px; margin-top: 16px; }
.tiles-elevation h4 { margin: 0; font-size: 16px; }
.tiles-elevation p { margin: 6px 0; }
.tiles-elevation.is-highlighted, .tiles-card.is-highlighted { background: #f1f8f4; outline: 2px solid #268263; outline-offset: 2px; }
.tiles-warning { color: #9c2c22; }
.tiles-answer { font-size: 30px; margin: 12px 0; }
.tiles-result { margin-top: 24px; border-color: #268263; }
.tiles-group { margin: 20px 0; }
.tiles-group h3 { font-size: 20px; }
.tiles-page summary { cursor: pointer; font-weight: 600; margin: 16px 0; }
.tiles-result td:last-child { font-weight: 600; }
@media (max-width: 800px) {
    .tiles-layout { grid-template-columns: 1fr; gap: 16px; }
    .tiles-preview { position: static; max-height: none; overflow: visible; }
    .tiles-panel { padding: 16px; }
}
@media (max-width: 400px) {
    .tiles-fields, .tiles-wall-options { grid-template-columns: 1fr; }
}