#account-profile.account-experience { color: #10284c; font-family: "Crimson Pro", "Tiro Devanagari Sanskrit", Georgia, serif; }
#account-profile .account-breadcrumb { position: static; min-height: 0; display: flex; gap: 10px; align-items: center; color: #7a5331; margin: 4px 0 14px; padding: 0; font-size: .96rem; background: transparent; border: 0; box-shadow: none; }
#account-profile .account-breadcrumb button { border: 0; background: none; color: #173d73; cursor: pointer; font: inherit; }
#account-profile .account-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 12px; padding: 0; background: transparent; color: #10284c; box-shadow: none; }
#account-profile .account-page-heading h1 { color: #76171d; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; }
#account-profile .account-page-heading h1 span { font-size: 1.35rem; }
#account-profile .account-page-heading p { margin-top: 7px; color: #3d4960; }
#account-profile .account-primary, #account-profile .account-danger, #account-profile .account-outline { border-radius: 7px; min-height: 42px; padding: 0 22px; cursor: pointer; font: 600 1rem "Crimson Pro", serif; }
#account-profile .account-primary { border: 1px solid #791119; color: white; background: linear-gradient(90deg, #791119, #9d191e, #791119); }
#account-profile .account-outline { border: 1px solid #c37f51; color: #7a171c; background: #fffaf3; }
#account-profile .account-danger { border: 1px solid #b3212b; color: #a01821; background: #fffaf3; }
#account-profile button[disabled] { opacity: .55; cursor: wait; }

#account-profile .account-feedback { display: none; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 7px; margin: 0 0 13px; }
#account-profile .account-feedback.visible { display: flex; }
#account-profile .account-feedback.success { border: 1px solid #5e9b71; color: #175b30; background: #f1f8f0; }
#account-profile .account-feedback.error { border: 1px solid #d05159; color: #a11722; background: #fff2f0; }

#account-profile .account-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
#account-profile .account-sidebar, #account-profile .account-card { border: 1px solid #ead0ad; border-radius: 12px; background: rgba(255, 251, 244, .94); box-shadow: 0 4px 12px rgba(74, 43, 14, .04); }
#account-profile .account-sidebar { padding: 24px 14px; position: sticky; top: 150px; text-align: center; }
#account-profile .account-avatar { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 11px; border: 2px solid #bd751e; background: #071a38; color: white; display: grid; place-items: center; overflow: hidden; font-size: 2.5rem; }
#account-profile .account-avatar img { width: 100%; height: 100%; object-fit: cover; }
#account-profile .account-sidebar h2 { font-size: 1.3rem; }
#account-profile .account-sidebar > p { color: #536079; word-break: break-word; margin: 3px 0; }
#account-profile .account-signed { color: #1e6c37 !important; }
#account-profile .account-menu { position: static; min-height: 0; display: grid; text-align: left; margin-top: 18px; padding: 0; border: 0; border-top: 1px solid #ead8c2; background: transparent; box-shadow: none; }
#account-profile .account-menu button { border: 0; border-bottom: 1px solid #ead8c2; background: transparent; padding: 11px 8px; color: #213450; cursor: pointer; text-align: left; font: 600 .96rem "Crimson Pro", serif; }
#account-profile .account-menu button:hover { color: #8a171c; background: #fff5e7; }

#account-profile .account-content { min-width: 0; }
#account-profile .account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#account-profile .account-card { padding: 18px; min-width: 0; }
#account-profile .account-card.wide { grid-column: 1 / -1; }
#account-profile .account-card.danger-zone { border-color: #d85c61; }
#account-profile .account-card h2 { color: #781920; font-size: 1.45rem; margin-bottom: 13px; }
#account-profile .account-card h3 { color: #7d2022; font-size: 1.15rem; }
#account-profile .account-card p { color: #465168; line-height: 1.35; }

#account-profile .account-profile-row { display: grid; grid-template-columns: 100px 1fr; gap: 17px; align-items: start; }
#account-profile .account-profile-row .account-avatar { width: 80px; height: 80px; font-size: 2.25rem; }
#account-profile .account-fields { display: grid; gap: 10px; }
#account-profile .account-field label { display: block; color: #293850; font-weight: 600; font-size: .9rem; margin-bottom: 3px; }
#account-profile .account-field input { width: 100%; min-height: 40px; border: 1px solid #d8b987; border-radius: 6px; color: #15335f; background: #fffdfa; padding: 8px 11px; font: .98rem "Crimson Pro", serif; }
#account-profile .account-field input[readonly] { color: #667085; background: #f7f3eb; }
#account-profile .account-inline-note { margin-top: 8px; padding: 7px 10px; border: 1px solid #e5c89d; border-radius: 6px; color: #77502d; font-size: .88rem; }

#account-profile .account-segment { display: grid; grid-template-columns: repeat(3, 1fr); }
#account-profile .account-segment button { min-height: 39px; border: 1px solid #c68a62; background: #fffdfa; color: #79201f; cursor: pointer; font: 600 .98rem "Crimson Pro", serif; }
#account-profile .account-segment button:first-child { border-radius: 6px 0 0 6px; }
#account-profile .account-segment button:last-child { border-radius: 0 6px 6px 0; }
#account-profile .account-segment button.active { background: #871319; color: white; }
#account-profile .account-segment.two { grid-template-columns: repeat(2, 1fr); }
#account-profile .account-setting { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(220px, 1.3fr); gap: 16px; align-items: center; padding: 8px 0; }
#account-profile .account-setting + .account-setting { border-top: 1px solid #efdfca; }
#account-profile .account-setting small { display: block; color: #6e7582; }

#account-profile .account-toggle { justify-self: end; width: 46px; height: 26px; border: 0; border-radius: 20px; background: #c7bca9; padding: 3px; cursor: pointer; }
#account-profile .account-toggle::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: white; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
#account-profile .account-toggle.active { background: #86151a; }
#account-profile .account-toggle.active::after { transform: translateX(20px); }

#account-profile .account-sync-status { display: inline-flex; align-items: center; gap: 6px; color: #1a6333; background: #edf7ec; border: 1px solid #bfd4bd; border-radius: 999px; padding: 5px 9px; font-size: .86rem; float: right; }
#account-profile .account-sync-list { display: grid; gap: 10px; clear: both; margin: 11px 0 14px; }
#account-profile .account-sync-item { display: flex; gap: 10px; align-items: flex-start; }
#account-profile .account-sync-item > span { color: #8b5519; font-size: 1.25rem; }
#account-profile .account-sync-item strong { display: block; }
#account-profile .account-sync-item small { color: #6f7785; }

#account-profile .account-password-grid { display: grid; gap: 8px; }
#account-profile .account-password-grid .account-primary { margin-top: 4px; }
#account-profile .account-provider { border: 1px solid #dfc29a; border-radius: 8px; padding: 14px; display: flex; gap: 12px; align-items: center; }
#account-profile .account-provider b { font-size: 1.4rem; color: #3577d3; }

#account-profile .account-list { display: grid; margin-top: 10px; border-top: 1px solid #ead5b8; }
#account-profile .account-list button, #account-profile .account-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 43px; border: 0; border-bottom: 1px solid #ead5b8; background: transparent; color: #213a64; text-decoration: none; cursor: pointer; font: 600 .95rem "Crimson Pro", serif; text-align: left; }
#account-profile .account-list span small { display: block; color: #707783; font-weight: 400; }

#account-profile .account-signout { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
#account-profile .account-delete-confirm { margin-top: 13px; border-top: 1px solid #edc4bd; padding-top: 13px; }
#account-profile .account-delete-confirm[hidden] { display: none; }
#account-profile .account-delete-confirm label { margin: 12px 0; display: flex; gap: 8px; align-items: flex-start; color: #64272b; }
#account-profile .account-delete-confirm input[type="checkbox"] { width: 18px; height: 18px; accent-color: #99151e; }
#account-profile .account-delete-actions { display: flex; justify-content: flex-end; gap: 9px; }

#account-profile .account-loading { min-height: 380px; display: grid; place-items: center; text-align: center; color: #7f3124; }
#account-profile .account-loading span { width: 44px; height: 44px; border: 3px solid #ead5b4; border-top-color: #8c171c; border-radius: 50%; display: block; margin: 0 auto 12px; animation: account-spin .8s linear infinite; }
@keyframes account-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  #account-profile .account-page-heading { align-items: flex-start; flex-direction: column; }
  #account-profile .account-page-heading .account-primary { width: 100%; }
  #account-profile .account-layout { display: block; }
  #account-profile .account-sidebar { position: static; display: grid; grid-template-columns: 105px 1fr; text-align: left; align-items: center; margin-bottom: 12px; padding: 16px; }
  #account-profile .account-sidebar .account-avatar { grid-row: span 3; margin: 0; }
  #account-profile .account-menu { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  #account-profile .account-grid { grid-template-columns: 1fr; }
  #account-profile .account-card.wide { grid-column: auto; }
}

@media (max-width: 560px) {
  #account-profile .account-breadcrumb { margin-top: 0; }
  #account-profile .account-page-heading h1 { font-size: 1.85rem; }
  #account-profile .account-page-heading h1 span { font-size: 1.05rem; }
  #account-profile .account-sidebar { grid-template-columns: 82px 1fr; }
  #account-profile .account-sidebar .account-avatar { width: 68px; height: 68px; font-size: 1.85rem; }
  #account-profile .account-menu { grid-template-columns: 1fr; }
  #account-profile .account-card { padding: 15px; }
  #account-profile .account-profile-row { grid-template-columns: 70px 1fr; gap: 11px; }
  #account-profile .account-profile-row .account-avatar { width: 64px; height: 64px; font-size: 1.8rem; }
  #account-profile .account-setting { grid-template-columns: 1fr; gap: 8px; }
  #account-profile .account-toggle { justify-self: start; }
  #account-profile .account-signout { align-items: flex-start; flex-direction: column; }
  #account-profile .account-signout .account-danger { width: 100%; }
  #account-profile .account-delete-actions { flex-direction: column; }
  #account-profile .account-delete-actions button { width: 100%; }
}