*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Segoe UI,Arial,sans-serif;background:#eceff1}.app{display:flex;flex-direction:column;height:100vh}.header{background:#1565c0;color:#fff;padding:0 20px;height:48px;display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:0 2px 6px #00000040}.header h1{font-size:15px;font-weight:600;flex:1}.export-btn{background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);padding:5px 14px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;transition:background .1s}.export-btn:hover{background:#ffffff47}.workspace{display:flex;flex:1;overflow:hidden}.sidebar{width:300px;background:#fff;display:flex;flex-direction:column;border-right:1px solid #cfd8dc;flex-shrink:0;overflow:hidden}.sidebar-label{padding:6px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#1565c0;background:#e8f0fe;border-bottom:1px solid #c5cae9;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.mode-toggle{display:flex;gap:4px}.mode-toggle button{padding:3px 10px;border:1px solid #c5cae9;background:#fff;color:#546e7a;border-radius:12px;font-size:10px;font-weight:600;cursor:pointer;transition:all .12s}.mode-toggle button.active{background:#1565c0;color:#fff;border-color:#1565c0}.card-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px}.comp-card{display:flex;align-items:center;gap:4px;padding:5px 6px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;transition:border-color .12s,box-shadow .12s}.comp-card:hover{border-color:#90caf9}.comp-card.drag-over{border-color:#1565c0;box-shadow:0 0 0 2px #1565c033;background:#e8f0fe}.drag-handle{cursor:grab;color:#b0bec5;font-size:15px;padding:0 2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.drag-handle:active{cursor:grabbing}.comp-card select{border:1px solid #e0e0e0;border-radius:4px;padding:3px 4px;font-size:11px;color:#263238;background:#fff;max-width:100px;flex-shrink:0}.comp-card select:focus{outline:none;border-color:#1565c0}.specs-input{width:58px;flex-shrink:0;border:1px solid #e0e0e0;border-radius:4px;padding:3px 5px;font-size:11px;color:#1565c0;font-weight:600}.label-input{flex:1;min-width:0;border:1px solid #e0e0e0;border-radius:4px;padding:3px 5px;font-size:11px;color:#263238}.specs-input:focus,.label-input:focus{outline:none;border-color:#1565c0}.del-btn{border:none;background:none;color:#ef9a9a;font-size:17px;cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0}.del-btn:hover{color:#e53935}.add-btn{margin-top:4px;padding:8px 0;border:1px dashed #b0bec5;background:none;color:#78909c;font-size:12px;border-radius:6px;cursor:pointer;transition:all .12s}.add-btn:hover{border-color:#1565c0;color:#1565c0;background:#e8f0fe}.text-mode{flex:1;display:flex;flex-direction:column;overflow:hidden}.text-mode textarea{flex:1;border:none;outline:none;padding:12px 14px;font-family:Consolas,Courier New,monospace;font-size:12.5px;line-height:1.9;color:#263238;resize:none;background:#fff}.text-actions{padding:8px;border-top:1px solid #eceff1;flex-shrink:0}.btn-gen{width:100%;padding:7px 0;background:#1565c0;color:#fff;border:none;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s}.btn-gen:hover{background:#0d47a1}.hint{padding:10px 14px;font-size:10.5px;color:#546e7a;background:#f5f5f5;border-top:1px solid #eceff1;line-height:2.1;flex-shrink:0}.hint strong{color:#1565c0}.hint em{color:#90a4ae}.canvas{flex:1;overflow:auto;padding:28px;background:#eceff1}