.account-shell { max-width: 760px; background: #fff; }
.account-header { padding-bottom: 20px; }
.account-main { padding: 0 15px 26px; }
.profile { position: relative; display: flex; align-items: center; gap: 14px; margin-top: -1px; padding: 12px; border-radius: 16px; background: linear-gradient(120deg, #f1e4ff, #ead7f9); box-shadow: 0 3px 8px #3a0c4d15; }
.profile-avatar { position: relative; flex: none; width: clamp(86px, 24vw, 155px); aspect-ratio: 1; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border: 4px solid white; border-radius: 50%; }
.profile-avatar button { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 33px; height: 33px; padding: 6px; border: 2px solid white; border-radius: 50%; color: white; background: linear-gradient(#ff9900, #ff4433); }
.profile-avatar button svg { width: 20px; height: 20px; }
.profile-details { min-width: 0; flex: 1; }
.profile-name { display: flex; align-items: center; gap: 5px; padding-right: 27px; }
.profile-name h2 { margin: 0; font-size: clamp(16px, 4vw, 25px); line-height: 1.1; }
.verified svg { width: 21px; height: 21px; fill: #118ee8; stroke: #118ee8; }
.verified svg path + path { fill: none; stroke: white; stroke-width: 2.4; }
.profile-details p { margin: 5px 0 0; font-size: clamp(12px, 3vw, 16px); line-height: 1.25; }
.profile-country, .profile-phone { display: flex; align-items: center; gap: 6px; }
.mali-flag { width: 22px; height: 14px; border-radius: 3px; background: linear-gradient(to right, #08a438 0 33.33%, #f9df11 33.33% 66.66%, #e52322 66.66%); }
.profile-phone svg { width: 18px; height: 18px; }
.edit-profile { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 7px; padding: 5px 9px; border: 1px solid #ff6d2c; border-radius: 24px; color: #f36627; background: white; font-size: clamp(10px, 2.5vw, 14px); font-weight: 700; }
.edit-profile svg { width: 15px; height: 15px; }
.profile-arrow { position: absolute; top: 16px; right: 0; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 24px 0 0 24px; color: #f66b2b; background: #ffffffc9; }
.profile-arrow svg { width: 23px; height: 23px; }
.demo-disclaimer { margin: 5px 2px; color: #6d6271; font-size: 10px; }
.stats-grid, .services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.stats-grid button, .services-grid button { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 3px; border: 1px solid #efedef; border-radius: 12px; color: #171316; background: #fff; box-shadow: 0 2px 4px #00000012; text-align: center; }
.stats-grid button { min-height: 78px; font-size: clamp(11px, 2.9vw, 15px); }
.stats-grid strong { font-size: 20px; line-height: 1; }
.stats-grid svg, .services-grid svg, .order-card > svg { width: 30px; height: 30px; stroke-width: 2.2; }
.stat-orders { color: #ff8512; } .stat-favorites { color: #f82261; fill: currentColor; } .stat-rating { color: #ffb526; fill: currentColor; }
.account-section { margin-top: 17px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 10px; }
.section-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: clamp(19px, 5vw, 25px); letter-spacing: -.5px; }
.section-heading h2 svg { width: 25px; height: 25px; color: #7600a6; }
.see-all { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: #7800a3; background: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.see-all svg { width: 18px; height: 18px; }
.orders-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.order-card { position: relative; display: flex; min-width: 0; min-height: 74px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 9px 3px; border: 0; border-radius: 12px; color: #171316; font-size: clamp(10px, 2.65vw, 14px); line-height: 1.15; text-align: center; box-shadow: 0 2px 4px #00000012; }
.to-pay { background: #fcebf1; } .to-pay svg { color: #f52267; }
.preparing { background: #fff1e5; } .preparing svg { color: #f88a09; }
.shipping { background: #f2eafb; } .shipping svg { color: #6500c7; }
.delivered { background: #ebf9ea; } .delivered svg { color: #09ac4d; }
.order-count { position: absolute; top: -6px; right: 0; display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 4px; border-radius: 50%; color: white; background: #ef0c16; font-size: 12px; font-weight: 700; }
.services-grid button { min-height: 77px; font-size: clamp(11px, 2.8vw, 15px); }
.services-grid button:nth-child(1) svg { color: #f52267; fill: currentColor; }
.services-grid button:nth-child(2) svg { color: #ff8b0b; }
.services-grid button:nth-child(3) svg, .services-grid button:nth-child(5) svg { color: #6d00bc; }
.services-grid button:nth-child(4) svg { color: #ffb522; fill: currentColor; }
.services-grid button:nth-child(6) svg { color: #ff7810; }
.settings-card { padding: 0 12px; border: 1px solid #efedef; border-radius: 12px; box-shadow: 0 2px 4px #00000012; }
.settings-card button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 49px; padding: 9px 2px; border: 0; color: #171316; background: white; font-size: clamp(12px, 3vw, 16px); text-align: left; }
.settings-card button + button { border-top: 1px solid #eceaec; }
.settings-card button > svg { flex: none; width: 22px; height: 22px; }
.settings-card .chevron { width: 18px; height: 18px; margin-left: auto; }
.bottom-nav a[aria-current="page"] { border-radius: 18px; background: linear-gradient(#ff9a08, #ff4439); }
.account-dialog { width: min(90vw, 380px); padding: 24px; border: 0; border-radius: 16px; color: #25172a; box-shadow: 0 10px 40px #0005; }
.account-dialog::backdrop { background: #16031b99; }
.account-dialog h2 { margin: 0 30px 12px 0; font-size: 21px; }
.account-dialog p { line-height: 1.45; }
.dialog-close { float: right; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f5eff5; font-size: 24px; }
#dialog-ok { padding: 8px 18px; border: 0; border-radius: 20px; color: white; background: #f87500; font-weight: 700; }
@media (max-width: 340px) { .account-main { padding-right: 10px; padding-left: 10px; } .profile { gap: 9px; padding: 9px; } .profile-name h2 { font-size: 15px; } .orders-grid, .services-grid { gap: 5px; } }