:root{--font-body: "Inter", sans-serif;--font-mono: "Roboto Mono", monospace;--transition-speed: .3s}[data-theme=dark]{--background: #1a1b26;--surface: #24283b;--surface-alt: #1f2335;--text: #c0caf5;--text-muted: #a9b1d6;--accent: #7aa2f7;--accent-hover: #9eceff;--border: #414868;--success: #9ece6a;--button-text: #1a1b26;--danger: #f7768e;--danger-hover: #ff9e64}[data-theme=light]{--background: #f0f2f5;--surface: #ffffff;--surface-alt: #e6e9f0;--text: #1f2335;--text-muted: #5c5f77;--accent: #3d5afe;--accent-hover: #637bfe;--border: #d9dce3;--success: #2e7d32;--button-text: #ffffff;--danger: #d32f2f;--danger-hover: #e57373}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--background);color:var(--text);line-height:1.6;transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease}#root{display:flex;flex-direction:column;min-height:100vh}.app-container{display:flex;flex:1;width:100%;max-width:1400px;margin:0 auto;padding:1.5rem;gap:1.5rem}header{padding:1rem 1.5rem;border-bottom:1px solid var(--border);background-color:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:background-color var(--transition-speed) ease,border-color var(--transition-speed) ease}header h1{font-size:1.5rem;color:var(--accent);white-space:nowrap}.header-controls{display:flex;align-items:center;gap:1rem;width:100%;max-width:700px}.search-input{width:100%;padding:.65rem 1rem;font-size:1rem;background-color:var(--background);color:var(--text);border:1px solid var(--border);border-radius:8px;font-family:var(--font-body);transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease,border-color var(--transition-speed) ease}.search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-hover)}.header-button{padding:.65rem 1rem;background-color:var(--surface-alt);color:var(--text-muted);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:var(--font-body);font-weight:500;white-space:nowrap;transition:all .2s ease}.header-button:hover{background-color:var(--accent);color:var(--button-text);border-color:var(--accent)}.theme-toggle{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color var(--transition-speed) ease,background-color var(--transition-speed) ease}.theme-toggle:hover{color:var(--accent);background-color:var(--background)}.theme-toggle svg{width:24px;height:24px}.sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--border);transition:border-color var(--transition-speed) ease;display:flex;flex-direction:column}.sidebar h2{font-size:1.1rem;color:var(--text-muted);margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);transition:color var(--transition-speed) ease,border-color var(--transition-speed) ease}.sidebar nav{flex-grow:1}.sidebar ul{list-style:none}.sidebar .category-item{display:flex;align-items:center;justify-content:space-between;border-radius:6px;transition:background-color .2s ease}.sidebar .category-item:hover{background-color:var(--surface)}.sidebar .category-item .category-actions{display:flex;gap:.25rem;padding-right:.5rem;opacity:0;transition:opacity .2s ease}.sidebar .category-item:hover .category-actions{opacity:1}.sidebar .icon-button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;border-radius:4px;display:flex;align-items:center;justify-content:center}.sidebar .icon-button:hover{color:var(--accent);background-color:var(--background)}.sidebar .icon-button:last-child:hover{color:var(--danger)}.sidebar .category-edit-input{width:100%;padding:.75rem 1rem;background-color:var(--surface);border:1px solid var(--accent);color:var(--text);border-radius:6px;font-size:1rem}.sidebar li button{flex-grow:1;padding:.75rem 1rem;background:none;border:none;color:var(--text-muted);text-align:left;font-size:1rem;font-family:var(--font-body);cursor:pointer;border-radius:6px;transition:color .2s ease}.sidebar li button:hover{color:var(--text)}.sidebar li button.active{background-color:var(--accent);color:var(--button-text);font-weight:500}.sidebar li button.active:hover{color:var(--button-text)}.sidebar .category-item:has(button.active){background-color:var(--accent)}.sidebar .category-item:has(button.active) .icon-button{color:var(--button-text)}.sidebar .category-item:has(button.active) .icon-button:hover{background-color:#fff3}.add-category-form{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.add-category-form input{width:100%;padding:.65rem 1rem;font-size:.9rem;background-color:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;margin-bottom:.5rem}.add-category-form button{width:100%;padding:.65rem 1rem;background-color:var(--surface-alt);border:1px solid var(--border);color:var(--text-muted);border-radius:6px;cursor:pointer;transition:all .2s ease}.add-category-form button:hover{background-color:var(--accent);color:var(--button-text);border-color:var(--accent)}.content-panel{flex-grow:1;overflow-y:auto}.content-panel h2{font-size:1.75rem;margin-bottom:1.5rem;color:var(--text)}.quick-add-panel{background-color:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.quick-add-panel h3{font-size:1.25rem;color:var(--text);margin-bottom:1rem}.quick-add-form{display:flex;flex-direction:column;gap:.75rem}.quick-add-form .form-group{display:flex;flex-direction:column}.quick-add-form .description-group{position:relative}.quick-add-form input,.quick-add-form textarea{width:100%;padding:.75rem 1rem;font-size:1rem;background-color:var(--background);color:var(--text);border:1px solid var(--border);border-radius:6px;font-family:var(--font-body);resize:vertical}.quick-add-form .description-group textarea{padding-right:110px}.quick-add-form .generate-button{position:absolute;right:8px;top:8px;padding:.4rem .8rem;font-size:.8rem;background-color:var(--surface-alt);color:var(--text-muted);border:1px solid var(--border);border-radius:5px;cursor:pointer;transition:all .2s ease}.quick-add-form .generate-button:not(:disabled):hover{background-color:var(--accent);color:var(--button-text)}.quick-add-form .generate-button:disabled{background-color:var(--border);color:var(--text-muted);cursor:not-allowed;opacity:.6}.quick-add-form .add-button{align-self:flex-start;padding:.65rem 1.5rem;background-color:var(--accent);color:var(--button-text);border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.quick-add-form .add-button:hover{background-color:var(--accent-hover)}.command-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1rem}.no-results{text-align:center;padding:3rem 1rem;color:var(--text-muted);font-size:1.1rem}.command-card{background-color:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,background-color var(--transition-speed) ease,border-color var(--transition-speed) ease;position:relative}.command-card:hover{transform:translateY(-3px);box-shadow:0 4px 20px #0000001a}.card-actions{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.25rem;background-color:var(--surface);padding:.25rem;border-radius:8px;opacity:0;transition:opacity .2s ease}.command-card:hover .card-actions{opacity:1}.card-actions .icon-button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.5rem;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.card-actions .icon-button:hover{color:var(--accent);background-color:var(--background)}.card-actions .icon-button:last-child:hover{color:var(--danger)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem;padding-right:4.5rem}.card-header p{color:var(--text-muted);flex-grow:1;padding-right:.5rem;transition:color var(--transition-speed) ease}.category-badge{font-size:.75rem;padding:.2rem .5rem;border-radius:12px;background-color:var(--accent);color:var(--button-text);font-weight:500;flex-shrink:0}.command-wrapper{background-color:var(--background);padding:.75rem;border-radius:6px;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--font-mono);transition:background-color var(--transition-speed) ease}.command-wrapper code{color:var(--text);word-break:break-all;white-space:pre-wrap;transition:color var(--transition-speed) ease}.copy-button{background-color:var(--accent);color:var(--button-text);border:none;padding:.5rem .75rem;border-radius:5px;cursor:pointer;font-family:var(--font-body);font-weight:500;transition:background-color .2s ease;flex-shrink:0}.copy-button:hover{background-color:var(--accent-hover)}.copy-button.copied{background-color:var(--success)}.command-card.editing{gap:1rem}.command-card.editing .form-group{display:flex;flex-direction:column;gap:.25rem}.command-card.editing .form-group label{font-size:.8rem;color:var(--text-muted)}.command-card.editing input,.command-card.editing textarea{width:100%;padding:.65rem 1rem;font-size:1rem;background-color:var(--background);color:var(--text);border:1px solid var(--border);border-radius:6px;font-family:var(--font-body);resize:vertical}.command-card.editing textarea.command-input{font-family:var(--font-mono)}.command-card.editing .editing-actions{display:flex;gap:.5rem;justify-content:flex-end}.command-card.editing .editing-actions button{padding:.5rem 1rem;border-radius:6px;border:1px solid var(--border);cursor:pointer;font-weight:500}.command-card.editing .save-button{background-color:var(--accent);color:var(--button-text);border-color:var(--accent)}.command-card.editing .cancel-button{background-color:var(--surface-alt);color:var(--text-muted)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--surface);padding:1.5rem;border-radius:12px;width:90%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;border:1px solid var(--border)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:1rem;margin-bottom:1rem}.modal-header h2{margin:0;font-size:1.5rem}.close-button{background:none;border:none;font-size:2rem;cursor:pointer;color:var(--text-muted)}.modal-body{overflow-y:auto;padding-right:1rem;margin-right:-1rem;display:flex;flex-direction:column;gap:1rem}.modal-body .form-group{display:flex;flex-direction:column}.modal-body .form-group label{margin-bottom:.5rem;color:var(--text-muted)}.modal-body .form-group input{width:100%;padding:.75rem 1rem;font-size:1rem;background-color:var(--background);color:var(--text);border:1px solid var(--border);border-radius:6px}.bulk-add-rows{display:flex;flex-direction:column;gap:.75rem}.bulk-add-row{display:flex;gap:.75rem;align-items:stretch}.bulk-add-row input,.bulk-add-row textarea{flex-grow:1;padding:.75rem 1rem;font-size:1rem;background-color:var(--background);color:var(--text);border:1px solid var(--border);border-radius:6px;font-family:var(--font-body);resize:vertical}.remove-row-button,.add-row-button{padding:.5rem;border-radius:6px;border:1px solid var(--border);background-color:var(--surface-alt);color:var(--text-muted);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .2s ease}.remove-row-button{flex-shrink:0;width:46px;height:auto;aspect-ratio:1/1}.add-row-button{align-self:flex-start;width:auto;padding:.5rem 1rem;aspect-ratio:initial;font-size:1rem}.add-row-button:hover{background-color:var(--accent);color:var(--button-text)}.remove-row-button:hover{background-color:var(--danger);color:var(--button-text)}.modal-footer{border-top:1px solid var(--border);padding-top:1rem;margin-top:1.5rem;display:flex;justify-content:space-between;align-items:center}.advanced-options{display:flex;align-items:center;gap:.75rem}.advanced-options p{color:var(--text-muted);font-size:.9rem}.footer-button{padding:.5rem 1rem;background-color:var(--surface-alt);color:var(--text-muted);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s ease}.footer-button:hover{background-color:var(--accent);color:var(--button-text)}.save-button{padding:.75rem 1.5rem;background-color:var(--accent);color:var(--button-text);border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s ease}.save-button:hover{background-color:var(--accent-hover)}@media (max-width: 900px){.app-container{flex-direction:column;padding:1rem;gap:0}.sidebar{width:100%;border-right:none;padding-right:0;margin-bottom:1rem;border-bottom:1px solid var(--border);padding-bottom:1rem}.content-panel{padding-left:0}}@media (max-width: 600px){header{flex-direction:column;align-items:flex-start}.header-controls{width:100%}.command-grid{grid-template-columns:1fr}.modal-footer{flex-direction:column;align-items:stretch;gap:1rem}.advanced-options{flex-direction:column;align-items:stretch}.save-button{width:100%}}
