.account-main { min-height: 75vh; padding-block: 40px 64px; }
.account-heading { margin-bottom: 28px; overflow-wrap: anywhere; }
.account-heading h1 { font-size: clamp(28px, 4vw, 38px); margin: 8px 0 16px; }
.account-heading .eyebrow { color: #bd94ef; letter-spacing: 2px; font-size: 12px; }
.account-heading strong { font-size: 18px; }
.account-heading p, .account-muted { color: var(--muted); }
.account-navigation { display: flex; overflow-x: auto; gap: 6px; border-bottom: 1px solid var(--border); padding: 5px 4px 12px; margin-bottom: 28px; }
.account-navigation [role=tablist] { display: flex; gap: 6px; }
.account-navigation button, .account-navigation a { flex-shrink: 0; white-space: nowrap; min-height: 46px; padding: 12px 18px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #c7c7c7; }
.account-navigation button:hover, .account-navigation a:hover { background: #1b1721; color: white; }
.account-navigation [aria-selected=true] { background: #2c1c40; border-color: #8550cd; color: #dbbfff; }
.account-main [role=tabpanel] { min-width: 0; }
.account-main h2 { margin-bottom: 10px; }
.account-stats, .account-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block: 24px; }
.account-stats article, .account-grid article, .account-profile { border: 1px solid var(--border); background: var(--surface); padding: 22px; border-radius: 12px; overflow-wrap: anywhere; }
.account-stats p { color: #bcb4c6; }
.account-stats strong { display: block; font-size: 34px; color: #c599ff; margin-top: 16px; }
.account-empty { padding: 40px 24px; border: 1px dashed #38303f; border-radius: 12px; color: var(--muted); margin-top: 24px; }
.account-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; margin-top: 24px; }
.account-main table { width: 100%; border-collapse: collapse; text-align: left; min-width: 920px; background: var(--surface); }
.account-main caption { text-align: left; padding: 16px; }
.account-main th, .account-main td { padding: 16px; border-bottom: 1px solid var(--border); }
.account-main th { color: #beb4ca; font-size: 12px; }
.account-main td { max-width: 280px; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-main .button { min-height: 44px; border-radius: 6px; }
.account-main button:disabled { opacity: .6; cursor: wait; }
.account-status { display: inline-block; border-radius: 20px; padding: 5px 10px; background: #27202f; color: #d3b4fa; }
.account-status[data-status=paid] { background: #173127; color: #9be0ba; }
.account-status[data-status=cancelled], .account-status[data-status=refunded] { background: #302727; color: #e0b7b7; }
.account-profile { max-width: 600px; margin-block: 24px; }
.account-profile dt { color: var(--muted); }
.account-profile dd { margin: 4px 0 20px; }
.account-main #change-password + p { margin-top: 16px; }
#user-message { padding: 16px; border: 1px solid #8550cd; border-radius: 8px; background: #21172d; margin-bottom: 20px; overflow-wrap: anywhere; }
.account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-grid img, .account-image-fallback { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; margin-bottom: 16px; background: #241a31; }
.account-image-fallback { display: grid; place-items: center; color: #c599ff; }
.account-grid p { margin: 12px 0; color: var(--muted); }
#order-detail { margin-block: 20px; overflow-wrap: anywhere; }
#order-detail p { margin-block: 10px; }
@media (max-width: 850px) { .account-stats, .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .account-main { padding-top: 28px; } .account-stats { gap: 10px; } .account-stats article { padding: 16px; } .account-grid { grid-template-columns: minmax(0, 1fr); } .account-stats p { min-height: 42px; } }