/* ============================================
   Settings Pages - Shared Layout
   ============================================
   Common wrapper, container, header, and
   back-button styles used across all Settings
   sub-pages. Load BEFORE page-specific CSS.
   ============================================ */

.settings-page-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: var(--s-8) var(--s-0) var(--s-0) var(--s-0);
}

.settings-page-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 28px 30px;
}

.settings-page-header {
    padding-bottom: var(--s-5);
    margin-bottom: var(--s-5);
}

.settings-page-header .label,
.settings-page-header h2 {
    color: rgba(0, 0, 0, 0.90);
    font-family: var(--font-primary);
    font-size: var(--t-display-md);
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.24px;
}

/* The back button used to set `pointer-events: none` on the anchor and
   re-enable it on the inner span. That broke anchor navigation —
   clicking the arrow span did nothing because spans aren't links, and
   the anchor's href was unreachable. Re-enabled the anchor as the
   single click target. Also pinned justify-content: flex-start so the
   arrow + label stay left-anchored regardless of any parent flex
   override on the page-specific stylesheet. */
.back-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 400;
    gap: var(--s-2);
    color: inherit;
    cursor: pointer;
    align-self: flex-start;
    justify-content: flex-start;
}

.back-btn:hover .label {
    color: var(--brand-primary);
}

.back-btn .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arrow img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}