:root {
    --navy: #1a1a2e;
    --dark-navy: #16213e;
    --info: #00d2ff;
}

body {
    background-color: #f4f6f9;
    font-family: 'Inter', sans-serif;
    /* Subtle dot grid background */
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
    background-size: 20px 20px;
}

.fw-800 { font-weight: 800; }
.bg-sidebar { background-color: var(--navy); }
.text-info { color: var(--info) !important; }
.btn-info { background-color: var(--info) !important; border-color: var(--info) !important; }
.bg-dark-soft { background: rgba(255,255,255,0.05); }

/* Sidebar Inputs */
.bg-dark { background-color: var(--dark-navy) !important; }

/* Custom Range Slider */
.custom-range::-webkit-slider-thumb { background: var(--info); }
.custom-range::-moz-range-thumb { background: var(--info); }

/* Switch Styling */
.form-check-input:checked {
    background-color: var(--info);
    border-color: var(--info);
}

/* Password Result Styling */
#passwordResult {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6rem;
    height: 80px;
    letter-spacing: 2px;
    color: var(--navy);
}

.result-group {
    border: 2px solid #f8f9fa;
    transition: 0.3s;
}

/* Bulk List Preview */
.mono-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #495057;
    resize: vertical; /* Allow user to pull the box longer for big lists */
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
}

/* Remove Number Spinner Arrows */
#count::-webkit-inner-spin-button, 
#count::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
#count:focus {
    background-color: var(--dark-navy) !important;
    color: var(--info) !important;
    box-shadow: none;
    border-color: var(--info) !important;
}

/* Ensure the text is centered and bold for easy reading */
#count {
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* Hover Effects */
.hover-link:hover { color: var(--navy) !important; text-decoration: underline !important; }

@media (max-width: 991px) {
    .bg-sidebar { border-radius: 0; }
    #passwordResult { font-size: 1.2rem; height: 70px; }
}