:root{--global-header-height:77px;--primary:#1CD19E;--primary-light:#4EEDC4;--primary-lighter:#7FF5D9;--primary-dark:#16A085;--primary-darker:#0E7A64;--primary-surface:#E8FBF7;--primary-border:#A8F0DE;--tree-protected:#FF6B6B;--tree-roadside:#84cc16;--tree-park:#45B7D1;--species-ginkgo:#FFD700;--species-cherry:#FFB6C1;--species-pine:#006400;--species-maple:#FF4500;--species-plane:#8FBC8F;--species-zelkova:#228B22;--species-oak:#8B4513;--species-willow:#32CD32;--species-other:#4ECDC4;--size-small:#90EE90;--size-medium-small:#32CD32;--size-medium:#228B22;--size-large:#006400;--size-extra-large:#013220;--surface:#FFFFFF;--surface-variant:#F8F9FA;--surface-elevated:rgba(255,255,255,0.95);--surface-dim:#F5F5F5;--surface-container:#F0F0F0;--outline:#E0E0E0;--outline-variant:#E8E8E8;--outline-light:#E9ECEF;--divider:#F0F0F0;--text-primary:#333333;--text-secondary:#666666;--text-tertiary:#999999;--text-quaternary:#BBBBBB;--text-disabled:#CCCCCC;--text-heading:#2C3E50;--on-surface:#333333;--on-surface-variant:#666666;--on-primary:#FFFFFF;--error:#ff4757;--error-dark:#e74c3c;--warning:#F39C12;--success:#1CD19E;--info:#45B7D1;--google-blue:#4285f4;--google-blue-dark:#3367d6;--favorite-pink:#FF69B4;--overlay-dark:rgba(0,0,0,0.5);--overlay-darker:rgba(0,0,0,0.9);--overlay-light:rgba(255,255,255,0.7);--overlay-lighter:rgba(255,255,255,0.9);--overlay-subtle:rgba(0,0,0,0.1);--shadow-color-sm:rgba(0,0,0,0.08);--shadow-color-md:rgba(0,0,0,0.12);--shadow-color-lg:rgba(0,0,0,0.15);--shadow-color-xl:rgba(0,0,0,0.2);--shadow-primary:rgba(28,209,158,0.3);--shadow-glow:rgba(28,209,158,0.3);--gradient-primary:var(--primary);--gradient-secondary:var(--primary);--gradient-success:var(--success);--gradient-warning:var(--warning);--gradient-legendary:var(--species-ginkgo);--gradient-protected:var(--tree-protected);--gradient-park:var(--tree-park);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-xxl:40px;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-xxl:24px;--text-xs:11px;--text-sm:12px;--text-base:14px;--text-lg:16px;--text-xl:20px;--text-2xl:24px;--text-3xl:28px;--shadow-sm:0 2px 8px rgba(0,0,0,0.08);--shadow-md:0 4px 16px rgba(0,0,0,0.12);--shadow-lg:0 8px 32px rgba(0,0,0,0.15);--shadow-xl:0 20px 40px rgba(0,0,0,0.2);--shadow-glow:0 0 20px rgba(78,205,196,0.3);--duration-fast:0.2s;--duration-normal:0.3s;--duration-slow:0.5s}.App{text-align:left;height:100vh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}@keyframes pulse{0%{transform:scale(1);box-shadow:var(--shadow-md)}50%{transform:scale(1.05);box-shadow:var(--shadow-glow)}to{transform:scale(1);box-shadow:var(--shadow-md)}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--on-surface);background:#f8f9fa}.button-primary{background:var(--gradient-secondary);color:var(--on-primary);border:none;border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:all var(--duration-normal) ease;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.button-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--duration-slow) ease}.button-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.button-primary:hover:before{left:100%}.button-primary:active{transform:translateY(0);box-shadow:var(--shadow-md)}.button-secondary{background:var(--surface-elevated);color:var(--on-surface-variant);border:2px solid var(--outline);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:all var(--duration-normal) ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.button-secondary:hover{background:var(--primary-surface);border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-md)}.surface-elevated{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}.surface-card,.surface-elevated{background:var(--surface-elevated)}.surface-card{border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);transition:all var(--duration-normal) ease}.surface-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.text-title-large{font-size:var(--text-2xl);font-weight:700;color:var(--on-surface);line-height:1.2;background:var(--gradient-secondary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-title-medium{font-size:var(--text-xl);font-weight:600;color:var(--on-surface);line-height:1.3}.text-body-large{font-size:var(--text-lg)}.text-body-large,.text-body-medium{color:var(--on-surface);line-height:1.5}.text-body-medium{font-size:var(--text-base)}.text-label-small{font-size:var(--text-sm);color:var(--on-surface-variant);line-height:1.4}.interactive-element{cursor:pointer;transition:all var(--duration-normal) ease;border-radius:var(--radius-md)}.interactive-element:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.interactive-element:active{transform:scale(.98)}.badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:600;white-space:nowrap}.badge-primary{background:var(--gradient-secondary);color:var(--on-primary)}.badge-success{background:var(--gradient-success);color:var(--on-primary)}.badge-warning{background:var(--gradient-warning);color:var(--on-primary)}.badge-legendary{background:var(--gradient-legendary);color:var(--on-surface);animation:pulse 2s infinite}.loading-shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200px 100%;animation:shimmer 1.5s infinite}.loading-spinner{width:20px;height:20px;border:2px solid rgba(78,205,196,.3);border-top:2px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite}button:focus,input:focus,select:focus{outline:2px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px rgba(78,205,196,.1)}.form-input{background:var(--surface-elevated);border:2px solid var(--outline);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-base);transition:all var(--duration-normal) ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-input:focus{border-color:var(--primary);background:var(--surface);box-shadow:var(--shadow-glow)}.form-input::placeholder{color:var(--on-surface-variant);opacity:.7}.progress-bar{background:var(--outline-variant);overflow:hidden}.progress-bar,.progress-bar-fill{border-radius:var(--radius-lg);position:relative}.progress-bar-fill{background:var(--gradient-secondary);height:100%;transition:width var(--duration-slow) ease}.progress-bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2999;animation:fadeIn var(--duration-normal) ease}.modal-content{background:var(--surface-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);animation:scaleIn var(--duration-normal) ease}.mapboxgl-popup-content{border-radius:var(--radius-xl)!important;box-shadow:var(--shadow-xl)!important;background:var(--surface-elevated)!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,.2)!important}.mapboxgl-popup-close-button{font-size:18px!important;padding:var(--spacing-xs) var(--spacing-sm)!important;background:var(--surface-variant)!important;border-radius:50%!important;transition:all var(--duration-fast) ease!important}.mapboxgl-popup-close-button:hover{background:var(--outline-variant)!important;transform:scale(1.1)!important}.tree-protected{color:#FF6B6B;background:linear-gradient(45deg,#FF6B6B,#ff8e53)}.tree-roadside{color:#4ECDC4;background:var(--gradient-secondary)}.tree-park{color:#45B7D1;background:linear-gradient(45deg,#45B7D1,#96c3ff)}@media (max-width:768px){.landing-sections{display:none}:root{--global-header-height:0px;--spacing-md:12px;--spacing-lg:16px;--text-base:16px;--text-lg:18px}.surface-card{padding:var(--spacing-md)}.button-primary,.button-secondary{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--text-lg)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@supports (padding:max(0px)){.mobile-nav-panel{padding-bottom:max(20px,env(safe-area-inset-bottom))!important}}@supports (height:100dvh){:root{--vh:1dvh}}