.profile-overview { width:100%; max-width:700px; margin-inline:auto; color:var(--ink); }
.profile-overview-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.profile-overview-heading h1 { font-size:2.5rem; letter-spacing:-.04em; margin:0; }
.profile-mode { display:inline-flex; align-items:center; gap:9px; padding:9px 15px; background:#e3f3ed; border-radius:30px; color:#007e68; font-weight:650; font-size:.9rem; white-space:nowrap; }
.profile-mode i { width:9px; height:9px; background:#00a57a; border-radius:50%; }
.profile-summary,.profile-exit { background:var(--surface); border:1px solid #d8e5e7; border-radius:24px; }
.profile-summary { position:relative; display:flex; align-items:center; gap:14px; padding:14px; margin-bottom:12px; }
.profile-picture { position:relative; width:64px; height:64px; flex:none; border:0; padding:0; background:transparent; border-radius:50%; cursor:pointer; font:inherit; }
.profile-picture:focus-visible { outline:3px solid #0c806c; outline-offset:4px; }
.profile-picture:disabled { cursor:wait; opacity:.7; }
.profile-photo-status { color:#536c79; font-size:.88rem; margin:0 0 16px; }
.profile-photo-status:empty { display:none; }
.profile-picture-content { display:grid; place-items:center; height:100%; width:100%; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#d8f4e9,#dce9e9); color:#007965; font-size:1.5rem; font-weight:700; }
.profile-picture-content img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.profile-camera { position:absolute; bottom:0; right:0; display:grid; place-items:center; width:24px; height:24px; background:#008675; color:#fff; border:2px solid white; border-radius:50%; }
.profile-camera svg { width:14px; height:14px; }
.profile-summary-copy { min-width:0; }
.profile-summary-copy h2 {
  font-size: 1.16rem;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.profile-summary-copy p { font-size:.85rem; margin:0; color:var(--muted); overflow-wrap:anywhere; }
.profile-level { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:3px 7px; border-radius:10px; background:#e0faf0; color:#008166; text-decoration:none; font-weight:600; font-size:.78rem; }
.profile-level svg { height:14px; width:14px; }
.profile-edit { position:absolute; right:20px; top:20px; height:38px; width:38px; display:grid; place-items:center; border-radius:50%; color:#006f60; background:#edf5f3; }
.profile-edit svg { height:21px; width:21px; }
.profile-overview-group { display:grid; gap:7px; padding:0; margin-bottom:7px; background:transparent; border:0; }
[data-appearance="dark"] .profile-overview .profile-overview-group { background:transparent; }
.profile-overview-row { display:flex; align-items:center; gap:12px; width:100%; min-height:53px; padding:6px 12px; border:0; border-radius:12px; background:var(--surface); box-shadow:0 4px 18px #192e2b03; color:inherit; text-decoration:none; text-align:left; }
.profile-row-icon { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:9px; }
.profile-row-icon svg { width:17px; height:17px; }
.profile-row-icon.mint { color:#006e5e; background:#e5f3ee; }
.profile-row-icon.slate { color:#374a5b; background:#e7edf5; }
.profile-row-icon.peach { color:#bb4b30; background:#ffecdf; }
.profile-row-icon.green { color:#007654; background:#dff6e9; }
.profile-row-icon.violet { color:#763caa; background:#efe5fc; }
.profile-row-icon.blue { color:#155f95; background:#e1f0ff; }
.profile-row-icon.rose { color:#af201c; background:#faeceb; }
.profile-row-copy { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.profile-row-copy strong { font-size:.96rem; font-weight:650; letter-spacing:-.025em; }
.profile-row-copy small { font-size:.78rem; line-height:1.3; color:var(--muted); }
.profile-row-chevron { width:12px; height:12px; flex:none; color:#6d7c82; }
.profile-overview-row:hover .profile-row-copy strong { color:#007e68; }
.profile-overview a:focus-visible,.profile-exit:focus-visible { outline:3px solid #0c806c; outline-offset:3px; }
.profile-exit { padding:6px 12px; min-height:46px; cursor:pointer; font-family:inherit; color:#b02219; }
.profile-exit:hover { background:#fff9f8; }
.profile-overview-footer { text-align:center; color:#708b99; font-size:.8rem; margin:10px 0 6px; }
.demo-profile-photo-editor { display:grid; justify-items:start; gap:16px; }
.demo-photo-preview { display:grid; place-items:center; width:100px; height:100px; overflow:hidden; border-radius:50%; background:#e1f5ec; color:#087b65; font-size:2rem; font-weight:700; }
.demo-photo-preview img { width:100%; height:100%; object-fit:cover; }
.photo-preview .account-avatar { border-radius:50%; }
@media(max-width:540px) {
 .profile-overview-heading { margin-bottom:10px; }
 .profile-overview-heading h1 { font-size:1.8rem; }
 .profile-mode { font-size:.77rem; padding:8px 11px; gap:7px; }
 .profile-summary { padding:10px 12px; gap:10px; border-radius:12px; margin-bottom:7px; }
 .profile-picture { width:40px; height:40px; }
 .profile-picture-content { font-size:1rem; }
 .profile-camera { width:20px; height:20px; border-width:2px; }
 .profile-camera svg { width:12px; height:12px; }
 .profile-summary-copy h2 { font-size:1.16rem; }
 .profile-summary-copy p { font-size:.79rem; }
 .profile-edit { width:28px; height:28px; right:10px; top:10px; }
 .profile-edit svg { width:17px; height:17px; }
 .profile-level { margin-top:5px; padding:2px 6px; font-size:.7rem; gap:4px; }
 .profile-level svg { width:12px; height:12px; }
 .profile-overview-group { gap:6px; padding:0; margin-bottom:6px; }
 .profile-overview-row { min-height:44px; gap:8px; padding:4px 8px; border-radius:10px; }
 .profile-row-icon { width:26px; height:26px; border-radius:7px; }
 .profile-row-icon svg { width:14px; height:14px; }
 .profile-row-copy strong { font-size:.88rem; }
 .profile-row-copy small { font-size:.72rem; }
 .profile-row-chevron { width:10px; height:10px; }
 .profile-exit { padding:4px 8px; min-height:44px; border-radius:10px; }
}
@media(max-width:360px) { .profile-picture { width:40px; height:40px; } .profile-summary { gap:12px; padding-inline:12px; } .profile-row-copy small { font-size:.73rem; } .profile-row-icon { width:24px; height:24px; } .profile-overview-row { gap:10px; } }

.profile-overview .kyc-badge { padding:2px 7px; font-size:.7rem; }
.app-settings > .back { display:inline-flex; align-items:center; gap:7px; margin:0 0 18px; min-height:44px; font-size:.88rem; color:#008675; }
.app-settings > .back svg { width:18px; height:18px; }
.app-settings .profile-overview-heading { margin-bottom:20px; }
.app-settings .profile-overview-heading h1 { font-size:clamp(1.7rem,3vw,2.15rem); }
.app-settings .profile-overview-heading p { color:var(--muted); margin:7px 0 0; font-size:.9rem; }
.app-settings .profile-overview-group { display:grid; gap:10px; }
.app-settings .profile-overview-row { padding:16px 18px; min-height:78px; border:1px solid var(--line); border-radius:17px; gap:14px; }
.app-settings .profile-row-icon { width:44px; height:44px; border-radius:13px; }
.app-settings .profile-row-icon svg { width:23px; height:23px; }
.app-settings .profile-row-copy { gap:4px; }
.app-settings .profile-row-copy strong { font-size:1rem; }
.app-settings .profile-row-copy small { font-size:.82rem; line-height:1.45; }
.app-settings .profile-row-chevron { width:16px; height:16px; }
.settings-about-version { margin-top:16px; }
.settings-about-version p { color:var(--muted); margin:5px 0 0; font-size:.85rem; }
@media(max-width:540px) {
 .app-settings .profile-overview-row { padding:13px; min-height:73px; gap:11px; }
 .app-settings .profile-row-icon { width:40px; height:40px; }
 .app-settings .profile-row-copy strong { font-size:.93rem; }
 .app-settings .profile-row-copy small { font-size:.77rem; }
}
.profile-summary > .profile-summary-copy { flex:1; }
.profile-summary > .profile-summary-level { flex:none; flex-direction:column; justify-content:center; align-self:center; margin:0 0 0 auto; padding:4px 8px; gap:3px; background:transparent; min-width:68px; }
.profile-summary-level .level-badge { --badge-size:56px; }
.profile-summary-level > span:last-child { white-space:nowrap; }
@media(max-width:540px) {
 .profile-summary > .profile-summary-level { padding:2px; min-width:48px; font-size:.7rem; }
 .profile-summary-level .level-badge { --badge-size:44px; }
}