* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Helvetica, Arial, sans-serif; color: #17351f; }
a { color: inherit; text-decoration: none; }

.landing-page {
  min-height: 100vh;
  background: linear-gradient(rgba(18, 43, 22, 0.35), rgba(18, 43, 22, 0.35)), url('assets/aloe-field.jpg') center/cover no-repeat;
}
.landing-overlay { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.landing-card { text-align: center; color: white; }
.landing-card h1 { font-size: clamp(52px, 10vw, 118px); margin: 0; font-weight: 600; letter-spacing: -4px; text-transform: lowercase; }
.landing-card p { font-size: clamp(20px, 3vw, 34px); margin: 10px 0 34px; }
.primary-button, .secondary-button, button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 0; border-radius: 999px; padding: 0 30px;
  background: #315b36; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
}
.primary-button:hover, .secondary-button:hover, button:hover { filter: brightness(1.06); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.chat-button { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; padding: 0; font-size: 24px; box-shadow: 0 12px 32px rgba(0,0,0,0.22); }
.chat-box { position: fixed; right: 22px; bottom: 92px; width: min(320px, calc(100vw - 44px)); padding: 18px; background: #fff; border-radius: 18px; box-shadow: 0 16px 45px rgba(0,0,0,0.25); display: none; }
.chat-box.open { display: grid; gap: 10px; }
.chat-box h2 { margin: 0 0 4px; }
input, textarea, select { width: 100%; border: 1px solid #cbd8cc; border-radius: 12px; padding: 13px; font: inherit; background: #fff; }
textarea { min-height: 100px; resize: vertical; }

.login-page { min-height: 100vh; display: grid; place-items: center; background: #edf3ed; padding: 24px; }
.login-card { width: min(420px, 100%); background: white; border-radius: 24px; padding: 36px; box-shadow: 0 18px 55px rgba(27, 56, 33, 0.13); }
.login-card h1 { margin: 0; font-size: 52px; letter-spacing: -2px; text-transform: lowercase; }
.login-card form { display: grid; gap: 14px; margin-top: 22px; }
.login-card small { min-height: 18px; color: #9b2f2f; }

.greenhub-page, .ar-page { min-height: 100vh; background: #f4f7f2; }
.greenhub-header { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: #fff; border-bottom: 1px solid #dfe8df; position: sticky; top: 0; z-index: 5; }
.brand { font-size: 30px; font-weight: 600; letter-spacing: -1px; }
.greenhub-header nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.greenhub-header nav a { font-weight: 700; color: #315b36; }
.nav-highlight { background: #e5efe4; padding: 10px 16px; border-radius: 999px; }
.dashboard { width: min(1120px, calc(100% - 40px)); margin: 32px auto; }
.hero-panel, .panel, .ar-controls { background: white; border-radius: 26px; padding: 28px; box-shadow: 0 14px 38px rgba(27, 56, 33, 0.08); }
.hero-panel h1 { font-size: clamp(36px, 6vw, 64px); margin: 0 0 12px; }
.hero-panel p { max-width: 720px; font-size: 20px; line-height: 1.5; }
.grid-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
.panel h2 { margin-top: 0; }
.clickable-panel { cursor: pointer; border: 2px solid #d7e7d5; }

.ar-layout { width: min(1120px, calc(100% - 28px)); margin: 24px auto; display: grid; grid-template-columns: 330px 1fr; gap: 20px; align-items: start; }
.ar-controls { display: grid; gap: 14px; }
.ar-controls h1 { margin: 0; font-size: 42px; }
.small-note { margin: 0; color: #60705f; line-height: 1.45; }
.ar-toolbox { display: grid; gap: 10px; }
.ar-toolbox label { font-weight: 600; }
#sizeSlider { padding: 0; accent-color: #2f6d3d; }
.size-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.size-buttons button { padding: 11px 12px; font-size: 14px; }
.camera-stage { position: relative; overflow: hidden; min-height: 640px; background: #142116; border-radius: 28px; box-shadow: 0 14px 38px rgba(27, 56, 33, 0.18); }
#cameraVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#plantOverlay { position: absolute; left: 50%; top: 92%; transform: translate(-50%, -100%); height: 70%; max-width: 90%; object-fit: contain; opacity: 0.6; display: none; touch-action: none; cursor: grab; user-select: none; }
#plantOverlay:active { cursor: grabbing; }
#plantOverlay.visible { display: block; }
.camera-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-align: center; padding: 28px; font-size: 22px; }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .greenhub-header { height: auto; padding: 18px; align-items: flex-start; gap: 12px; flex-direction: column; }
  .grid-panels { grid-template-columns: 1fr; }
  .ar-layout { grid-template-columns: 1fr; }
  .camera-stage { min-height: 70vh; }
}