.account-page {
  min-height: 100vh;
  background: radial-gradient(circle at 50% -10%, rgba(39, 78, 121, .72), transparent 42%), linear-gradient(180deg, rgba(6, 17, 30, .4), #07101a 70%), url('../img/ruedas/fondonawal.avif') center / cover fixed;
}

body.account-page > main.account-main:first-child {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 32px 20px;
}

body.account-page > main.account-main:first-child > .account-panel {
  width: min(560px, 100%);
  margin: 0 auto !important;
}

.account-header { position: relative; }
.account-nav-active { color: #ffe89a !important; }
.account-user-menu { position: relative; margin-left: 4px; }
.account-user-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 8px; border: 0; border-radius: 999px; color: #fff; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.account-user-trigger:hover, .account-user-trigger:focus-visible { background: rgba(255,255,255,.1); }
.account-user-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #f2c85b; border-radius: 50%; color: #f2c85b; background: #126b88; }
.account-user-avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.account-user-dropdown { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; width: 238px; overflow: hidden; border: 1px solid rgba(132,181,222,.3); border-radius: 10px; background: #fff; box-shadow: 0 16px 32px rgba(0,0,0,.28); }
.account-user-summary { display: grid; gap: 2px; padding: 14px 16px; border-bottom: 1px solid #e5e9ed; color: #102b43; }
.account-user-summary strong { font-size: .98rem; }
.account-user-summary span { color: #536777; font-size: .82rem; overflow-wrap: anywhere; }
.account-user-dropdown > a, .account-user-dropdown form button { display: block; width: 100%; padding: 12px 16px; border: 0; color: #102b43; background: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.account-user-dropdown > a:hover, .account-user-dropdown form button:hover { background: #f2f6f8; }
.account-user-dropdown form { border-top: 1px solid #e5e9ed; }
.account-user-dropdown form button { color: #c63535; }
.account-main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 54px 0 88px; }
.account-hero { max-width: none; margin: 0 0 28px; padding: 26px 30px; border: 1px solid rgba(132, 181, 222, .24); border-radius: 14px; background: linear-gradient(105deg, rgba(17, 42, 67, .96), rgba(10, 29, 49, .88)); box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.account-profile-header { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, auto) auto; align-items: center; gap: 20px; margin: 0 0 24px; padding: 22px 26px; border: 1px solid rgba(132, 181, 222, .32); border-radius: 14px; background: linear-gradient(105deg, rgba(235, 243, 247, .97), rgba(211, 229, 237, .94)); box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.account-profile-avatar { display: grid; place-items: center; width: 68px; height: 68px; border: 3px solid #f2c85b; border-radius: 50%; color: #f2c85b; background: #126b88; font-size: 1.5rem; box-shadow: 0 0 0 5px rgba(18, 107, 136, .14); }
.account-profile-identity .account-eyebrow { color: #126b88; }
.account-profile-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.account-profile-identity h1 { margin: 2px 0 3px; color: #102b43; font-family: var(--font-maya-display); font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.05; overflow-wrap: anywhere; }
.account-plan-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border: 1px solid rgba(16, 43, 67, .16); border-radius: 999px; color: #536777; background: rgba(255,255,255,.58); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.account-plan-badge::before { content: '\2726'; margin-right: 5px; font-size: .8rem; }
.account-plan-badge.is-premium { border-color: rgba(178, 126, 19, .45); color: #8a5b00; background: rgba(242, 200, 91, .22); }
.account-plan-badge.is-free { color: #536777; }
.account-profile-identity p:last-child { margin: 0; color: #536777; overflow-wrap: anywhere; }
.account-day-summary { display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 18px; border-left: 1px solid rgba(16, 43, 67, .16); }
.account-day-summary img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.account-day-summary strong, .account-day-summary span, .account-day-summary small { display: block; }
.account-day-summary strong { color: #102b43; font-family: var(--font-maya-display); font-size: 1.35rem; }
.account-day-summary span { margin-top: 3px; color: #0088a8; font-size: .88rem; }
.account-day-summary small { margin-top: 5px; color: #536777; font-size: .76rem; }
.account-profile-metrics { display: flex; align-items: stretch; gap: 0; border-left: 1px solid rgba(16, 43, 67, .16); }
.account-profile-metrics div { min-width: 76px; padding: 0 16px; text-align: center; }
.account-profile-metrics strong, .account-profile-metrics span { display: block; }
.account-profile-metrics strong { color: #102b43; font-size: 1.25rem; }
.account-profile-metrics span { margin-top: 4px; color: #536777; font-size: .75rem; }
.account-eyebrow, .account-card-kicker { color: #f2c85b; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.account-hero h1 { margin: 7px 0 5px; color: #fff; font-family: var(--font-maya-display); font-size: clamp(2rem, 5vw, 3.25rem); }
.account-hero p:not(.account-eyebrow) { color: #c8d9e5; font-size: 1.08rem; }
.account-notice { margin: 0 0 22px; padding: 14px 16px; border: 1px solid; border-radius: 8px; }
.account-notice-success { border-color: rgba(81, 205, 139, .55); color: #d4f7df; background: rgba(37, 130, 82, .2); }
.account-notice-error { border-color: rgba(229, 91, 91, .55); color: #ffe1e1; background: rgba(143, 40, 40, .2); }
.account-grid, .account-auth-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: start; gap: 24px; }
.account-profile-sidebar { display: grid; align-content: start; gap: 24px; min-width: 0; }
.account-auth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-card, .account-panel { border: 1px solid rgba(132, 181, 222, .24); border-radius: 12px; background: rgba(13, 29, 47, .94); box-shadow: 0 18px 48px rgba(0,0,0,.24); }
.account-card { min-height: 0; padding: 28px; }
.account-card-primary { border-color: rgba(229, 185, 78, .45); background: linear-gradient(135deg, rgba(27, 55, 83, .96), rgba(12, 29, 48, .96)); }
.account-profile-avatar svg { width: 34px; height: 34px; fill: none; stroke: #f2c85b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.account-card h2, .account-panel h2 { margin: 7px 0 8px; color: #fff; font-family: var(--font-maya-display); font-size: clamp(1.2rem, 2vw, 1.7rem); overflow-wrap: anywhere; }
.account-card p, .account-auth-card p { color: #b9cedc; }
.account-stat { margin-top: 13px; color: #f2c85b; font-family: var(--font-maya-display); font-size: 3.4rem; line-height: 1; }
.account-summary-caption { display: block; margin-top: 12px; color: #a9c0cf; font-size: .88rem; }
.account-summary-cta { margin-top: 18px; font-size: .86rem; }
.account-inline-form { margin-top: 22px; }
.account-quick-actions { display: grid; gap: 10px; margin-top: 20px; }
.account-quick-actions .account-button { width: 100%; min-height: 38px; padding: 8px 12px; font-size: .88rem; }
.account-quick-actions form { margin: 0; }
.account-quick-actions form .account-button { width: 100%; }
.account-panel { padding: 30px; }
.account-grid + .account-panel, .account-panel + .account-panel { margin-top: 24px; }
.account-support-panel { border-color: rgba(132, 181, 222, .24); background: rgba(13, 29, 47, .94); }
.account-profile-sidebar .account-support-panel { margin: 0; }
.account-support-copy { margin: 0; color: #b9cedc; }
.account-support-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.account-support-whatsapp,
.account-support-email { display: inline-flex; align-items: center; gap: 8px; }
.account-support-whatsapp::before,
.account-support-email::before { content: ''; width: 17px; height: 17px; flex: 0 0 17px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.account-support-whatsapp::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 1.5a6 6 0 0 0-5.2 9l-.8 3 3-.8A6 6 0 1 0 8 1.5m0 1a5 5 0 0 1 4.2 7.7l-.2.3.4 1.4-1.4-.4-.3.2A5 5 0 1 1 8 2.5m-2 2c-.2 0-.5.1-.6.4-.2.4-.7 1.1-.7 1.7 0 .6.4 1.3 1.2 2.1.8.8 1.8 1.5 3.1 1.8.7.2 1.3-.2 1.7-.7.1-.2.1-.4 0-.5l-.6-.7c-.2-.2-.3-.2-.5-.1l-.8.4c-.1.1-.2.1-.4 0-.3-.1-.9-.4-1.4-.9-.5-.5-.8-1.1-.9-1.4 0-.2 0-.3.1-.4l.4-.5c.1-.2.1-.3 0-.5l-.6-.7c-.1 0-.3-.1-.5-.1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 1.5a6 6 0 0 0-5.2 9l-.8 3 3-.8A6 6 0 1 0 8 1.5m0 1a5 5 0 0 1 4.2 7.7l-.2.3.4 1.4-1.4-.4-.3.2A5 5 0 1 1 8 2.5m-2 2c-.2 0-.5.1-.6.4-.2.4-.7 1.1-.7 1.7 0 .6.4 1.3 1.2 2.1.8.8 1.8 1.5 3.1 1.8.7.2 1.3-.2 1.7-.7.1-.2.1-.4 0-.5l-.6-.7c-.2-.2-.3-.2-.5-.1l-.8.4c-.1.1-.2.1-.4 0-.3-.1-.9-.4-1.4-.9-.5-.5-.8-1.1-.9-1.4 0-.2 0-.3.1-.4l.4-.5c.1-.2.1-.3 0-.5l-.6-.7c-.1 0-.3-.1-.5-.1'/%3E%3C/svg%3E"); }
.account-support-email::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.5 3.5h13v9h-13zm1 1v.5L8 8.5l5.5-3.5v-.5zm11 1.7L8 9.7 2.5 6.2v5.3h11z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.5 3.5h13v9h-13zm1 1v.5L8 8.5l5.5-3.5v-.5zm11 1.7L8 9.7 2.5 6.2v5.3h11z'/%3E%3C/svg%3E"); }
.account-support-whatsapp { color: #18120a; border-color: #f2c85b; background: #f2c85b; }
.account-support-email { color: #071827; border-color: #a9daf6; background: #a9daf6; }
.account-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(169, 206, 230, .14); }
.account-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 17px; border: 1px solid rgba(148, 207, 245, .48); border-radius: 6px; color: #071827; background: #a9daf6; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.account-button:hover { filter: brightness(1.08); }
.account-button-gold { color: #000000; background: #f2c85b; border-color: #f2c85b; }
.account-button-muted { color: #dceaf3; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.account-empty { display: grid; gap: 10px; padding: 24px; border: 1px dashed rgba(164, 205, 230, .35); border-radius: 10px; color: #c1d5e1; background: rgba(4, 13, 23, .22); }
.account-empty strong { color: #fff; }
.account-empty .account-button { justify-self: start; margin-top: 8px; }
.account-expiry-banner { display: grid; gap: 3px; margin-bottom: 18px; padding: 14px 16px; border-left: 4px solid #57d18c; border-radius: 7px; color: #dff8e8; background: rgba(37, 130, 82, .18); }
.account-expiry-banner strong { color: #fff; }
.account-expiry-banner span { color: #b9dcca; font-size: .9rem; }
.account-purchase-list { display: grid; gap: 10px; }
.account-purchase-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(169, 206, 230, .14); }
.account-purchase-row > div strong, .account-purchase-row > div span { display: block; }
.account-purchase-row > div strong { color: #fff; }
.account-purchase-row > div span, .account-purchase-row small { color: #a9c0cf; }
.account-purchase-row small { grid-column: 1 / -1; overflow-wrap: anywhere; }
.account-purchase-meta { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.account-payment-method { color: #b9cedc; font-size: .8rem; }
.account-purchase-status { padding: 5px 9px; border: 1px solid rgba(229, 185, 78, .4); border-radius: 999px; color: #f2c85b; font-size: .76rem; font-weight: 700; }
.account-purchase-status.is-complete { border-color: rgba(87, 209, 140, .4); color: #8ee5ac; }
.account-empty a:not(.account-button), .account-recovery-note a { color: #f2c85b; }
.account-access-list { display: grid; gap: 10px; }
.account-access-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(169, 206, 230, .14); }
.account-access-row strong, .account-access-row span { display: block; }
.account-access-row strong { color: #f5fbff; }
.account-access-row span, .account-access-row small { color: #a9c0cf; }
.account-access-row small { white-space: nowrap; }
.account-access-dot { width: 10px; height: 10px; border-radius: 50%; background: #57d18c; box-shadow: 0 0 0 5px rgba(87, 209, 140, .14); }
.account-auth-grid { margin-top: 12px; }
.account-auth-card { min-height: 0; align-self: start; }
.account-auth-card-accent { border-color: rgba(229, 185, 78, .42); }
.account-form { display: grid; gap: 15px; margin-top: 24px; }
.account-form label { display: grid; gap: 7px; color: #d7e7f0; font-weight: 600; }
.account-form input { width: 100%; padding: 12px 13px; border: 1px solid rgba(154, 202, 235, .32); border-radius: 6px; color: #fff; background: rgba(4, 13, 23, .72); font: inherit; }
.account-form input:focus { outline: 2px solid rgba(242, 200, 91, .7); outline-offset: 2px; }
.account-password-link { display: inline-block; margin-top: 18px; color: #8fdff3; font-weight: 700; }
.account-recovery-note { margin: 22px 0; color: #a9c0cf; text-align: center; }
.account-recovery-panel { max-width: 760px; margin: 18px auto 0; }
.account-recovery-panel > p { max-width: 650px; color: #b9cedc; }
.account-recovery-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; width: min(100%, 560px); margin: 20px auto 0; }
.account-recovery-form label { display: grid; gap: 7px; color: #d7e7f0; font-weight: 600; }
.account-recovery-form input { width: 100%; padding: 12px 13px; border: 1px solid rgba(154, 202, 235, .32); border-radius: 6px; color: #fff; background: rgba(4, 13, 23, .72); font: inherit; }
.account-recovery-form input:focus { outline: 2px solid rgba(242, 200, 91, .7); outline-offset: 2px; }
.account-recovery-form button:disabled { cursor: wait; opacity: .6; }
.account-recovery-message { grid-column: 1 / -1; margin: 0; padding: 11px 13px; border-radius: 6px; }
.account-recovery-message.is-success { color: #d4f7df; background: rgba(37, 130, 82, .2); }
.account-recovery-message.is-error { color: #ffe1e1; background: rgba(143, 40, 40, .2); }
.account-page .account-card-kicker { font-weight: 700; }
.account-page .account-panel h2,
.account-page .account-card h2 { font-weight: 700; }
.account-page .account-auth-card p,
.account-page .account-card p { font-weight: 400; }
.account-page .account-form label,
.account-page .account-recovery-form label { font-weight: 500; }
.account-page .account-button { font-weight: 700; }
.account-security-panel { background: linear-gradient(135deg, rgba(15, 36, 57, .96), rgba(9, 24, 40, .94)); }
.account-profile-settings { background: linear-gradient(135deg, rgba(18, 43, 67, .96), rgba(11, 28, 46, .94)); }
.account-name-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 16px; }
.account-name-form small { color: #9fb7c7; font-size: .82rem; }
.account-name-form input[readonly] { color: #9fb7c7; background: rgba(255,255,255,.06); cursor: not-allowed; }
.account-name-form .account-button { justify-self: start; }
.account-card .account-name-form { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.account-card .account-name-form .account-button { width: 100%; }
.account-security-panel > h2 { margin-top: 5px; }
.account-security-panel > p { max-width: 680px; margin-bottom: 0; color: #b9cedc; }
.account-security-panel .account-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px; max-width: none; margin-top: 22px; }
.account-security-panel .account-form .account-button { grid-column: 1 / -1; justify-self: start; min-width: 190px; }
.recovery-page .account-card-kicker { font-weight: 700; }
.recovery-page .account-panel h2 { font-weight: 700; }
.recovery-page .account-panel > p { font-weight: 400; }
.recovery-page .account-form label { font-weight: 500; }
.recovery-page .account-button { font-weight: 700; }
.recovery-page .account-recovery-note { font-weight: 400; }
@media (max-width: 760px) {
  .account-main { width: min(100% - 24px, 560px); padding-top: 30px; }
  .account-hero { padding: 22px 20px; border-radius: 11px; }
  .account-profile-header { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 11px; }
  .account-profile-avatar { width: 54px; height: 54px; }
  .account-profile-metrics { grid-column: 1 / -1; justify-content: space-between; width: 100%; padding-top: 14px; border-top: 1px solid rgba(16, 43, 67, .16); border-left: 0; }
  .account-profile-metrics div { flex: 1; min-width: 0; padding: 0 8px; }
  .account-day-summary { grid-column: 1 / -1; padding: 14px 0 0; border-top: 1px solid rgba(16, 43, 67, .16); border-left: 0; }
  .account-day-summary img { width: 50px; height: 50px; }
  .account-security-panel .account-form { grid-template-columns: 1fr; gap: 14px; }
  .account-security-panel .account-form .account-button { grid-column: auto; width: 100%; }
  .account-name-form { grid-template-columns: 1fr; gap: 14px; }
  .account-name-form .account-button { width: 100%; }
  .account-grid, .account-auth-grid { grid-template-columns: 1fr; gap: 18px; }
  .account-card, .account-panel { border-radius: 10px; }
  .account-card { padding: 22px; }
  .account-panel { padding: 22px; }
  .account-profile-avatar svg { width: 29px; height: 29px; }
  .account-grid + .account-panel, .account-panel + .account-panel { margin-top: 18px; }
  .account-auth-card { min-height: auto; }
  .account-panel-heading { align-items: flex-start; flex-direction: column; }
  .account-access-row { grid-template-columns: 12px 1fr; }
  .account-access-row small { grid-column: 2; }
  .account-recovery-form { grid-template-columns: 1fr; }
}