/* Zufallinator */
.container-wide { max-width: 900px !important; }
.mode-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.mode-btn { background: var(--color-bg-elevated); padding: var(--space-lg); border-radius: var(--radius-md); text-align: center; cursor: pointer; transition: all 0.3s; border: 2px solid transparent; }
.mode-btn:hover, .mode-btn.active { border-color: var(--color-primary); background: var(--color-accent); }
.mode-icon { font-size: 2rem; margin-bottom: var(--space-sm); }
.gen-section { display: none; background: var(--color-bg-elevated); padding: var(--space-2xl); border-radius: var(--radius-lg); }
.gen-section.active { display: block; }
.gen-section h2 { color: var(--color-primary); margin-bottom: var(--space-xl); }
textarea { width: 100%; min-height: 150px; padding: var(--space-lg); border: 2px solid var(--color-border); border-radius: var(--radius-sm); font-family: monospace; background: var(--color-bg-elevated); }
.result-box { background: var(--color-accent); padding: var(--space-2xl); border-radius: var(--radius-md); text-align: center; font-size: 1.5rem; font-weight: bold; margin: var(--space-xl) 0; min-height: 80px; display: flex; align-items: center; justify-content: center; }
.number-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-lg); }
input[type="number"] { width: 100%; padding: var(--space-md); border: 2px solid var(--color-border); border-radius: var(--radius-sm); }
@media (max-width: 768px) { .mode-selector { grid-template-columns: repeat(2, 1fr); } }