/* Virtual Greenhouse Builder styles */
:root {
  --vgb-bg: #0b0f17;
  --vgb-card: #101826;
  --vgb-text: #e7eefc;
  --vgb-muted: #a8b3c7;
  --vgb-primary: #60a5fa;
  --vgb-accent: #22d3ee;
  --vgb-border: #1f2a3a;
  --vgb-radius: 16px;
  --vgb-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.vgb-app { color: var(--vgb-text); background: linear-gradient(180deg,#0b0f17,#0b0f17 40%,#0a1422 100%); border-radius: 18px; box-shadow: var(--vgb-shadow); overflow: hidden; }
.vgb-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--vgb-border); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(6px); }
.vgb-title { font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; letter-spacing: .2px; }
.vgb-actions { display:flex; gap:10px; align-items:center; }
.vgb-actions select { background: var(--vgb-card); color: var(--vgb-text); border:1px solid var(--vgb-border); border-radius: 999px; padding:8px 10px; }
.vgb-btn { background: transparent; border:1px solid var(--vgb-border); color: var(--vgb-text); padding:8px 12px; border-radius:999px; cursor:pointer; }
.vgb-btn:hover { border-color: var(--vgb-accent); }
.vgb-primary { background: linear-gradient(90deg, var(--vgb-primary), var(--vgb-accent)); border: 0; color: #0b0f17; font-weight:700; }

.vgb-body { display:grid; grid-template-columns: 260px 1fr 280px; gap: 14px; padding: 14px; }
@media (max-width: 960px){ .vgb-body { grid-template-columns: 1fr; } }

.vgb-palette, .vgb-summary { background: var(--vgb-card); border:1px solid var(--vgb-border); border-radius: var(--vgb-radius); padding: 12px; }
.vgb-palette h4, .vgb-summary h4 { margin: 6px 0 10px; color: var(--vgb-muted); }
.vgb-parts { display:grid; gap:8px; }
.vgb-part { text-align:left; border-radius:12px; border:1px solid var(--vgb-border); background: #0f1624; padding:8px; color:inherit; cursor:pointer; }
.vgb-part-title { font-weight: 600; }
.vgb-part-meta { font-size:12px; color: var(--vgb-muted); }

.vgb-canvas-wrap { background: #0a1220; border:1px solid var(--vgb-border); border-radius: var(--vgb-radius); padding: 10px; }
.vgb-canvas { position: relative; height: 600px; background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size: var(--cell) var(--cell), var(--cell) var(--cell); }
.vgb-canvas { width: calc(var(--cols) * var(--cell)); max-width: 100%; overflow: hidden; }

.vgb-block { position:absolute; width: calc(var(--cell) * 2); height: calc(var(--cell) * 1); background: #122036; border:1px solid var(--vgb-border); border-radius: 12px; padding: 6px 8px; box-shadow: 0 8px 20px rgba(0,0,0,.25); user-select: none; }
.vgb-block span { display:block; font-size:12px; color: var(--vgb-muted); }
.vgb-block em { position:absolute; right:8px; top:6px; font-style:normal; font-size:12px; }
.vgb-block-actions { position:absolute; left:8px; bottom:6px; display:flex; gap:6px; }
.vgb-block-actions button { width:22px; height:22px; border-radius:6px; border:1px solid var(--vgb-border); background: #0f1a2c; color:var(--vgb-text); cursor:pointer; }

.vgb-summary-content { display:grid; gap:8px; }
.vgb-total { font-size:18px; font-weight:700; }

.vgb-modal[hidden]{ display:none !important; }
.vgb-modal { position:fixed; inset:0; background: rgba(0,0,0,.55); display:grid; place-items:center; z-index: 50; }
.vgb-modal-card { width:min(560px, 94vw); background: var(--vgb-card); border:1px solid var(--vgb-border); border-radius: 16px; padding: 16px; }
.vgb-form { display:grid; gap:10px; }
.vgb-form input, .vgb-form textarea { width: 100%; background: #0f1624; border:1px solid var(--vgb-border); color: var(--vgb-text); border-radius: 10px; padding: 8px 10px; }
.vgb-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top: 4px; }
.vgb-status { margin-top: 8px; color: var(--vgb-muted); }