body.account-dashboard { background: #fafafa; color: #1a1a1a; font-family: Satoshi, sans-serif; }
.account-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid #eaecf0; }
.account-header-inner { max-width: 1320px; margin: auto; padding: 18px 28px; display: flex; align-items: center; gap: 48px; }
.account-brand img { width: 128px; height: auto; display: block; }
.account-nav { display: flex; gap: 28px; align-items: center; }
.account-nav a { font-size: 15px; font-weight: 600; color: #667085; text-decoration: none; }
.account-nav a:hover,.account-nav a.is-active { color: #f03f00; }
.account-header-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.account-currency { border: 1px solid #eaecf0; border-radius: 100px; padding: 7px 12px; font-size: 12px; color: #667085; }
.account-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #344054; white-space: nowrap; }
.account-user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #c63800; background: #fff0e8; font-weight: 700; }
.account-menu-link { display: block; padding: 12px 18px; width: 100%; color: #344054; text-align: left; font-size: 14px; text-decoration: none; background: #fff; border: 0; }
.account-menu-link:hover { background: #fff5ef; }
.account-signout { color: #c63800; }
.account-header details > div { min-width: 180px; right: 0; background: #fff; }
.account-main { min-height: 75vh; }
.account-container { max-width: 1264px; margin: 0 auto; padding: 42px 28px 64px; }
.account-announcements:empty { display: none; }
.account-announcements { max-width: 1264px; margin: auto; padding: 0 28px; }
.account-announcements > :first-child { margin-top: 20px; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.dashboard-eyebrow { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; color: #d53b00; }
.dashboard-heading h1 { font-size: clamp(25px, 3vw, 34px); font-weight: 700; letter-spacing: -1px; margin: 8px 0; }
.greeting-dot { color: #f03f00; }
.dashboard-heading p { color: #667085; font-size: 14px; margin: 0; }
.dashboard-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; border-radius: 100px; padding: 13px 22px; font-size: 13px; font-weight: 700; text-decoration: none; color: #fff; background: #f03f00; border: 1px solid #f03f00; }
.dashboard-button:hover { background: #d93900; color: #fff; }
.dashboard-button.secondary { background: #fff; color: #344054; border-color: #e4e7ec; }
.dashboard-button.secondary:hover { background: #fff5ef; border-color: #ffc6af; }
.dashboard-hero { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; overflow: hidden; padding: 40px 44px; min-height: 300px; background: #fff1e9; border-radius: 24px; border: 1px solid #ffdfcf; margin-bottom: 24px; }
.dashboard-hero h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -1.5px; margin: 14px 0; }
.dashboard-hero p { max-width: 365px; color: #667085; font-size: 14px; line-height: 1.7; margin-bottom: 22px; }
.dashboard-hero-art { position: relative; min-height: 260px; display: grid; place-items: center; }
.art-ring { position: absolute; border: 1px solid #ffc7ad; border-radius: 50%; width: 290px; height: 290px; }
.ring-two { width: 365px; height: 365px; }
.art-wallet { position: relative; width: 235px; padding: 28px; border-radius: 22px; background: #fff; transform: rotate(-8deg); box-shadow: 0 18px 50px #9f350b12; border: 1px solid #ffdfd0; }
.art-wallet > span:first-child { font-size: 9px; font-weight: 700; color: #98a2b3; letter-spacing: 1.5px; }
.art-wallet strong { display: block; font-size: 28px; line-height: 1.2; letter-spacing: -.8px; margin: 22px 0 28px; }
.art-wallet-arrow { display: grid; place-items: center; width: 38px; height: 38px; background: #f03f00; color: #fff; border-radius: 50%; font-size: 24px; }
.art-spark { position: absolute; font-size: 64px; color: #f03f00; right: 24px; top: 6px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-bottom: 38px; }
.dashboard-stat { padding: 25px; border: 1px solid #eaecf0; background: #fff; border-radius: 20px; }
.dashboard-stat.balance { border-color: #ffc7ad; }
.dashboard-stat-label { display: flex; justify-content: space-between; color: #667085; font-size: 13px; }
.dashboard-stat-label > span { color: #98a2b3; }
.dashboard-stat strong { display: block; margin: 16px 0 12px; font-size: clamp(24px, 2.5vw, 32px); font-weight: 700; letter-spacing: -.8px; overflow-wrap: anywhere; }
.dashboard-stat a { font-size: 12px; font-weight: 600; color: #d53b00; text-decoration: none; }
.dashboard-stat-note { color: #98a2b3; font-size: 12px; }
.dashboard-section { margin-bottom: 32px; }
.dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dashboard-section-heading h2 { font-size: 19px; font-weight: 700; letter-spacing: -.4px; margin: 0; }
.dashboard-section-heading > span { color: #98a2b3; font-size: 12px; }
.dashboard-section-heading a { color: #d53b00; font-size: 12px; font-weight: 600; text-decoration: none; }
.dashboard-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.dashboard-action { position: relative; padding: 22px; border: 1px solid #eaecf0; background: #fff; border-radius: 20px; text-decoration: none; color: #1a1a1a; transition: border-color .2s, transform .2s; }
.dashboard-action:hover { border-color: #ffb99a; transform: translateY(-2px); color: #1a1a1a; }
.dashboard-action-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ffdfd0; background: #fff5ef; color: #f03f00; border-radius: 13px; font-size: 22px; margin-bottom: 22px; }
.dashboard-action h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.dashboard-action p { font-size: 12px; color: #667085; line-height: 1.65; margin: 0; }
.dashboard-action-arrow { position: absolute; top: 22px; right: 22px; font-size: 18px; color: #98a2b3; }
.dashboard-lower-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 24px; }
.dashboard-surface { background: #fff; border: 1px solid #eaecf0; border-radius: 22px; padding: 26px; }
.dashboard-empty { text-align: center; padding: 24px 16px; }
.dashboard-empty > span { display: grid; place-items: center; margin: 0 auto 16px; background: #f9fafb; width: 48px; height: 48px; border: 1px solid #eaecf0; border-radius: 50%; font-size: 22px; color: #98a2b3; }
.dashboard-empty h3 { font-size: 15px; font-weight: 700; }
.dashboard-empty p { color: #667085; font-size: 13px; max-width: 300px; margin: 12px auto 20px; line-height: 1.7; }
.dashboard-empty a { font-size: 12px; font-weight: 700; color: #d53b00; text-decoration: none; }
.dashboard-help { background: #fffaf6; }
.dashboard-help h2 { font-size: 27px; line-height: 1.15; letter-spacing: -.8px; font-weight: 700; margin-bottom: 16px; }
.dashboard-help p { color: #667085; font-size: 13px; line-height: 1.7; margin-bottom: 24px; }
.dashboard-transaction { display: flex; align-items: center; gap: 14px; border-top: 1px solid #f2f4f7; padding: 18px 0; }
.transaction-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff3ed; color: #f03f00; flex-shrink: 0; }
.dashboard-transaction h3 { font-size: 13px; font-weight: 600; margin: 0 0 5px; }
.dashboard-transaction p { font-size: 11px; color: #98a2b3; margin: 0; }
.transaction-amount { margin-left: auto; text-align: right; font-size: 13px; }
.transaction-amount strong { display: block; }
.transaction-amount.credit strong { color: #067647; }
.transaction-amount span { display: block; color: #98a2b3; font-size: 10px; margin-top: 5px; }
.account-footer { max-width: 1264px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-top: 1px solid #eaecf0; font-size: 12px; color: #98a2b3; }
.account-footer div { display: flex; gap: 20px; }.account-footer a { color: #667085; text-decoration: none; }
.account-mobile-nav { display: none; }.account-flash { max-width: 1208px; margin: 20px auto; background: #ecfdf3; border: 1px solid #abefc6; padding: 16px; border-radius: 16px; color: #067647; }.account-flash-error { background: #fff1ef; color: #b42318; }
/* Keep the existing earner and advertiser tools while sharing the new visual system. */
.account-dashboard .ed-page,.account-dashboard .adv-page,.account-dashboard .ed-shell,.account-dashboard .adv-shell { background: #fafafa !important; }
.account-dashboard .ed-shell,.account-dashboard .adv-shell { max-width: 1264px; padding-top: 36px; }
.account-dashboard .ed-panel,.account-dashboard .adv-panel,.account-dashboard .adv-summary-card,.account-dashboard .adv-table-card { border: 1px solid #eaecf0 !important; border-radius: 22px !important; box-shadow: none !important; }
.account-dashboard .ed-wallet,.account-dashboard .adv-wallet { background: #fff1e9 !important; color: #1a1a1a !important; border-color: #ffdfcf !important; }
.account-dashboard .ed-wallet__balance,.account-dashboard .ed-wallet__earned-value,.account-dashboard .adv-wallet__balance { color: #1a1a1a !important; }
.account-dashboard .ed-wallet__label,.account-dashboard .ed-wallet__earned-label,.account-dashboard .adv-wallet__label { color: #667085 !important; }
.account-dashboard .ed-wallet__divider { border-color: #ffdfcf !important; }
.account-dashboard .ed-wallet__btn--primary,.account-dashboard .adv-wallet__btn--primary { background: #f03f00 !important; color: #fff !important; border-color: #f03f00 !important; border-radius: 100px !important; }
.account-dashboard .ed-wallet__btn--secondary,.account-dashboard .adv-wallet__btn--secondary { background: #fff !important; color: #344054 !important; border: 1px solid #e4e7ec !important; border-radius: 100px !important; }
.account-dashboard .ed-badge,.account-dashboard .adv-badge { background: #fff0e8 !important; color: #f03f00 !important; }
.account-dashboard .ed-action:hover,.account-dashboard .adv-action:hover { border-color: #ffb99a !important; }
@media(max-width:1100px) { .account-header-inner { gap: 24px; }.account-nav { gap: 16px; }.account-user-name { display: none; } }
@media(max-width:767px) {
    .account-header-inner { padding: 14px 20px; }.account-brand img { width: 110px; }.account-nav { display: none; }.account-currency { font-size: 10px; }.account-header-actions { gap: 12px; }
    .account-container { padding: 28px 18px 32px; }.account-announcements { padding: 0 18px; }.dashboard-heading { align-items: flex-start; }.dashboard-heading > a { display: none; }.dashboard-heading h1 { font-size: 25px; }
    .dashboard-hero { grid-template-columns: 1fr; padding: 28px; min-height: auto; }.dashboard-hero h2 { font-size: 38px; }.dashboard-hero-art { display: none; }
    .dashboard-stats { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }.dashboard-stat { padding: 22px; }.dashboard-stat strong { font-size: 30px; margin: 12px 0; }
    .dashboard-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.dashboard-action { padding: 18px; }.dashboard-action-arrow { right: 16px; top: 18px; }.dashboard-section-heading h2 { font-size: 18px; }
    .dashboard-lower-grid { grid-template-columns: 1fr; }.dashboard-surface { padding: 22px; }.dashboard-section-heading > span { display: none; }
    .account-mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; justify-content: space-around; padding: 18px 8px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid #eaecf0; background: #fff; }
    .account-mobile-nav a { color: #667085; text-decoration: none; font-size: 11px; font-weight: 600; }.account-mobile-nav a[aria-current] { color: #f03f00; }
    .account-footer { padding: 24px 18px 95px; gap: 16px; flex-wrap: wrap; }.account-dashboard .ed-shell,.account-dashboard .adv-shell { padding-top: 24px; }
}

.dashboard-recent-submissions { margin-top: 24px; }
.dashboard-submissions-empty { font-size: 13px; color: #667085; padding: 18px 0 4px; margin: 0; }
.dashboard-submissions-empty a { color: #d53b00; text-decoration: none; }
.submission-status { margin-left: auto; font-size: 11px; background: #fff3ed; color: #c63800; padding: 6px 12px; border-radius: 100px; }