.profile-screen { margin: clamp(30px, 12vh, 125px) auto 0; text-align: center; }
.profile-screen h1 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 28px; }
.profile-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.profile-card { display: grid; justify-items: center; gap: 9px; background: transparent; color: inherit; width: 120px; overflow-wrap: anywhere; }
.profile-avatar { width: 90px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border-radius: 19px; background: var(--green); color: white; font-size: 36px; font-weight: 750; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card:hover .profile-avatar, .profile-card:focus-visible .profile-avatar { outline: 3px solid var(--green); outline-offset: 4px; }
.profile-add .profile-avatar { background: var(--pale); color: var(--green); }
.profile-screen p { margin-top: 24px; }
.group-access { max-width: 360px; margin: auto; display: grid; gap: 12px; text-align: left; }
.group-access p:empty { display: none; }
.bottom-nav[hidden], #profileSwitch[hidden] { display: none; }
.topbar .row { justify-content: flex-end; }
#profileSwitch { max-width: 42vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-theme="oceano"] { --green:#245e86; --pale:#e2f0fa; --line:#cfdfe9; background:#f0f7fb; }
[data-theme="tramonto"] { --green:#a14031; --pale:#fae8df; --line:#efd7cd; background:#fff6f0; }
[data-theme="lavanda"] { --green:#694694; --pale:#f0e7fa; --line:#e0d3ee; background:#faf5ff; }
[data-theme="notte"] { color-scheme: dark; --green:#326f61; --pale:#304c47; --line:#445753; background:#182824; color:#edf5f1; }
:root[data-theme="notte"] :is(.card,.topbar,.bottom-nav,dialog,input,select,textarea,.energy-ring > div) { background:#223631; color:#edf5f1; border-color:var(--line); }
:root[data-theme="notte"] :is(.muted,label,.bottom-nav button) { color:#c9dbd4; }
:root[data-theme="notte"] :is(.secondary,.entry-selected,.macro span) { background:#304c47; color:#edf5f1; }
:root[data-theme="notte"] :is(.pill,.badge,.profile-add .profile-avatar) { color:#d4eee1; }
.theme-options { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-option { display: inline-flex; gap: 6px; align-items: center; }
.theme-option[aria-pressed="true"] { outline: 2px solid var(--green); outline-offset: 1px; }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); }