.affirmnosis-container {
    max-width: 1100px !important;
    width: 100% !important;
    margin: 30px auto !important;
    background: #23272f !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
    padding: 24px 40px !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    color: #f3f3f3 !important;
    display: block !important;
}

@media (max-width: 1200px) {
    .affirmnosis-container {
        max-width: 98vw !important;
        padding: 12px 2vw !important;
    }
}

/* Header */
.affirmnosis-header h2 {
    margin-top: 0 !important;
    color: #aee7ff !important;
}

/* Form steps styling */
.affirmnosis-form .form-group label {
    font-size: 1.05em !important;
    color: #aee7ff !important;
}

/* Form group */
.affirmnosis-form .form-group {
    margin-bottom: 18px !important;
}

/* Inputs, selects, textarea */
.affirmnosis-form input[type="text"],
.affirmnosis-form select,
.affirmnosis-form textarea {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 1px solid #444 !important;
    border-radius: 5px !important;
    font-size: 1em !important;
    margin-bottom: 4px !important;
    background: #181c22 !important;
    color: #f3f3f3 !important;
}

.affirmnosis-form textarea {
    min-height: 70px !important;
    resize: vertical !important;
}

/* Disabled state */
select:disabled {
    background: #2a2a2a !important;
    color: #666 !important;
    cursor: not-allowed !important;
}

/* Button enhancement */
.affirmnosis-btn-primary {
    background: linear-gradient(90deg, #00bcd4 0%, #6a5acd 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 12px 28px !important;
    font-size: 1.2em !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    margin-top: 20px !important;
}

.affirmnosis-btn-primary:disabled {
    background: #555 !important;
    cursor: not-allowed !important;
}

/* Library */
.affirmnosis-library {
    margin-top: 32px !important;
}

.audio-library-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 32px !important; /* Increased gap for more space */
    justify-content: flex-start !important;
}

.audio-item {
    background: #181c22 !important;
    border-radius: 7px !important;
    padding: 18px 20px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
    width: 320px !important; /* Wider for better content fit */
    min-width: 260px !important;
    margin-bottom: 32px !important; /* Extra margin for vertical spacing */
    color: #f3f3f3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.audio-item strong {
    color: #aee7ff !important;
}

.audio-meta {
    font-size: 0.92em !important;
    color: #b0bec5 !important;
}

.delete-audio-btn {
    background: #e57373 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 5px 12px !important;
    font-size: 0.95em !important;
    cursor: pointer !important;
    margin-top: 6px !important;
}

/* Notices */
.field-notice {
    background: #fff3cd !important;
    border: 1px solid #ffeaa7 !important;
    color: #856404 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    margin-top: 6px !important;
    font-size: 0.9em !important;
    display: flex !important;
    align-items: center !important;
}

.notice-icon {
    margin-right: 6px !important;
}

/* Volume controls */
.volume-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.volume-control {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.volume-control label {
    min-width: 100px !important;
    margin-bottom: 0 !important;
}

.volume-control input[type="range"] {
    flex: 1 !important;
    width: auto !important;
}

.volume-control span {
    min-width: 40px !important;
    text-align: right !important;
    font-weight: bold !important;
    color: #00bcd4 !important;
}

/* Mode description */
.mode-description {
    font-size: 0.9em !important;
    color: #b3e5fc !important;
    margin-top: 4px !important;
    font-style: italic !important;
}

/* Generation limit */
.generation-limit {
    font-size: 0.98em !important;
    color: #b0bec5 !important;
    margin-bottom: 10px !important;
}

/* Voice description */
.voice-description {
    font-size: 0.98em !important;
    color: #b3e5fc !important;
    margin-top: 4px !important;
}

/* Messages */
.affirmnosis-messages {
    display: none !important;
    margin-top: 18px !important;
    padding: 10px 16px !important;
    border-radius: 5px !important;
    font-size: 1.05em !important;
}

.affirmnosis-messages.success {
    background: #263238 !important;
    color: #00e676 !important;
}

.affirmnosis-messages.error {
    background: #3d2323 !important;
    color: #ff5252 !important;
}

/* Focus/active states */
.affirmnosis-form input[type="text"]:focus,
.affirmnosis-form select:focus,
.affirmnosis-form textarea:focus {
    outline: 2px solid #00bcd4 !important;
    border-color: #00bcd4 !important;
    background: #23272f !important;
}