.tool-bcrypt-generator .tool-container {display: flex; flex-direction: column; gap: var(--spacing-xl);}
.tool-bcrypt-generator .mode-tabs {display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg);}
.tool-bcrypt-generator .tab-btn {flex: 1; padding: var(--spacing-md); border: 2px solid var(--border); background: var(--bg-body); border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-base);}
.tool-bcrypt-generator .tab-btn.active {background: var(--primary); color: white; border-color: var(--primary);}
.tool-bcrypt-generator .panel {background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius-md);}
.tool-bcrypt-generator .panel.hidden {display: none;}
.tool-bcrypt-generator .panel-header {padding: var(--spacing-md); background: var(--bg-light); border-bottom: 2px solid var(--border);}
.tool-bcrypt-generator .panel-title {font-weight: 700; color: var(--text-dark); font-size: 0.9rem; text-transform: uppercase;}
.tool-bcrypt-generator .panel-content {padding: var(--spacing-lg);}
.tool-bcrypt-generator .input-group {margin-bottom: var(--spacing-md);}
.tool-bcrypt-generator .input-group label {display: block; font-weight: 600; margin-bottom: var(--spacing-xs);}
.tool-bcrypt-generator .input-group input {width: 100%; padding: var(--spacing-md); border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-body);}
.tool-bcrypt-generator .hint {display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: var(--spacing-xs);}
.tool-bcrypt-generator .result-box {margin-top: var(--spacing-lg); padding: var(--spacing-lg); border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--bg-body);}
.tool-bcrypt-generator .result-box.hidden {display: none;}
.tool-bcrypt-generator .hash-output {font-family: 'Courier New', monospace; word-break: break-all; background: var(--bg-light); padding: var(--spacing-md); border-radius: var(--radius-sm); margin: var(--spacing-sm) 0;}