:root{--bg-primary: #0f1419;--bg-secondary: #1a1f2e;--bg-tertiary: #242b3d;--bg-hover: #2d3548;--border-primary: #3d4556;--border-secondary: #2a3142;--text-primary: #e8eaed;--text-secondary: #9aa0a6;--text-muted: #6e7681;--accent-primary: #4a9eff;--accent-secondary: #7b61ff;--accent-success: #3fb950;--accent-warning: #d29922;--accent-danger: #f85149;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .5);--card-width: 180px;--card-height: 251px;--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}body{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;background:var(--bg-primary);color:var(--text-primary);overflow:hidden}#root{width:100vw;height:100vh}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}button{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);font-size:14px;cursor:pointer;transition:all var(--transition-fast);font-family:inherit}button:hover{background:var(--bg-hover);border-color:var(--accent-primary)}button:active{transform:scale(.98)}button.primary{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}button.primary:hover{background:#3a8eef}input,textarea{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);font-size:14px;font-family:inherit;transition:border-color var(--transition-fast)}input:focus,textarea:focus{outline:none;border-color:var(--accent-primary)}input::placeholder,textarea::placeholder{color:var(--text-muted)}.mtg-card{width:var(--card-width);height:var(--card-height);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast);cursor:grab}.mtg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.mtg-card:active{cursor:grabbing}.mtg-card img{width:100%;height:100%;object-fit:cover;display:block}.deck-importer{padding:var(--spacing-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}.importer-tabs{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.importer-tabs button{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;color:var(--text-secondary);border-bottom:2px solid transparent;border-radius:0;transition:all var(--transition-fast)}.importer-tabs button:hover{color:var(--text-primary);background:transparent}.importer-tabs button.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.import-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.import-section input,.import-section textarea{width:100%}.import-section textarea{resize:vertical;font-family:Courier New,monospace;font-size:13px}.error-message{margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:#f851491a;border:1px solid var(--accent-danger);border-radius:var(--radius-md);color:var(--accent-danger);font-size:13px}.card-sidebar{width:320px;height:100%;background:var(--bg-secondary);border-right:1px solid var(--border-primary);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:var(--spacing-md);border-bottom:1px solid var(--border-primary);display:flex;justify-content:space-between;align-items:center}.sidebar-header h2{font-size:18px;font-weight:600;margin:0;color:var(--text-primary)}.card-count{font-size:13px;color:var(--text-secondary)}.sidebar-filters{padding:var(--spacing-md);border-bottom:1px solid var(--border-primary);display:flex;flex-direction:column;gap:var(--spacing-md)}.search-box{position:relative;display:flex;align-items:center;gap:var(--spacing-sm);background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:var(--spacing-sm);transition:border-color var(--transition-fast)}.search-box:focus-within{border-color:var(--accent-primary)}.search-box svg{color:var(--text-muted);flex-shrink:0}.search-box input{flex:1;background:transparent;border:none;padding:0;color:var(--text-primary);font-size:14px}.search-box input:focus{outline:none}.clear-search{background:transparent;border:none;padding:0;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}.clear-search:hover{color:var(--text-primary);background:transparent}.type-filter{display:flex;flex-direction:column;gap:var(--spacing-sm)}.type-filter-header{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-secondary)}.clear-filters{background:transparent;border:none;padding:4px 8px;color:var(--accent-primary);font-size:12px;cursor:pointer;border-radius:var(--radius-sm)}.clear-filters:hover{background:#4a9eff1a}.type-chips{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.type-chip{padding:4px 12px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:16px;font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.type-chip:hover{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--text-primary)}.type-chip.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.card-list{flex:1;overflow-y:auto;padding:var(--spacing-sm);display:flex;flex-direction:column;gap:var(--spacing-sm)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px;text-align:center;padding:var(--spacing-lg)}.sidebar-empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--text-muted);font-size:14px;padding:var(--spacing-lg)}.sidebar-card{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);cursor:grab;transition:all var(--transition-fast)}.sidebar-card:hover{background:var(--bg-hover);border-color:var(--border-primary);transform:translate(4px)}.sidebar-card:active{cursor:grabbing}.sidebar-card.dragging{opacity:.5}.sidebar-card img{width:48px;height:67px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.card-placeholder{width:48px;height:67px;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.card-placeholder span{font-size:10px;color:var(--text-muted);text-align:center;padding:4px;word-break:break-word}.card-info{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}.card-name{font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-set{font-size:12px;color:var(--text-secondary);margin-top:2px}.canvas-card{position:absolute;cursor:grab;transition:box-shadow var(--transition-fast)}.canvas-card:hover{z-index:10}.canvas-card.dragging{cursor:grabbing;z-index:100}.canvas-card .delete-btn{position:absolute;top:-8px;right:-8px;width:24px;height:24px;padding:0;background:var(--accent-danger);border:2px solid var(--bg-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-fast);z-index:1}.canvas-card:hover .delete-btn{opacity:1}.canvas-card .delete-btn:hover{background:#c93b34;transform:scale(1.1)}.card-placeholder-canvas{width:100%;height:100%;background:var(--bg-tertiary);border:2px solid var(--border-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);text-align:center;font-size:14px;color:var(--text-secondary);word-break:break-word}.mana-cost-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.mana-cost-modal{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);width:90%;max-width:500px;box-shadow:var(--shadow-lg)}.mana-cost-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.mana-cost-header h3{margin:0;font-size:18px;color:var(--text-primary)}.close-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.mana-cost-display{min-height:60px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mana-placeholder{color:var(--text-muted);font-size:14px}.mana-symbol{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border:2px solid;box-shadow:0 2px 4px #0000004d}.mana-symbol.mana-white{background:#f9fafb;color:#1f2937;border-color:#d1d5db}.mana-symbol.mana-blue{background:#0ea5e9;color:#fff;border-color:#0284c7}.mana-symbol.mana-black{background:#1f2937;color:#fff;border-color:#111827}.mana-symbol.mana-red{background:#ef4444;color:#fff;border-color:#dc2626}.mana-symbol.mana-green{background:#22c55e;color:#fff;border-color:#16a34a}.mana-symbol.mana-colorless{background:#9ca3af;color:#fff;border-color:#6b7280}.mana-symbols-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.mana-btn{width:48px;height:48px;border-radius:50%;border:2px solid;font-weight:700;font-size:16px;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 4px #0003}.mana-btn:hover{transform:scale(1.1);box-shadow:0 4px 8px #0000004d}.mana-btn:active{transform:scale(.95)}.mana-btn.mana-white{background:#f9fafb;color:#1f2937;border-color:#d1d5db}.mana-btn.mana-blue{background:#0ea5e9;color:#fff;border-color:#0284c7}.mana-btn.mana-black{background:#1f2937;color:#fff;border-color:#111827}.mana-btn.mana-red{background:#ef4444;color:#fff;border-color:#dc2626}.mana-btn.mana-green{background:#22c55e;color:#fff;border-color:#16a34a}.mana-btn.mana-colorless{background:#9ca3af;color:#fff;border-color:#6b7280}.mana-cost-actions{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.mana-action-btn{flex:1;padding:8px 16px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all var(--transition-fast)}.mana-action-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--text-primary)}.commander-checkbox-container{padding:var(--spacing-md) 0;border-top:1px solid var(--border-primary);border-bottom:1px solid var(--border-primary);margin-bottom:var(--spacing-md)}.commander-checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.commander-checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent-primary)}.commander-checkbox-label span{color:var(--text-primary);font-size:14px;font-weight:500}.mana-cost-footer{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.cancel-btn,.save-btn{padding:8px 24px;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.cancel-btn{background:transparent;border:1px solid var(--border-primary);color:var(--text-secondary)}.cancel-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.save-btn{background:var(--accent-primary);border:1px solid var(--accent-primary);color:#fff}.save-btn:hover{background:#5aa9ff}.combo-group{position:absolute;min-width:400px;min-height:300px;background:#4a9eff0d;border:2px dashed var(--accent-primary);border-radius:var(--radius-lg);padding:var(--spacing-md);cursor:grab;transition:all var(--transition-fast)}.combo-group:hover{background:#4a9eff14;border-color:#5aa9ff;z-index:5}.combo-group.dragging{cursor:grabbing;z-index:50;opacity:.8}.group-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border-primary);background:var(--bg-secondary);border-radius:var(--radius-md) var(--radius-md) 0 0}.group-label-container{display:flex;align-items:center;gap:8px;flex:1}.group-label{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}.mana-cost-tooltip-container{position:relative;display:flex;align-items:center}.mana-help-icon{color:var(--text-muted);cursor:help;transition:color var(--transition-fast)}.mana-help-icon:hover{color:var(--accent-primary)}.mana-cost-tooltip{position:absolute;left:50%;top:calc(100% + 8px);transform:translate(-50%);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:8px 12px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity var(--transition-fast);z-index:100;white-space:nowrap}.mana-cost-tooltip-container:hover .mana-cost-tooltip{opacity:1}.mana-cost-tooltip-label{font-size:11px;color:var(--text-secondary);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.mana-symbols-display{display:flex;gap:4px;align-items:center}.mana-symbol-small{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;border:2px solid;box-shadow:0 2px 4px #0000004d}.mana-symbol-small.mana-white{background:#f9fafb;color:#1f2937;border-color:#d1d5db}.mana-symbol-small.mana-blue{background:#0ea5e9;color:#fff;border-color:#0284c7}.mana-symbol-small.mana-black{background:#1f2937;color:#fff;border-color:#111827}.mana-symbol-small.mana-red{background:#ef4444;color:#fff;border-color:#dc2626}.mana-symbol-small.mana-green{background:#22c55e;color:#fff;border-color:#16a34a}.mana-symbol-small.mana-colorless{background:#9ca3af;color:#fff;border-color:#6b7280}.group-label-edit{display:flex;gap:var(--spacing-sm);flex:1}.group-label-edit input{flex:1;font-size:16px;font-weight:600;padding:4px 8px}.group-actions{display:flex;gap:var(--spacing-xs);opacity:0;transition:opacity var(--transition-fast)}.combo-group:hover .group-actions{opacity:1}.edit-btn,.save-btn{width:28px;height:28px;padding:0;background:var(--bg-tertiary);border:1px solid var(--border-primary);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.edit-btn:hover{color:var(--accent-primary);border-color:var(--accent-primary)}.properties-btn{width:28px;height:28px;padding:0;background:var(--bg-tertiary);border:1px solid var(--border-primary);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.properties-btn:hover{color:var(--accent-primary);border-color:var(--accent-primary)}.save-btn{background:var(--accent-success);border-color:var(--accent-success);color:#fff}.save-btn:hover{background:#35a346}.combo-group .delete-btn{width:28px;height:28px;padding:0;background:var(--bg-tertiary);border:1px solid var(--border-primary);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.combo-group .delete-btn:hover{background:var(--accent-danger);border-color:var(--accent-danger);color:#fff}.group-stats{font-size:13px;color:var(--text-secondary);margin-bottom:var(--spacing-md)}.group-drop-zone{flex:1;border:1px dashed rgba(74,158,255,.3);border-radius:var(--radius-md);display:flex;align-items:flex-start;justify-content:flex-start;overflow:auto;padding:var(--spacing-md)}.group-drop-zone.drop-over{background:#4a9eff1a;border-color:var(--accent-primary)}.drop-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px;pointer-events:none}.group-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-md);width:100%}.group-card{width:180px;height:251px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--transition-fast);position:relative;cursor:grab}.group-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.group-card.dragging{opacity:.5;cursor:grabbing}.group-card:active{cursor:grabbing}.group-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.group-card-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;background:#dc2626e6;border:1px solid rgba(220,38,38,1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity var(--transition-fast);cursor:pointer;z-index:10}.group-card:hover .group-card-remove{opacity:1}.group-card-remove:hover{background:#dc2626;transform:scale(1.1)}.resize-handle{position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--accent-primary) 50%);border-bottom-right-radius:var(--radius-lg)}.resize-handle:hover{background:linear-gradient(135deg,transparent 50%,#5aa9ff 50%)}.combo-group.resizing{cursor:nwse-resize}.combo-canvas-container{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-primary)}.canvas-toolbar{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}.zoom-controls{display:flex;align-items:center;gap:var(--spacing-xs);padding:4px 8px;background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-primary)}.zoom-controls button{min-width:32px;height:28px;padding:0 8px;font-size:16px;font-weight:600}.zoom-level{min-width:50px;text-align:center;font-size:13px;color:var(--text-secondary);font-weight:500}.canvas-hint{font-size:12px;color:var(--text-muted)}.combo-canvas{flex:1;position:relative;overflow:hidden;background-image:linear-gradient(var(--border-secondary) 1px,transparent 1px),linear-gradient(90deg,var(--border-secondary) 1px,transparent 1px);background-size:50px 50px;background-position:0 0}.combo-canvas.panning{cursor:grabbing}.canvas-content{position:relative;width:100%;height:100%;transition:transform .05s linear}.drag-overlay{opacity:.8;transform:rotate(5deg)}.save-canvas-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.save-canvas-modal{position:relative;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:500px;width:90%;animation:slideUp .3s ease-out}.save-canvas-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--border-primary)}.save-canvas-header h2{margin:0;font-size:20px;color:var(--text-primary)}.save-canvas-modal form{padding:var(--spacing-lg)}.save-canvas-modal .form-group{margin-bottom:var(--spacing-md)}.save-canvas-modal .form-group label{display:block;margin-bottom:var(--spacing-xs);font-size:14px;font-weight:500;color:var(--text-primary)}.save-canvas-modal .form-group input,.save-canvas-modal .form-group textarea{width:100%;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;font-family:inherit;transition:all var(--transition-fast)}.save-canvas-modal .form-group input:focus,.save-canvas-modal .form-group textarea:focus{outline:none;border-color:var(--accent-primary);background:var(--bg-secondary)}.save-canvas-modal .form-group textarea{resize:vertical;min-height:60px}.save-canvas-footer{display:flex;gap:var(--spacing-sm);justify-content:flex-end;padding-top:var(--spacing-md);border-top:1px solid var(--border-primary)}.save-canvas-footer button{padding:10px 20px;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.save-canvas-footer .cancel-btn{background:transparent;border:1px solid var(--border-primary);color:var(--text-secondary)}.save-canvas-footer .cancel-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.save-canvas-footer .save-btn{background:var(--accent-primary);border:none;color:#fff}.save-canvas-footer .save-btn:hover:not(:disabled){background:#5aa9ff;transform:translateY(-1px)}.save-canvas-footer .save-btn:disabled{opacity:.5;cursor:not-allowed}.canvas-list-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.canvas-list-modal{position:relative;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:900px;width:95%;max-height:85vh;display:flex;flex-direction:column;animation:slideUp .3s ease-out}.canvas-list-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--border-primary);flex-shrink:0}.canvas-list-header h2{margin:0;font-size:20px;color:var(--text-primary)}.canvas-list-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-lg);min-width:0}.canvas-list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);color:var(--text-secondary)}.canvas-list-loading .spinner{animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.canvas-list-error{text-align:center;padding:var(--spacing-xl);color:#ef4444}.canvas-list-error button{margin-top:var(--spacing-md);padding:8px 16px;background:var(--accent-primary);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer}.canvas-list-empty{text-align:center;padding:var(--spacing-xl);color:var(--text-secondary)}.canvas-list-empty p{margin:0;font-size:16px}.canvas-list-empty-hint{margin-top:var(--spacing-sm);font-size:14px;opacity:.7}.canvas-list-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--spacing-md);width:100%;min-width:0}.canvas-card{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:var(--spacing-md);transition:all var(--transition-fast)}.canvas-card:hover{border-color:var(--accent-primary);box-shadow:0 4px 12px #0003}.canvas-card-header h3{margin:0 0 var(--spacing-xs) 0;font-size:16px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-card-description{margin:0;font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}.canvas-card-meta{margin:var(--spacing-sm) 0;padding:var(--spacing-sm) 0;border-top:1px solid var(--border-primary);border-bottom:1px solid var(--border-primary)}.canvas-card-date{font-size:12px;color:var(--text-muted)}.canvas-card-actions{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.canvas-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;cursor:pointer;transition:all var(--transition-fast)}.canvas-action-btn:hover{background:var(--bg-hover)}.canvas-action-btn.load-btn{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.canvas-action-btn.load-btn:hover{background:#5aa9ff}.canvas-action-btn.delete-btn:hover{background:#ef4444;border-color:#ef4444;color:#fff}.canvas-action-btn.duplicate-btn{flex:0 0 auto;padding:8px}@media(max-width:480px){.canvas-list-modal{width:100%;max-width:100%;max-height:100vh;border-radius:0}.canvas-list-grid{grid-template-columns:1fr}.canvas-card-actions{flex-direction:column}.canvas-action-btn{width:100%}.canvas-action-btn.duplicate-btn{flex:1;width:100%}}@media(min-width:481px)and (max-width:768px){.canvas-list-modal{max-width:95%}.canvas-list-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media(min-width:769px)and (max-width:1200px){.canvas-list-modal{max-width:900px}.canvas-list-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}@media(min-width:1201px)and (max-width:1600px){.canvas-list-modal{max-width:1100px}.canvas-list-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media(min-width:1601px){.canvas-list-modal{max-width:1400px}.canvas-list-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-lg)}.canvas-card{padding:var(--spacing-lg)}}.canvas-toolbar{position:relative;display:flex;align-items:center}.canvas-name-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;cursor:pointer;transition:all var(--transition-fast);min-width:200px;justify-content:space-between}.canvas-name-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary)}.canvas-name-text{display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unsaved-indicator{color:var(--accent-primary);font-weight:700}.canvas-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-xs);z-index:100;animation:slideDown .2s ease-out}.canvas-dropdown button{width:100%;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:all var(--transition-fast);text-align:left}.canvas-dropdown button:hover:not(:disabled){background:var(--bg-hover)}.canvas-dropdown button:disabled{opacity:.5;cursor:not-allowed}.auth-form{width:100%;max-width:400px;padding:var(--spacing-xl)}.auth-form h2{margin:0 0 var(--spacing-sm) 0;font-size:24px;color:var(--text-primary);text-align:center}.auth-subtitle{margin:0 0 var(--spacing-lg) 0;font-size:14px;color:var(--text-secondary);text-align:center}.auth-error{padding:var(--spacing-sm) var(--spacing-md);background:#dc26261a;border:1px solid rgba(220,38,38,.3);border-radius:var(--radius-md);color:#ef4444;font-size:14px;margin-bottom:var(--spacing-md)}.form-group{margin-bottom:var(--spacing-md)}.form-group label{display:block;margin-bottom:var(--spacing-xs);font-size:14px;font-weight:500;color:var(--text-primary)}.form-group input{width:100%;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;transition:all var(--transition-fast)}.form-group input:focus{outline:none;border-color:var(--accent-primary);background:var(--bg-secondary)}.form-group input:disabled{opacity:.5;cursor:not-allowed}.auth-submit-btn{width:100%;padding:12px;background:var(--accent-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);margin-top:var(--spacing-md)}.auth-submit-btn:hover:not(:disabled){background:#5aa9ff;transform:translateY(-1px)}.auth-submit-btn:active:not(:disabled){transform:translateY(0)}.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed}.auth-toggle{margin-top:var(--spacing-md);text-align:center;font-size:14px;color:var(--text-secondary)}.auth-toggle-btn{background:none;border:none;color:var(--accent-primary);font-weight:600;cursor:pointer;padding:0;text-decoration:underline}.auth-toggle-btn:hover{color:#5aa9ff}.auth-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-modal{position:relative;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:500px;width:90%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.auth-modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast);z-index:1}.auth-modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.user-profile{position:relative}.user-profile-button{display:flex;align-items:center;gap:var(--spacing-sm);padding:8px 16px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;cursor:pointer;transition:all var(--transition-fast)}.user-profile-button:hover{background:var(--bg-hover);border-color:var(--accent-primary)}.user-profile-button span{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-sm);z-index:100;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-profile-email{padding:var(--spacing-sm);font-size:12px;color:var(--text-secondary);border-bottom:1px solid var(--border-primary);margin-bottom:var(--spacing-xs);word-break:break-all}.user-profile-version{padding:0 var(--spacing-sm) var(--spacing-sm);font-size:10px;color:var(--text-muted);opacity:.6;text-align:right;font-family:Courier New,monospace;border-bottom:1px solid var(--border-primary);margin-bottom:var(--spacing-xs)}.user-profile-signout{width:100%;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:all var(--transition-fast)}.user-profile-signout:hover{background:var(--bg-hover);color:#ef4444}.app-layout{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-md);gap:var(--spacing-md)}.header-auth{margin-left:auto}.login-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:8px 16px;background:var(--accent-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.login-btn:hover{background:#5aa9ff;transform:translateY(-1px)}.login-btn:active{transform:translateY(0)}.app-header h1{font-size:20px;font-weight:700;padding:var(--spacing-md);margin:0;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-main{flex:1;display:flex;overflow:hidden}