:root{--ink:#1a1f1a;--moss:#2d3a2d;--sage:#5a6b5a;--fern:#7a9b7a;--sprout:#a8c4a8;--cream:#f7f5f0;--sand:#e8e4dc;--clay:#c4a484;--stone:#8b8680;--paper:#fffef8;--font-display:"DM Serif Display", serif;--font-body:"Outfit", sans-serif;--shadow-soft:0 4px 20px #1a1f1a14;--shadow-lift:0 8px 32px #1a1f1a1f;--shadow-fine:0 1px 3px #1a1f1a0f;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-bounce:cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{font-family:var(--font-body);background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}button{cursor:pointer;background:0 0;border:none;font-family:inherit}.app{width:100%;height:100%;display:flex;overflow:hidden}.sidebar{background:var(--paper);border-right:1px solid var(--sand);flex-direction:column;flex-shrink:0;width:280px;display:flex}.sidebar-header{border-bottom:1px solid var(--sand);padding:24px}.logo{font-family:var(--font-display);color:var(--ink);letter-spacing:-.5px;font-size:28px}.logo span{color:var(--moss)}.tagline{color:var(--stone);margin-top:4px;font-size:13px;font-weight:400}.tool-panel{flex:1;padding:16px;overflow-y:auto}.tool-section{margin-bottom:24px}.tool-section-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--stone);margin-bottom:12px;padding:0 8px;font-size:11px;font-weight:500}.tool-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.tool-btn{background:var(--cream);border-radius:var(--radius-md);transition:all .3s var(--ease-out);color:var(--moss);flex-direction:column;align-items:center;gap:8px;padding:16px 8px;display:flex}.tool-btn:hover{background:var(--sand);transform:translateY(-2px)}.tool-btn.active{background:var(--moss);color:var(--paper);box-shadow:var(--shadow-lift)}.tool-btn svg{width:24px;height:24px}.tool-btn span{font-size:11px;font-weight:500}.plant-library{flex-direction:column;gap:6px;display:flex}.plant-item{background:var(--cream);border-radius:var(--radius-sm);transition:all .2s var(--ease-out);cursor:grab;align-items:center;gap:12px;padding:10px 12px;display:flex}.plant-item:hover{background:var(--sand);transform:translate(4px)}.plant-icon{border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;display:flex}.plant-info{flex:1}.plant-name{color:var(--ink);font-size:13px;font-weight:500}.plant-zone{color:var(--stone);font-size:11px}.main-area{background:var(--sand);flex-direction:column;flex:1;display:flex}.toolbar{background:var(--paper);border-bottom:1px solid var(--sand);justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.toolbar-group{align-items:center;gap:8px;display:flex}.toolbar-btn{border-radius:var(--radius-sm);width:40px;height:40px;color:var(--moss);transition:all .2s var(--ease-out);justify-content:center;align-items:center;display:flex}.toolbar-btn:hover{background:var(--cream);color:var(--ink)}.toolbar-btn.active{background:var(--moss);color:var(--paper)}.toolbar-divider{background:var(--sand);width:1px;height:24px;margin:0 8px}.canvas-container{flex:1;justify-content:center;align-items:center;padding:24px;display:flex;position:relative;overflow:hidden}.canvas-container:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 30%,#7a9b7a14 0%,#0000 50%),radial-gradient(circle at 80% 70%,#a8c4a80f 0%,#0000 50%);position:absolute;inset:0}.canvas{background:var(--paper);border-radius:var(--radius-lg);width:100%;max-width:800px;height:100%;max-height:600px;box-shadow:var(--shadow-lift);position:relative;overflow:hidden}.canvas-grid{pointer-events:none;background-image:linear-gradient(#8a88800f 1px,#0000 1px),linear-gradient(90deg,#8a88800f 1px,#0000 1px);background-size:20px 20px;position:absolute;inset:0}.canvas-elements{pointer-events:none;position:absolute;inset:0}.canvas-element{cursor:move;pointer-events:auto;transition:transform .1s var(--ease-out);-webkit-user-select:none;user-select:none;position:absolute}.canvas-element:hover{transform:scale(1.05)}.canvas-element.selected{outline:2px solid var(--moss);outline-offset:4px;border-radius:4px}.element-icon{filter:drop-shadow(0 2px 4px #0000001a);font-size:32px}.properties-panel{background:var(--paper);border-left:1px solid var(--sand);flex-shrink:0;width:240px;padding:20px}.properties-header{font-family:var(--font-display);color:var(--ink);margin-bottom:20px;font-size:18px}.property-row{margin-bottom:16px}.property-label{text-transform:uppercase;letter-spacing:1px;color:var(--stone);margin-bottom:6px;font-size:11px;font-weight:500}.property-input{background:var(--cream);border:1px solid var(--sand);border-radius:var(--radius-sm);width:100%;font-family:var(--font-body);color:var(--ink);transition:all .2s var(--ease-out);padding:10px 12px;font-size:14px}.property-input:focus{border-color:var(--moss);outline:none;box-shadow:0 0 0 3px #2d3a2d1a}.property-select{background:var(--cream);border:1px solid var(--sand);border-radius:var(--radius-sm);width:100%;font-family:var(--font-body);color:var(--ink);cursor:pointer;padding:10px 12px;font-size:14px}.action-btn{background:var(--moss);width:100%;color:var(--paper);border-radius:var(--radius-md);transition:all .3s var(--ease-out);padding:14px;font-size:14px;font-weight:500}.action-btn:hover{background:var(--ink);box-shadow:var(--shadow-lift);transform:translateY(-2px)}.action-btn.secondary{background:var(--cream);color:var(--moss);border:1px solid var(--sand)}.action-btn.secondary:hover{background:var(--sand)}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px;display:flex;position:absolute;inset:0}.empty-icon{opacity:.5;margin-bottom:16px;font-size:64px}.empty-title{font-family:var(--font-display);color:var(--ink);margin-bottom:8px;font-size:24px}.empty-text{color:var(--stone);max-width:240px;font-size:14px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.sidebar{animation:slideIn .5s var(--ease-out) forwards}.main-area{animation:fadeIn .6s var(--ease-out) forwards;opacity:0;animation-delay:.1s}.properties-panel{animation:slideIn .5s var(--ease-out) forwards;opacity:0;animation-delay:.2s}.tool-btn{animation:scaleIn .4s var(--ease-bounce) forwards;animation-delay:calc(var(--index,0) * 50ms);opacity:0}.plant-item{animation:slideIn .4s var(--ease-out) forwards;animation-delay:calc(var(--index,0) * 30ms);opacity:0}