.m3ga-site-main--account { background: #f4f6f9; } .m3ga-account-shell, .m3ga-auth-shell { --account-navy: #0b2545; --account-blue: #3155d9; --account-text: #1d2a38; --account-muted: #647181; --account-border: #dce3ea; --account-soft: #f4f6f9; --account-white: #fff; --account-success: #277a4b; color: var(--account-text); } .m3ga-account-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block-end: 32px; } .m3ga-account-header h2 { margin-block: 0 8px; font-size: clamp(2rem, 1.65rem + 1.4vw, 3.25rem); } .m3ga-account-header p:last-child { max-inline-size: 680px; margin-block: 0; color: var(--account-muted); } .m3ga-account-eyebrow, .m3ga-account-card__label { margin-block: 0 8px; color: var(--account-blue); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .m3ga-account-user-chip { display: flex; align-items: center; gap: 12px; min-inline-size: 260px; padding: 12px 16px; border: 1px solid var(--account-border); border-radius: 12px; background: var(--account-white); } .m3ga-account-user-chip img { border-radius: 50%; } .m3ga-account-user-chip span, .m3ga-account-user-chip small { display: block; min-inline-size: 0; } .m3ga-account-user-chip small { overflow: hidden; color: var(--account-muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; } .m3ga-account-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; gap: 32px; } .m3ga-account-sidebar { position: sticky; inset-block-start: 104px; } .m3ga-account-navigation ul { display: grid; gap: 4px; padding: 8px; margin: 0; border: 1px solid var(--account-border); border-radius: 12px; background: var(--account-white); list-style: none; } .m3ga-account-navigation a { display: flex; align-items: center; min-block-size: 44px; padding: 9px 12px; border-radius: 8px; color: var(--account-text); font-size: 0.9rem; font-weight: 700; line-height: 1.35; text-decoration: none; } .m3ga-account-navigation a:hover, .m3ga-account-navigation a[aria-current="page"] { background: rgb(49 85 217 / 9%); color: var(--account-blue); } .m3ga-account-navigation__signout { padding-block-start: 5px; border-block-start: 1px solid var(--account-border); } .m3ga-account-navigation__signout a { color: #b42318; } .m3ga-account-mobile-nav { display: none; margin-block-end: 24px; } .m3ga-account-panel { min-inline-size: 0; } .m3ga-account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .m3ga-account-grid--overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m3ga-account-card, .m3ga-provider-card, .m3ga-policy-card { border: 1px solid var(--account-border); border-radius: 12px; background: var(--account-white); box-shadow: 0 4px 18px rgb(11 37 69 / 4%); } .m3ga-account-card { padding: 24px; } .m3ga-account-card h3 { margin-block: 4px 10px; font-size: 1.2rem; } .m3ga-account-card p:last-child { margin-block-end: 0; } .m3ga-account-card--wide { margin-block-start: 20px; } .m3ga-account-metric { display: block; margin-block: 8px 14px; color: var(--account-navy); font-size: 2.5rem; line-height: 1; } .m3ga-account-date { display: block; margin-block: 8px 14px; color: var(--account-navy); font-size: 1.25rem; } .m3ga-progress { overflow: hidden; block-size: 8px; margin-block: 16px; border-radius: 999px; background: var(--account-soft); } .m3ga-progress span { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, #3e65f2, #6520cf); } .m3ga-account-section-heading, .m3ga-profile-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .m3ga-profile-summary { justify-content: flex-start; padding-block-end: 24px; border-block-end: 1px solid var(--account-border); } .m3ga-profile-summary__avatar { border-radius: 50%; } .m3ga-profile-summary h3, .m3ga-profile-summary p { margin-block: 0 4px; } .m3ga-profile-summary .m3ga-status { margin-inline-start: auto; } .m3ga-definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; padding: 1px; margin-block: 24px; border-radius: 8px; background: var(--account-border); } .m3ga-definition-grid > div { padding: 16px; background: var(--account-white); } .m3ga-definition-grid dt, .m3ga-policy-card dt { color: var(--account-muted); font-size: 0.78rem; font-weight: 700; } .m3ga-definition-grid dd, .m3ga-policy-card dd { margin: 4px 0 0; font-weight: 700; } .m3ga-account-stack { display: grid; gap: 16px; } .m3ga-provider-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 20px; } .m3ga-provider-card__mark { display: grid; place-items: center; inline-size: 48px; block-size: 48px; overflow: hidden; padding: 8px; border: 1px solid var(--account-border); border-radius: 12px; background: var(--account-white); color: var(--account-white); font-weight: 850; } .m3ga-provider-card__mark img { display: block; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; } .m3ga-provider-card__mark--apple { padding: 0; border-color: #000; background: #000; } .m3ga-provider-card__mark--discord { border-color: #5865f2; background: #5865f2; } .m3ga-provider-card__mark--steam { inline-size: 102px; padding: 0; border: 0; border-radius: 4px; background: transparent; } .m3ga-provider-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-block-size: 48px; } .m3ga-provider-button__mark { display: grid; flex: 0 0 24px; place-items: center; inline-size: 24px; block-size: 24px; } .m3ga-provider-button__mark img { display: block; max-inline-size: 24px; max-block-size: 24px; object-fit: contain; } .m3ga-provider-button--google, .m3ga-provider-button--microsoft { border: 1px solid #747775; background: #fff; color: #1f1f1f; } .m3ga-provider-button--google .m3ga-provider-button__mark, .m3ga-provider-button--google .m3ga-provider-button__mark img { flex-basis: 40px; inline-size: 40px; max-inline-size: 40px; block-size: 40px; max-block-size: 40px; } .m3ga-provider-button--apple { border-color: #000; background: #000; color: #fff; } .m3ga-provider-button--apple .m3ga-provider-button__mark, .m3ga-provider-button--apple .m3ga-provider-button__mark img { flex-basis: 48px; inline-size: 48px; max-inline-size: 48px; block-size: 48px; max-block-size: 48px; } .m3ga-provider-button--discord { border-color: #5865f2; background: #5865f2; color: #fff; } .m3ga-provider-button--steam { min-inline-size: 118px; min-block-size: 51px; padding: 0; border: 0; border-radius: 4px; background: #171a21; } .m3ga-provider-button--steam img { display: block; inline-size: 118px; block-size: 51px; } .m3ga-provider-card h3, .m3ga-provider-card p { margin-block: 0 4px; } .m3ga-provider-card p { color: var(--account-muted); font-size: 0.875rem; } .m3ga-policy-card { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.5fr) auto; align-items: center; gap: 24px; padding: 22px; } .m3ga-policy-card h3, .m3ga-policy-card p { margin-block: 0 6px; } .m3ga-policy-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; } .m3ga-status { display: inline-flex; align-items: center; min-block-size: 28px; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; line-height: 1.2; white-space: nowrap; } .m3ga-status::before { inline-size: 7px; block-size: 7px; margin-inline-end: 6px; border-radius: 50%; background: currentcolor; content: ""; } .m3ga-status--neutral { background: #eef1f5; color: #506070; } .m3ga-status--success { background: #e9f7ef; color: var(--account-success); } .m3ga-account-button, .m3ga-account-button:visited, .m3ga-auth-card input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: 8px; background: var(--account-blue); color: var(--account-white); font-weight: 750; text-decoration: none; } .m3ga-account-button--disabled { border-color: var(--account-border); background: var(--account-soft); color: var(--account-muted); cursor: not-allowed; } .m3ga-account-button--secondary { border-color: var(--account-border); background: var(--account-white); color: var(--account-navy); } .m3ga-account-button--full { inline-size: 100%; } .m3ga-account-form { display: grid; gap: 16px; margin-block-start: 24px; } .m3ga-account-form p, .m3ga-form-grid p { margin: 0; } .m3ga-account-form label, .m3ga-inline-form label, .m3ga-form-grid label { display: grid; gap: 6px; color: var(--account-navy); font-size: 0.875rem; font-weight: 750; } .m3ga-account-form input, .m3ga-account-form select, .m3ga-account-form textarea, .m3ga-inline-form input, .m3ga-form-grid input, .m3ga-form-grid select, .m3ga-form-grid textarea { inline-size: 100%; min-block-size: 44px; padding: 9px 12px; border: 1px solid var(--account-border); border-radius: 8px; background: var(--account-white); color: var(--account-text); font: inherit; } .m3ga-account-form textarea, .m3ga-form-grid textarea { min-block-size: 120px; resize: vertical; } .m3ga-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .m3ga-form-grid__wide { grid-column: 1 / -1; } .m3ga-inline-form { display: flex; align-items: end; gap: 10px; } .m3ga-inline-form label span { font-size: 0.75rem; } .m3ga-inline-form input { max-inline-size: 180px; } .m3ga-account-flash { padding: 14px 18px; margin-block-end: 24px; border: 1px solid; border-radius: 8px; font-weight: 700; } .m3ga-account-flash--success { border-color: #add9c0; background: #e9f7ef; color: #185c36; } .m3ga-account-flash--error { border-color: #f3b8b3; background: #fff0ef; color: #8f1d14; } .m3ga-event-list { display: grid; gap: 0; padding: 0; margin: 16px 0 0; list-style: none; } .m3ga-event-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; min-block-size: 52px; border-block-start: 1px solid var(--account-border); } .m3ga-event-list time { color: var(--account-muted); font-size: 0.8rem; } .m3ga-preferences { display: grid; gap: 0; } .m3ga-preferences > label { display: flex; align-items: flex-start; gap: 14px; padding-block: 18px; border-block-end: 1px solid var(--account-border); } .m3ga-preferences input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; } .m3ga-preferences span, .m3ga-preferences small { display: block; } .m3ga-preferences small { margin-block-start: 3px; color: var(--account-muted); } .m3ga-preferences button { justify-self: start; margin-block-start: 22px; } .m3ga-policy-accept { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; padding-block-start: 16px; border-block-start: 1px solid var(--account-border); font-weight: 700; } .m3ga-policy-accept input { inline-size: 20px; block-size: 20px; } .m3ga-table-scroll { overflow-x: auto; } .m3ga-table-scroll table { inline-size: 100%; border-collapse: collapse; } .m3ga-table-scroll th, .m3ga-table-scroll td { padding: 12px; border-block-end: 1px solid var(--account-border); text-align: start; } .m3ga-auth-divider { display: flex; align-items: center; gap: 12px; margin-block: 20px; color: var(--account-muted); font-size: 0.8rem; text-transform: uppercase; } .m3ga-auth-divider::before, .m3ga-auth-divider::after { flex: 1; block-size: 1px; background: var(--account-border); content: ""; } .m3ga-auth-card__content > form + form { margin-block-start: 12px; } .m3ga-account-notice { padding: 18px 20px; margin-block-start: 20px; border: 1px solid rgb(49 85 217 / 22%); border-inline-start: 4px solid var(--account-blue); border-radius: 8px; background: rgb(49 85 217 / 5%); } .m3ga-account-notice p { margin-block: 4px 0; } .m3ga-auth-shell { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr); overflow: hidden; max-inline-size: 960px; min-block-size: 580px; margin-inline: auto; border: 1px solid var(--account-border, #dce3ea); border-radius: 18px; background: #fff; box-shadow: 0 22px 60px rgb(11 37 69 / 12%); } .m3ga-auth-brand { display: grid; place-content: center; background: linear-gradient(145deg, #3e65f2, #6520cf); color: #fff; font-size: clamp(4rem, 8vw, 7.5rem); font-weight: 900; letter-spacing: -0.09em; line-height: 0.7; text-align: center; } .m3ga-auth-card { align-self: center; padding: clamp(32px, 7vw, 72px); } .m3ga-auth-card h2 { margin-block: 0 16px; } .m3ga-auth-card__content { margin-block-start: 28px; } .m3ga-auth-card form p { margin-block: 0 18px; } .m3ga-auth-card form label { display: block; margin-block-end: 6px; color: var(--account-navy, #0b2545); font-weight: 750; } .m3ga-auth-card input[type="text"], .m3ga-auth-card input[type="password"] { inline-size: 100%; min-block-size: 48px; padding: 10px 13px; border: 1px solid var(--account-border, #dce3ea); border-radius: 8px; } .m3ga-auth-links { font-size: 0.9rem; } @media (max-width: 1024px) { .m3ga-account-header { align-items: flex-start; } .m3ga-account-layout { grid-template-columns: 220px minmax(0, 1fr); } .m3ga-account-grid, .m3ga-account-grid--overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m3ga-provider-card { grid-template-columns: auto minmax(0, 1fr) auto; } .m3ga-provider-card .m3ga-account-button { grid-column: 2 / -1; justify-self: start; } } @media (max-width: 800px) { .m3ga-account-header { flex-direction: column; } .m3ga-account-user-chip { inline-size: 100%; } .m3ga-account-sidebar { display: none; } .m3ga-account-mobile-nav { display: block; } .m3ga-account-mobile-nav details { border: 1px solid var(--account-border); border-radius: 10px; background: var(--account-white); } .m3ga-account-mobile-nav summary { min-block-size: 48px; padding: 12px 16px; color: var(--account-navy); font-weight: 750; cursor: pointer; } .m3ga-account-mobile-nav .m3ga-account-navigation { padding: 0 8px 8px; } .m3ga-account-mobile-nav .m3ga-account-navigation ul { border: 0; } .m3ga-account-layout { grid-template-columns: 1fr; } .m3ga-policy-card { grid-template-columns: 1fr; } .m3ga-auth-shell { grid-template-columns: 1fr; min-block-size: auto; } .m3ga-auth-brand { min-block-size: 200px; font-size: 4.5rem; } } @media (max-width: 600px) { .m3ga-account-grid, .m3ga-account-grid--overview, .m3ga-definition-grid { grid-template-columns: 1fr; } .m3ga-provider-card { grid-template-columns: auto minmax(0, 1fr); } .m3ga-provider-card .m3ga-status, .m3ga-provider-card .m3ga-account-button { grid-column: 1 / -1; justify-self: start; } .m3ga-profile-summary { align-items: flex-start; flex-wrap: wrap; } .m3ga-profile-summary .m3ga-status { margin-inline-start: 0; } .m3ga-form-grid { grid-template-columns: 1fr; } .m3ga-form-grid__wide { grid-column: auto; } .m3ga-inline-form { align-items: stretch; flex-direction: column; } .m3ga-inline-form input { max-inline-size: none; } .m3ga-event-list li { grid-template-columns: 1fr auto; padding-block: 12px; } .m3ga-event-list time { grid-column: 1 / -1; } } .m3ga-avatar-fallback { display: inline-grid; flex: 0 0 var(--m3ga-avatar-size, 48px); place-items: center; inline-size: var(--m3ga-avatar-size, 48px); block-size: var(--m3ga-avatar-size, 48px); border-radius: 50%; background: linear-gradient(135deg, #3155d9, #6520cf); color: #fff; font-size: calc(var(--m3ga-avatar-size, 48px) * 0.34); font-weight: 800; letter-spacing: 0.02em; } .m3ga-account-user-chip .m3ga-avatar-fallback, .m3ga-profile-summary .m3ga-avatar-fallback { display: inline-grid; place-items: center; }