Settings Section Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-settings {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
}

/* === Settings Section Card Styles === */
.settings-section-card {
    --settings-radius: 12px;
    --settings-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--settings-radius);
    box-shadow: var(--settings-shadow);
}

.settings-section-header {
    padding: 1.5rem 1.5rem 1rem;
}
.settings-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.settings-section-description {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}

/* Body contains the settings/form elements */
.settings-section-body {
    padding: 0.5rem 0; /* Vertical padding */
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}
.settings-section-body .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
}
.settings-section-body .setting-item:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.setting-item-content {
    flex-grow: 1;
}
.setting-item-label {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    display: block; /* To allow margin */
}
.setting-item-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
}

.setting-item-action {
    flex-shrink: 0;
}
/* Styles for placeholder form elements */
.setting-item-action .text-input {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    width: 200px;
}
.setting-item-action .select-input {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #ffffff;
}

/* Toggle Switch styles */
.stc-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.stc-toggle-switch input { opacity: 0; width: 0; height: 0; }
.stc-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}
.stc-toggle-slider:before {
    position: absolute; content: ""; height: 18px; width: 18px;
    left: 3px; bottom: 3px; background-color: white;
    transition: .4s; border-radius: 50%;
}
input:checked + .stc-toggle-slider { background-color: #4f46e5; }
input:focus-visible + .stc-toggle-slider { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4f46e5; }
input:checked + .stc-toggle-slider:before { transform: translateX(20px); }

/* Footer */
.settings-section-footer {
    padding: 1rem 1.5rem;
    background-color: #f9fafb;
    text-align: right;
}
.settings-save-btn {
    background-color: #4f46e5;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.settings-save-btn:hover {
    background-color: #4338ca;
}

</style>

<div class="demo-container-settings">
    <section class="settings-section-card">
        <header class="settings-section-header">
            <h2 class="settings-section-title">General Settings</h2>
            <p class="settings-section-description">Manage your primary account settings.</p>
        </header>
        <div class="settings-section-body">
            <div class="setting-item">
                <div class="setting-item-content">
                    <label for="username" class="setting-item-label">Username</label>
                    <p class="setting-item-description">This will be your public display name.</p>
                </div>
                <div class="setting-item-action">
                    <input type="text" id="username" class="text-input" value="elara_ux">
                </div>
            </div>
            <div class="setting-item">
                <div class="setting-item-content">
                    <label for="language" class="setting-item-label">Language</label>
                    <p class="setting-item-description">Choose your preferred language for the interface.</p>
                </div>
                <div class="setting-item-action">
                    <select id="language" class="select-input">
                        <option>English (US)</option>
                        <option>Español</option>
                        <option>日本語</option>
                    </select>
                </div>
            </div>
            <div class="setting-item">
                <div class="setting-item-content">
                    <label for="toggle-dark" class="setting-item-label">Dark Mode</label>
                    <p class="setting-item-description">Enable the dark color scheme for reduced eye strain.</p>
                </div>
                <div class="setting-item-action">
                    <label class="stc-toggle-switch">
                        <input type="checkbox" id="toggle-dark" checked>
                        <span class="stc-toggle-slider"></span>
                    </label>
                </div>
            </div>
        </div>
        <footer class="settings-section-footer">
            <button class="settings-save-btn">Save Changes</button>
        </footer>
    </section>
</div>