.card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:20px;margin-bottom:20px;overflow:visible;position:relative}.card-title{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--text-primary);border-bottom:1px solid var(--border-color);padding-bottom:12px}.card-content{display:flex;flex-direction:column;gap:16px;overflow:visible}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;width:100%;max-width:900px;height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #0009}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border-color)}.modal-header h2{margin:0;font-size:20px;color:var(--text-primary)}.modal-close{width:32px;height:32px;border-radius:6px;background:transparent;color:var(--text-secondary);font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.modal-body{flex:1;overflow-y:auto;padding:24px;min-height:400px}.modal-search{display:flex;gap:12px;align-items:center;margin-bottom:20px}.modal-search-input{flex:1;padding:12px 16px;border-radius:8px;font-size:15px}.selected-count{padding:8px 16px;background:var(--accent-primary);color:#fff;border-radius:6px;font-size:14px;font-weight:500;white-space:nowrap}.modal-prompt,.modal-no-results{text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:15px}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.icon-grid-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:var(--bg-tertiary);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease}.icon-grid-item:hover{background:var(--bg-hover);border-color:var(--border-color);transform:translateY(-2px)}.icon-grid-item.selected{background:var(--bg-hover);border-color:var(--accent-primary)}.icon-grid-item-name{font-size:11px;color:var(--text-secondary);text-align:center;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-footer{display:flex;gap:12px;justify-content:flex-end;padding:20px 24px;border-top:1px solid var(--border-color)}.modal-footer .btn-primary,.modal-footer .btn-secondary{margin:0;width:auto;padding:10px 24px}@media (max-width: 768px){.icon-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}.icon-grid-item{padding:12px 8px}}.icon-search{position:relative;width:100%}.icon-search-input-wrapper{display:flex;gap:8px}.icon-search-input{flex:1;padding:10px 14px;border-radius:6px;font-size:14px}.btn-icon-browse{padding:10px 20px;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;font-size:14px;font-weight:500;white-space:nowrap}.btn-icon-browse:hover{background:var(--bg-hover);border-color:var(--accent-primary)}.selected-icon-preview{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-tertiary);border-radius:6px;border:1px solid var(--border-color);margin-top:8px}.selected-icon-preview span{font-size:13px;color:var(--text-secondary)}.icon-search-results{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;max-height:400px;overflow-y:auto;z-index:1000;box-shadow:0 4px 12px #0006}.icon-search-result-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .15s ease}.icon-search-result-item:hover{background:var(--bg-hover)}.icon-info{display:flex;flex-direction:column;gap:2px}.icon-name{font-size:13px;color:var(--text-primary)}.icon-library{font-size:11px;color:var(--text-secondary)}.no-results{padding:20px;text-align:center;color:var(--text-secondary);font-size:14px}.color-picker{display:flex;flex-direction:column;gap:8px}.color-picker-label{font-size:14px;font-weight:500;color:var(--text-primary)}.color-picker-input-wrapper{display:flex;gap:8px;align-items:center}.color-input{width:50px;height:38px;border-radius:6px;cursor:pointer;padding:2px}.color-text-input{flex:1;padding:8px 12px;border-radius:6px;font-size:14px;font-family:Courier New,monospace}.palette-colors{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0}.palette-color{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all .2s ease}.palette-color:hover{transform:scale(1.1);border-color:var(--text-secondary)}.palette-color.active{border-color:var(--accent-primary);transform:scale(1.1)}.palette-selector{display:flex;flex-direction:column;gap:12px}.palette-selector-label{font-size:14px;font-weight:500;color:var(--text-primary)}.palette-selector-controls{display:flex;gap:8px}.palette-select{flex:1;padding:10px 14px;border-radius:6px;font-size:14px}.btn-upload-palette{padding:10px 20px;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;display:flex;align-items:center}.btn-upload-palette:hover{background:var(--bg-hover);border-color:var(--accent-primary)}.palette-preview{display:flex;flex-wrap:wrap;gap:6px;padding:12px;background:var(--bg-tertiary);border-radius:6px}.palette-info-text{font-size:13px;color:var(--text-secondary)}.generator-container{padding:24px;max-width:900px}.generator-header{margin-bottom:24px}.generator-header h2{margin:0 0 8px;font-size:24px;color:var(--text-primary)}.generator-header p{margin:0;color:var(--text-secondary);font-size:14px}.generator-form{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:24px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--text-primary)}.form-group input,.form-group select{width:100%;padding:10px 14px;border-radius:6px;font-size:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.spritesheet-config{margin-top:20px;padding:20px;background:var(--bg-tertiary);border-radius:6px}.spritesheet-config h3{margin:0 0 16px;font-size:16px;color:var(--text-primary)}.btn-primary{width:100%;padding:12px 24px;background:var(--accent-primary);color:#fff;border-radius:6px;font-size:15px;font-weight:500;margin-top:20px}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{padding:10px 20px;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;font-size:14px;font-weight:500}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--text-secondary)}.preview-section{margin-top:24px;padding:20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px}.preview-section h3{margin:0 0 16px;font-size:18px;color:var(--text-primary)}.icon-preview{display:flex;justify-content:center;align-items:center;padding:40px;border-radius:6px}.selected-icons-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:12px;background:var(--bg-tertiary);border-radius:6px;max-height:200px;overflow-y:auto}.selected-icon-item{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:13px}.btn-remove{width:20px;height:20px;padding:0;background:var(--error);color:#fff;border-radius:4px;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}.btn-remove:hover{background:#ff6b6b}.file-input{padding:8px 12px;border-radius:6px;font-size:14px;cursor:pointer}.palette-info{margin-top:8px;padding:8px 12px;background:var(--bg-tertiary);border-radius:6px;font-size:13px;color:var(--text-secondary)}.palette-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:12px;background:var(--bg-tertiary);border-radius:6px}.palette-preview-color{width:32px;height:32px;border-radius:6px;border:1px solid var(--border-color)}.icon-batch-picker{display:flex;flex-direction:column;gap:12px}.icon-batch-picker-controls{display:flex;gap:8px;position:relative}.icon-batch-input{flex:1;padding:10px 14px;border-radius:6px;font-size:14px}.btn-clear-all{padding:10px 20px;background:var(--bg-tertiary);color:var(--error);border:1px solid var(--border-color);border-radius:6px;font-size:14px;font-weight:500;white-space:nowrap}.btn-clear-all:hover{background:var(--error);color:#fff;border-color:var(--error)}.icon-batch-results{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 12px #0006}.icon-batch-result-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .15s ease}.icon-batch-result-item:not(.disabled):hover{background:var(--bg-hover)}.icon-batch-result-item.disabled{opacity:.5;cursor:not-allowed}.already-added{margin-left:auto;font-size:12px;color:var(--success);font-weight:500}.selected-icons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:16px;background:var(--bg-tertiary);border-radius:6px;max-height:400px;overflow-y:auto}.selected-icon-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;transition:all .2s ease}.selected-icon-card:hover{border-color:var(--text-secondary)}.selected-icon-name{font-size:11px;color:var(--text-secondary);text-align:center;word-break:break-word;max-width:100%}.btn-remove-icon{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;background:var(--error);color:#fff;border-radius:4px;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.selected-icon-card:hover .btn-remove-icon{opacity:1}.btn-remove-icon:hover{background:#ff6b6b}.empty-state-batch{text-align:center;padding:40px 20px;color:var(--text-secondary);background:var(--bg-tertiary);border-radius:6px}.empty-state-batch p{margin:4px 0;font-size:14px}.button-group-container{display:flex;flex-direction:column;gap:8px}.button-group-label{font-size:14px;font-weight:500;color:var(--text-primary)}.button-group{display:flex;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:4px;gap:4px}.button-group-btn{flex:1;padding:8px 16px;background:transparent;color:var(--text-secondary);border:none;border-radius:4px;font-size:14px;font-weight:500;transition:all .2s ease}.button-group-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.button-group-btn.active{background:var(--accent-primary);color:#fff}.history-container{padding:24px}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.history-header h2{margin:0;font-size:24px;color:var(--text-primary)}.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}.empty-state p{margin:8px 0}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;transition:all .2s ease}.history-item:hover{background:var(--bg-hover);border-color:var(--text-secondary)}.history-item-info{flex:1}.history-item-title{font-size:15px;color:var(--text-primary);margin-bottom:4px;font-weight:500}.history-item-date{font-size:13px;color:var(--text-secondary)}.btn-load{padding:8px 16px;background:var(--accent-primary);color:#fff;border-radius:6px;font-size:14px;font-weight:500}.btn-load:hover{background:var(--accent-hover)}.settings-container{padding:24px;max-width:800px}.settings-header h2{margin:0 0 24px;font-size:24px;color:var(--text-primary)}.settings-section{margin-bottom:32px;padding:20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px}.settings-section h3{margin:0 0 16px;font-size:18px;color:var(--text-primary)}.import-export-buttons{display:flex;gap:12px;flex-wrap:wrap}.file-button{display:inline-block;cursor:pointer}.settings-actions{display:flex;gap:12px;margin-top:24px}.btn-danger{padding:10px 20px;background:var(--error);color:#fff;border-radius:6px;font-size:14px;font-weight:500}.btn-danger:hover{background:#ff6b6b}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:0 24px;position:sticky;top:0;z-index:100}.navbar-brand{padding:16px 0}.navbar-brand h1{margin:0;font-size:20px;color:var(--text-primary);font-weight:600}.navbar-tabs{display:flex;gap:4px;overflow-x:auto}.nav-tab{padding:12px 20px;background:transparent;color:var(--text-secondary);border:none;border-bottom:2px solid transparent;font-size:14px;font-weight:500;white-space:nowrap;transition:all .2s ease}.nav-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.nav-tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.main-content{flex:1;padding:0;max-width:100%;overflow-x:hidden}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:16px 24px;text-align:center;margin-top:auto}.footer p{margin:0;font-size:13px;color:var(--text-secondary)}@media (max-width: 768px){.navbar{padding:0 16px}.navbar-brand h1{font-size:18px}.nav-tab{padding:10px 16px;font-size:13px}.main-content{padding:0}}:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #1c2128;--bg-hover: #21262d;--border-color: #30363d;--text-primary: #e6edf3;--text-secondary: #7d8590;--accent-primary: #58a6ff;--accent-hover: #79c0ff;--success: #3fb950;--error: #f85149;--warning: #d29922}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}#root{min-height:100vh}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all .2s ease}input,select,textarea{font-family:inherit;color:var(--text-primary);background-color:var(--bg-secondary);border:1px solid var(--border-color);outline:none;transition:all .2s ease}input:focus,select:focus,textarea:focus{border-color:var(--accent-primary)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}