:root{--bg-dark:#121212;--bg-panel:#1e1e1eb3;--border-color:#ffffff1a;--accent:#646cff;--accent-hover:#747bff;--text-main:#fff;--text-muted:#a0a0a0;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body,html,#root{width:100%;height:100%;font-family:var(--font-family);background-color:var(--bg-dark);color:var(--text-main);overflow:hidden}.app-container{width:100%;height:100%;position:relative}.canvas-container{width:100%;height:100%}.ui-layer{pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:24px;display:flex;position:absolute;top:0;left:0}.ui-panel{pointer-events:auto;background:var(--bg-panel);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:16px;padding:16px;box-shadow:0 8px 32px #0000004d}.toolbar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.btn{border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;background:#ffffff0d;border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-family:inherit;font-weight:500;transition:all .2s;display:flex}.btn:hover{background:#ffffff1a;transform:translateY(-1px)}.btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 16px #646cff66}.btn-icon{padding:10px}.properties-panel{flex-direction:column;gap:16px;width:320px;display:flex;position:absolute;top:90px;right:24px}.elements-list-panel{flex-direction:column;gap:8px;width:260px;max-height:calc(50vh - 110px);display:flex;position:absolute;top:90px;left:24px;overflow-y:auto}.guided-panel{flex-direction:column;gap:12px;width:360px;max-height:calc(50vh - 48px);display:flex;position:absolute;bottom:24px;left:24px;overflow-y:auto}.guided-panel h3{border-bottom:1px solid var(--border-color);margin-bottom:2px;padding-bottom:8px;font-size:1.1rem;font-weight:600}.help-text,.detail-box,.form-message{color:var(--text-muted);font-size:.85rem;line-height:1.35}.detail-box,.form-message{border:1px solid var(--border-color);background:#ffffff0d;border-radius:8px;padding:10px}.form-message{color:var(--text-main);background:#646cff29;border-color:#646cff73}.form-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.form-section-title{color:var(--text-main);padding-top:4px;font-size:.9rem;font-weight:600}.form-group input[type=number],.form-group select{border:1px solid var(--border-color);width:100%;color:var(--text-main);background:#ffffff14;border-radius:8px;padding:9px 10px;font-family:inherit}.form-group input:disabled,.form-group select:disabled{cursor:not-allowed;opacity:.55}.segmented-control{grid-template-columns:1fr 1fr;gap:8px;display:grid}.segmented-button{border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;background:#ffffff0d;border-radius:8px;padding:10px;font-family:inherit;font-weight:600;transition:all .2s}.segmented-button:hover{background:#ffffff1a}.segmented-button.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 14px #646cff59}.form-group select option{color:var(--text-main);background:#1e1e1e}.primary-action{justify-content:center;width:100%}.primary-action:disabled{cursor:not-allowed;opacity:.45}.elements-list-panel h3{border-bottom:1px solid var(--border-color);margin-bottom:8px;padding-bottom:8px;font-size:1.1rem;font-weight:600}.element-item{cursor:pointer;background:#ffffff0d;border:1px solid #0000;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;transition:all .2s;display:flex}.element-item:hover{background:#ffffff1a}.element-item.selected{border-color:var(--accent);background:#646cff33}.element-item-type{text-transform:capitalize;font-size:.9rem;font-weight:500}.properties-panel h3{border-bottom:1px solid var(--border-color);margin-bottom:8px;padding-bottom:8px;font-size:1.2rem;font-weight:600}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--text-muted);font-size:.9rem}.form-group input[type=range]{width:100%;accent-color:var(--accent)}.percentage-display{color:var(--accent);font-size:1.1rem;font-weight:600}@media (width<=900px){.ui-layer{padding:12px}.properties-panel,.elements-list-panel,.guided-panel{width:calc(100vw - 24px);left:12px;right:12px}.properties-panel{max-height:38vh;top:auto;bottom:12px;overflow-y:auto}.elements-list-panel{max-height:22vh;top:118px}.guided-panel{max-height:36vh;bottom:12px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.3s ease-out forwards fadeIn}