/* Profile page — migrated from Profile.razor.css; scoped under .page-profile. */
.page-profile { display: flex; flex-direction: column; gap: 34px; }

.page-profile .profile-page { display: flex; flex-direction: column; gap: 28px; }

/* ── Photo ── */
.page-profile .photo-row {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.page-profile .avatar-lg {
    width: 96px;
    height: 96px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    font-size: 30px;
    font-weight: 700;
    color: #04201D;
    background: linear-gradient(140deg, #5EEAD9, #14B8A6);
}

.page-profile .avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.page-profile .photo-controls { display: flex; flex-direction: column; gap: 8px; }

.page-profile .btn-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }

/* ── Details ── */
.page-profile .field-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-width: 480px; }

.page-profile .readonly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.page-profile .readonly-value { margin: 6px 0 0; font-size: 14px; color: var(--text); }

.page-profile .saved-note { color: var(--good); font-weight: 600; }

/* ── Appearance ── */
.page-profile .theme-toggle { display: inline-flex; border: 1px solid var(--line); }

.page-profile .theme-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.page-profile .theme-opt + .theme-opt { border-left: 1px solid var(--line); }
.page-profile .theme-opt:hover:not(:disabled) { color: var(--text); background: rgba(127, 127, 127, 0.08); }
.page-profile .theme-opt:disabled { opacity: .5; cursor: default; }

.page-profile .theme-opt.is-active { color: var(--accent-2); background: var(--accent-soft); }

.page-profile .theme-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); }
.page-profile .swatch-dark { background: #131517; }
.page-profile .swatch-light { background: #F4F5F7; }