.garden-app { min-height: 100vh; background: #132016; color: #e8f5e9; }
.garden-app .site-header { background: #0f1a11; border-bottom: 1px solid #2e4a32; }
.garden-app .site-header .logo-img { height: 2.8rem; background: #f6f1e8; border-radius: 10px; padding: .15rem; }
#garden-root { min-height: calc(100vh - 4.4rem); display: flex; flex-direction: column; }
.gp-shell { display: flex; flex-direction: column; min-height: calc(100vh - 4.4rem); }
.gp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem .75rem; background: #0f1a11; border-bottom: 1px solid #2e4a32; }
.gp-body { flex: 1; min-height: 0; overflow: auto; }
.gp-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gp-editor-row { display: flex; flex: 1; min-height: 22rem; }
.gp-side { width: 16rem; overflow: auto; padding: .75rem; background: #0c140e; border-right: 1px solid #2e4a32; }
.gp-side-right { width: 18rem; overflow: auto; padding: .75rem; background: #0c140e; border-left: 1px solid #2e4a32; }
.gp-canvas { flex: 1; min-width: 0; min-height: 22rem; background: #132016; }
.gp-canvas svg { width: 100%; height: 100%; touch-action: none; }
.gp-help { display: inline-flex; width: 1rem; height: 1rem; margin-left: .25rem; align-items: center; justify-content: center; border-radius: 50%; background: #2e4a32; font-size: .65rem; cursor: help; position: relative; }
.gp-help span { display: none; position: absolute; left: 50%; top: 100%; z-index: 20; width: 16rem; margin-top: .25rem; transform: translateX(-50%); background: #1b2a1c; border: 1px solid #3e5c42; padding: .5rem; font-size: .75rem; border-radius: .4rem; }
.gp-help:hover span { display: block; }
.gp-page { max-width: 56rem; margin: 0 auto; padding: 1.5rem; }
.gp-map { height: 18rem; border-radius: .5rem; overflow: hidden; border: 1px solid #3e5c42; background: #1b2a1c; }
.gp-site { background: #1b2a1c; border: 1px solid #3e5c42; border-radius: .5rem; padding: .75rem 1rem; font-size: .85rem; }
.gp-alert { background: #7f1d1d; color: #fee2e2; padding: .5rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
@media (max-width: 900px) {
	.gp-editor-row { flex-direction: column; min-height: 0; }
	.gp-side, .gp-side-right { width: 100%; max-height: 12rem; border: 0; border-bottom: 1px solid #2e4a32; }
	.gp-canvas { min-height: 22rem; }
}