.profile-header-inner { grid-template-columns: 1fr auto 1fr; }
.profile-nav { display: flex; align-items: center; gap: 22px; color: #667085; font-size: .92rem; font-weight: 700; }
.profile-nav a { text-decoration: none; }
.profile-nav a:hover { color: var(--primary); }
.profile-nav span { color: var(--primary); }
.compact-button { min-height: 42px; padding: 0 16px; justify-self: end; }
.profile-shell { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 54px 0 80px; }
.profile-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin-bottom: 30px; }
.profile-avatar { display: grid; place-items: center; width: 78px; height: 78px; color: #fff; background: linear-gradient(145deg, var(--primary), var(--purple)); border-radius: 24px; box-shadow: 0 16px 36px rgba(51,87,214,.2); }
.profile-avatar svg { width: 42px; height: 42px; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.profile-hero h1 { margin: 7px 0 5px; color: #172033; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.045em; }
.profile-hero p:last-child { margin: 0; color: var(--muted); }
.session-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; color: #11654f; background: #edfaf6; border: 1px solid #bdebdc; border-radius: 999px; font-size: .78rem; font-weight: 750; }
.session-badge span { width: 8px; height: 8px; background: #20a47e; border-radius: 50%; box-shadow: 0 0 0 4px rgba(32,164,126,.12); }
.profile-layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.45fr); gap: 24px; align-items: start; }
.profile-summary, .profile-card { background: rgba(255,255,255,.96); border: 1px solid var(--panel-border); border-radius: 22px; box-shadow: 0 20px 60px rgba(28,45,82,.08); }
.profile-summary { padding: 26px; }
.profile-summary h2, .profile-card h2 { margin: 0; color: #172033; }
.profile-summary dl { display: grid; gap: 0; margin: 20px 0; }
.profile-summary dl div { display: grid; gap: 5px; padding: 15px 0; border-bottom: 1px solid #edf0f5; }
.profile-summary dt { color: #7a8495; font-size: .76rem; font-weight: 700; }
.profile-summary dd { margin: 0; color: #273142; font-weight: 750; overflow-wrap: anywhere; }
.updates-pill { display: inline-flex; padding: 5px 9px; color: #11654f; background: #edfaf6; border-radius: 999px; font-size: .75rem; }
.updates-pill.expired { color: #9d2940; background: #fff1f3; }
.privacy-note { margin: 20px 0 0; padding: 14px; color: #667085; background: #f7f9fc; border-radius: 12px; font-size: .76rem; line-height: 1.55; }
.profile-card { padding: clamp(26px, 5vw, 42px); }
.profile-card header > p:last-child { margin: 8px 0 0; color: var(--muted); }
.profile-card h2 { margin-top: 8px; font-size: 1.7rem; }
.profile-form { display: grid; gap: 21px; margin-top: 30px; }
.photo-picker { margin: 0; padding: 0; border: 0; }
.photo-picker legend { margin-bottom: 10px; color: #273142; font-weight: 750; }
.photo-picker-row { display: flex; align-items: center; gap: 14px; }
.photo-preview { display: grid; place-items: center; flex: 0 0 auto; width: 68px; height: 68px; overflow: hidden; color: #fff; background: linear-gradient(145deg, var(--primary), var(--purple)); border-radius: 50%; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview svg { width: 32px; height: 32px; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-button, .photo-remove { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 750; }
.photo-button { color: var(--primary); background: #fff; border: 1px solid #9db0f4; }
.photo-remove { color: #a12d43; background: #fff; border: 1px solid #efb6c1; }
.photo-button:hover, .photo-remove:hover { background: #f7f9fc; }
.photo-actions [aria-disabled="true"] { cursor: wait; opacity: .55; pointer-events: none; }
.avatar-picker { margin: 0; padding: 0; border: 0; }
.avatar-picker legend { margin-bottom: 10px; color: #273142; font-weight: 750; }
.avatar-options { display: flex; flex-wrap: wrap; gap: 9px; }
.avatar-option { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; color: #4b5870; background: #f7f9fc; border: 1px solid #dce2ec; border-radius: 13px; cursor: pointer; transition: .16s ease; }
.avatar-option:hover { color: var(--primary); border-color: #9db0f4; transform: translateY(-1px); }
.avatar-option.selected { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px rgba(51,87,214,.2); }
.avatar-option svg { width: 25px; height: 25px; }
.profile-form input[readonly] { color: #667085; background: #f5f7fa; cursor: not-allowed; }
.profile-form .primary-button { justify-self: start; min-width: 190px; }
.profile-sync-note { display: flex; align-items: center; gap: 12px; margin-top: 3px; padding: 14px 16px; color: #475467; background: #f7f9fc; border: 1px solid #e6eaf1; border-radius: 14px; }
.profile-sync-note > span:last-child { display: grid; gap: 2px; }
.profile-sync-note strong { color: #273142; font-size: .82rem; }
.profile-sync-note small { color: #667085; font-size: .73rem; line-height: 1.45; }
.profile-sync-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; color: var(--primary); background: #eaf0ff; border-radius: 10px; font-size: 1.35rem; font-weight: 800; }
.profile-card .status { margin: 20px 0 -5px; }
.device-history { margin-top: 30px; padding-top: 24px; border-top: 1px solid #e1e6ef; }
.device-history-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.device-history-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--primary); background: #eaf0ff; border-radius: 12px; }
.device-history-icon svg { width: 23px; height: 23px; }
.device-history-heading { display: grid; gap: 3px; }
.device-history-heading strong { color: #172033; font-size: 1.06rem; }
.device-history-heading small { color: var(--muted); font-size: .76rem; }
.device-history-count { min-width: 28px; padding: 5px 9px; color: var(--primary); background: #eaf0ff; border-radius: 999px; font-size: .72rem; font-weight: 850; text-align: center; }
.device-refresh { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--primary); background: transparent; border: 0; border-radius: 11px; cursor: pointer; font-size: 1.35rem; font-weight: 800; }
.device-refresh:hover { background: #eef3ff; }
.device-refresh:focus-visible { outline: 3px solid rgba(51,87,214,.25); outline-offset: 2px; }
.device-refresh:disabled { cursor: wait; opacity: .5; }
.device-history-status { margin-top: 14px; padding: 18px; color: var(--muted); background: #f7f9fc; border: 1px solid #e2e7f0; border-radius: 16px; font-size: .8rem; text-align: center; }
.device-history-status:empty { display: none; }
.device-history-list { display: grid; gap: 10px; margin-top: 14px; }
.device-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px; background: #f7f9fc; border: 1px solid #e1e6ef; border-radius: 16px; }
.device-product-image { display: grid; place-items: center; width: 78px; height: 72px; padding: 5px; overflow: hidden; background: linear-gradient(145deg, #eef3ff, #fff); border: 1px solid #dce5f5; border-radius: 13px; }
.device-product-image img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(23,32,51,.14)); }
.device-card-body { min-width: 0; }
.device-card-title-row { display: flex; align-items: center; gap: 8px; }
.device-card-title { min-width: 0; margin: 0; color: #172033; font-size: .88rem; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-card-state { flex: 0 0 auto; padding: 3px 7px; color: #11654f; background: #e5f7f1; border-radius: 999px; font-size: .58rem; font-weight: 900; letter-spacing: .03em; }
.device-card-state.registered { color: #667085; background: #e9edf3; }
.device-card-id { margin: 6px 0 0; color: #667085; font-size: .72rem; overflow-wrap: anywhere; }
.device-card-id strong { color: #344054; }
.device-card-id code { color: #172033; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; font-weight: 750; }
.device-card-meta { margin: 5px 0 0; color: #667085; font-size: .67rem; line-height: 1.45; }
.device-product-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.device-product-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; color: #475467; background: #edf2ff; border: 1px solid #dbe4fb; border-radius: 999px; font-size: .61rem; font-weight: 750; }
.device-product-chip i { display: inline-block; width: 8px; height: 8px; border: 1px solid rgba(23,32,51,.14); border-radius: 50%; }
.device-copy { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--primary); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.device-copy:hover { background: #eaf0ff; }
.device-copy svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .profile-header-inner { grid-template-columns: 1fr auto; }
  .profile-nav { display: none; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: auto 1fr; }
  .session-badge { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) {
  .profile-shell { width: calc(100% - 24px); padding-top: 34px; }
  .profile-header-inner .header-brand-text { display: none; }
  .profile-avatar { width: 62px; height: 62px; border-radius: 18px; }
  .profile-summary, .profile-card { border-radius: 18px; }
  .profile-form .primary-button { width: 100%; }
  .profile-sync-note { align-items: flex-start; }
  .device-history-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .device-history-count { display: none; }
  .device-card { grid-template-columns: auto minmax(0, 1fr); }
  .device-copy { grid-column: 2; justify-self: end; margin-top: -38px; }
}