body { background: #e9ebe8; }
.lg { min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 14px; }
.lg-hero {
  position: relative; overflow: hidden; border-radius: 28px; padding: 36px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(90% 70% at 100% 100%, #2c8a57 0%, transparent 60%), radial-gradient(60% 50% at 0% 0%, #1e6a45 0%, transparent 70%), #0c2a1b;
}
.lg-hero::after { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 110% 110%, transparent 0 22px, rgb(255 255 255 / 0.05) 23px 24px); pointer-events: none; }
.lg-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 1.3rem; font-weight: 600; }
.lg-mark { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.lg-hero-text { position: relative; z-index: 1; max-width: 460px; }
.lg-hero-text h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 14px; }
.lg-hero-text p { font-size: 1.1rem; opacity: 0.8; margin: 0; }
.lg-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lg-stats div { background: rgb(255 255 255 / 0.08); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.lg-stats strong { font-size: 1.2rem; font-weight: 600; }
.lg-stats span { font-size: 0.85rem; opacity: 0.75; }
.lg-panel { background: var(--surface-2); border-radius: 28px; display: grid; place-items: center; padding: 24px; }
.lg-card { width: min(420px, 100%); background: var(--surface); border-radius: 26px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.lg-card h2 { font-size: 1.8rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.lg-card > p { margin: 0; }
.lg-tabs { margin: 6px 0; }
.lg-tabs button { flex: 1; min-height: 44px; font-size: 0.92rem; }
.lg-form { display: flex; flex-direction: column; gap: 14px; }
.lg-pin .pin-dots { margin: 8px 0 16px; min-height: 22px; align-items: center; }
.lg-pin .pin-grid button { min-height: 64px; border-radius: 18px; font-size: 1.5rem; }
.lg-pin .pin-grid button.go { background: var(--brand); color: #fff; border-color: var(--brand); }
.lg-error { color: var(--danger); font-weight: 600; min-height: 22px; }
.lg-foot { text-align: center; margin: 0; }
@media (max-width: 900px) {
  .lg { grid-template-columns: 1fr; }
  .lg-hero { min-height: 220px; padding: 24px; }
  .lg-stats { display: none; }
}