:root {
  color-scheme: light;
  --ink: #111827;
  --muted: #667085;
  --line: #d9dee7;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #eff6ff;
  --paper: #f7f8fa;
  --white: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { min-height: 100vh; margin: 0; display: grid; grid-template-rows: auto 1fr auto; color: var(--ink); background: var(--paper); letter-spacing: 0; }
header, footer { width: min(100% - 40px, 1120px); margin: 0 auto; display: flex; align-items: center; }
header { height: 72px; gap: 12px; border-bottom: 1px solid #e6e9ef; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; text-decoration: none; }
.identity-mark { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 7px; color: #fff; background: #111827; font-size: 13px; }
.identity-mark.large { width: 48px; height: 48px; border-radius: 8px; font-size: 20px; }
.identity-name { font-size: 15px; }
.header-product { padding-left: 12px; border-left: 1px solid #cfd5df; color: var(--muted); font-size: 13px; }
main { min-width: 0; display: grid; place-items: center; padding: 48px 20px 64px; }
.auth-card { width: min(100%, 470px); padding: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 22px 60px rgba(17, 24, 39, .08); }
.page-login main { background: #f0f4f9; }
.page-signup main, .page-consent main { background: #fff; }
.page-login header, .page-signup header, .page-consent header { border-bottom-color: transparent; }
.page-login footer, .page-signup footer, .page-consent footer { border-top-color: transparent; }
.brand-seal, .app-icon, .avatar, .mini-avatar { display: grid; place-items: center; color: #fff; background: #111827; font-weight: 800; }
.avatar-view { position: relative; overflow: hidden; }
.avatar-view > span { color: inherit; }
.avatar-view img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; }
.brand-seal { width: 42px; height: 42px; margin-bottom: 24px; border-radius: 8px; font-size: 18px; }
.form-brand { margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.form-brand .brand-seal { margin: 0; }
.form-brand .eyebrow { margin: 0; }
.eyebrow { margin: 0 0 9px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 0; }
h1 { margin: 0; font-size: 31px; line-height: 1.2; letter-spacing: 0; }
.lead { margin: 13px 0 27px; color: #596273; line-height: 1.65; }
.button { min-height: 44px; padding: 10px 17px; border: 1px solid transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: transparent; text-decoration: none; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.button.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.button.primary:hover { background: var(--blue-dark); }
.button.secondary { background: #fff; border-color: var(--line); }
.button.secondary:hover { background: #f8fafc; }
.button.quiet { color: var(--muted); background: transparent; border-color: transparent; }
.button.full { width: 100%; }
.fineprint { margin: 18px 0 0; color: #8992a2; font-size: 11px; line-height: 1.55; }
.consent-card { width: min(100%, 520px); }
.consent-brand { margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.consent-link { color: #98a2b3; font-size: 22px; }
.app-icon { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 8px; color: #7a5510; background: #f6cc54; font-size: 19px; }
.signed-user { margin: 24px 0 14px; padding: 13px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.mini-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); }
.signed-user strong, .signed-user span { display: block; }
.signed-user span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.permission { padding: 17px 0; display: flex; gap: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.permission-icon { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 12px; }
.permission strong { font-size: 13px; }
.permission p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.consent-actions, .actions { margin-top: 24px; display: flex; justify-content: flex-end; gap: 9px; }
.consent-actions .button { min-width: 124px; }
.account-card { width: min(100%, 620px); text-align: center; }
.avatar { width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%; background: var(--blue); font-size: 23px; }
.account-card .actions { justify-content: center; flex-wrap: wrap; }
.actions form { margin: 0; }
.avatar-settings { margin: 0 0 22px; padding: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.avatar-settings > p { margin: 9px 0 0; color: #87909f; font-size: 10px; line-height: 1.45; }
.avatar-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.avatar-upload label { min-width: 0; display: grid; gap: 7px; }
.avatar-upload label > span { color: #475467; font-size: 11px; font-weight: 750; }
.avatar-upload input[type="file"] { width: 100%; min-width: 0; color: #667085; font-size: 11px; }
.avatar-upload input[type="file"]::file-selector-button { margin-right: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.avatar-remove { margin-top: 10px; padding: 0; border: 0; color: #b42318; background: transparent; font: inherit; font-size: 10px; cursor: pointer; }
.welcome-card { width: min(100%, 500px); }
.welcome-actions { display: grid; gap: 9px; }
.app-badges { margin: -8px 0 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.app-badges span { padding: 5px 9px; border: 1px solid #cfe0ff; border-radius: 5px; color: #1e4da1; background: var(--blue-soft); font-size: 11px; }
.form-card { width: min(100%, 450px); box-shadow: none; }
.login-card { width: min(100%, 980px); min-height: 500px; padding: 48px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); align-items: start; gap: 64px; border: 0; border-radius: 28px; box-shadow: 0 2px 5px rgba(60, 64, 67, .12), 0 8px 28px rgba(60, 64, 67, .08); }
.login-intro { min-width: 0; display: grid; align-content: start; gap: 28px; }
.login-logo { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 21px; font-weight: 850; }
.login-intro h1 { max-width: 360px; font-size: 39px; line-height: 1.16; }
.login-intro .lead { max-width: 380px; margin: 18px 0 0; color: #4b5565; font-size: 16px; line-height: 1.7; }
.login-controls { min-width: 0; padding-top: 4px; }
.login-panel-title { margin: 0 0 18px; color: #303846; font-size: 16px; font-weight: 700; }
.signup-card { width: min(100%, 520px); }
.provider-stack { display: grid; gap: 9px; }
.provider-button { min-height: 50px; border-color: #c4cad4; border-radius: 999px; color: #202632; background: #fff; }
.provider-button:hover { border-color: #8993a3; background: #f8fafc; }
.github-mark { width: 27px; height: 27px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: #202632; font-size: 9px; font-weight: 900; }
.provider-note { margin: 0; color: #667085; font-size: 13px; line-height: 1.55; }
.auth-divider { margin: 23px 0; display: flex; align-items: center; gap: 12px; color: #87909f; font-size: 12px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; content: ""; background: #e3e7ed; }
.auth-divider span { white-space: nowrap; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { min-width: 0; display: grid; gap: 7px; }
.auth-form label > span { font-size: 12px; font-weight: 700; }
.auth-form label small { color: #87909f; font-size: 10px; }
.auth-form input { width: 100%; min-height: 50px; padding: 11px 14px; border: 1px solid #b9c1cf; border-radius: 13px; color: var(--ink); background: #fff; outline: 0; font: inherit; }
.auth-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.login-card .auth-form .button.primary { min-height: 48px; border-radius: 999px; }
.code-field { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.code-field .button { min-width: 122px; }
.form-links { margin-top: 20px; display: flex; justify-content: space-between; gap: 16px; font-size: 11px; }
.form-links a { color: var(--blue-dark); text-decoration: none; }
.form-error { margin: -8px 0 18px; padding: 10px 12px; border-left: 3px solid #d14343; color: #8f3333; background: #fff4f3; font-size: 12px; line-height: 1.5; }
.form-status { min-height: 18px; margin: 12px 0 0; color: #175cd3; font-size: 11px; }
.form-status.is-error { color: #b42318; }

.page-console { background: #f4f6f9; }
.console-card { width: min(1180px, calc(100vw - 32px)); padding: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 20px 52px rgba(17, 24, 39, .06); }
.console-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.console-top h1 { font-size: 30px; }
.console-top p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.console-stats { margin: 28px 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.console-stats div { padding: 17px 18px; border-right: 1px solid var(--line); }
.console-stats div:first-child { padding-left: 0; }
.console-stats div:last-child { border-right: 0; }
.console-stats strong, .console-stats span { display: block; }
.console-stats strong { font-size: 24px; }
.console-stats span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.console-search { margin-bottom: 18px; display: flex; gap: 8px; }
.console-search input { min-width: 0; flex: 1; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 13px; border-bottom: 1px solid #e7eaf0; text-align: left; vertical-align: middle; white-space: nowrap; }
th { color: #667085; background: #f8fafc; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
td strong, td > span { display: block; }
td > span { margin-top: 3px; color: #8a93a3; font-size: 12px; }
.user-cell { min-width: 0; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.user-cell > span { min-width: 0; }
.user-cell strong, .user-cell small { max-width: 190px; display: block; overflow: hidden; text-overflow: ellipsis; }
.user-cell small { margin-top: 2px; color: #8a93a3; font-size: 12px; }
.table-avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 800; }
.app-cell { display: flex; flex-wrap: wrap; gap: 4px; }
.app-tag { padding: 4px 8px; border-radius: 4px; color: #174ea6; background: #eaf2ff; font-size: 12px; font-weight: 750; }
.app-tag.pets { color: #765a18; background: #f5edcf; }
.app-tag.empty { color: #667085; background: #eef1f5; }
.user-status { display: inline-flex; margin: 0; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.user-status.enabled { color: #176b43; background: #e8f5ee; }
.user-status.disabled { color: #a03a34; background: #fbe9e7; }
.table-action { padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px; color: #596273; background: #fff; cursor: pointer; font-size: 12px; }
.row-actions { display: flex; align-items: center; gap: 5px; }
.row-actions form { margin: 0; }
.sync-note { margin: 14px 0 0; color: #87909f; font-size: 13px; }

.button.danger { color: #b42318; border-color: #f0b7b1; background: #fff; }
.user-detail-card { max-width: 1040px; }
.detail-summary { margin: 28px 0 0; padding: 24px 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-avatar { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--blue); font-size: 27px; font-weight: 800; }
.detail-identity h2 { margin: 0; font-size: 22px; }
.detail-identity p { margin: 5px 0 10px; color: var(--muted); font-size: 14px; }
.detail-actions form { margin: 0; }
.detail-section { padding: 27px 0 4px; }
.detail-section + .detail-section { margin-top: 22px; border-top: 1px solid var(--line); }
.section-heading { margin-bottom: 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading h2 { margin: 0; font-size: 20px; }
.section-heading > span, .section-heading > a { color: #667085; font-size: 13px; text-decoration: none; }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.fact-grid > div { min-width: 0; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact-grid > div:nth-child(3n) { border-right: 0; }
.fact-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.fact-grid span, .fact-grid strong { display: block; }
.fact-grid span { color: #7d8797; font-size: 12px; }
.fact-grid strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 15px; }
.membership-list { border-top: 1px solid var(--line); }
.membership-row { padding: 15px 0; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, .8fr) auto; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.membership-row strong { font-size: 16px; }
.membership-row p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.membership-meta span { display: block; color: #667085; font-size: 13px; line-height: 1.75; }
.empty-membership { padding: 22px 0; color: var(--muted); font-size: 14px; }
.activity-strip { display: grid; grid-template-columns: 1fr 1fr 2fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.activity-strip > div { padding: 16px; border-right: 1px solid var(--line); }
.activity-strip > div:first-child { padding-left: 0; }
.activity-strip > div:last-child { border-right: 0; }
.activity-strip strong, .activity-strip span { display: block; }
.activity-strip strong { font-size: 18px; }
.activity-strip span { margin-top: 3px; color: var(--muted); font-size: 12px; }
footer { min-height: 64px; justify-content: center; gap: 20px; border-top: 1px solid #e6e9ef; color: #87909f; font-size: 13px; }
footer a { color: #667085; text-decoration: none; }

@media (max-width: 700px) {
  header, footer { width: min(100% - 28px, 1120px); }
  main { padding: 28px 14px 46px; align-items: start; }
  .auth-card { padding: 30px 24px; }
  .login-card { min-height: 0; padding: 30px 24px 26px; grid-template-columns: 1fr; gap: 30px; border-radius: 24px; }
  .login-intro { gap: 20px; }
  .login-logo { width: 46px; height: 46px; font-size: 18px; }
  .login-intro h1 { font-size: 31px; }
  .login-intro .lead { margin-top: 12px; font-size: 15px; }
  .login-controls { padding-top: 0; }
  h1 { font-size: 27px; }
  .consent-actions, .actions { flex-direction: column-reverse; }
  .consent-actions .button, .actions .button, .actions form { width: 100%; }
  .code-field { grid-template-columns: 1fr; }
  .code-field .button { width: 100%; }
  .form-links { align-items: flex-start; flex-direction: column; }
  .avatar-upload { grid-template-columns: 1fr; }
  .avatar-upload .button { width: 100%; }
  .console-card { width: 100%; max-width: 100%; padding: 22px 14px; }
  .console-top { flex-direction: column; }
  .console-stats { grid-template-columns: repeat(2, 1fr); }
  .console-stats div:nth-child(2) { border-right: 0; }
  .console-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .console-search { flex-direction: column; }
  .table-wrap { overflow: visible; border: 0; }
  table, tbody { display: block; }
  thead { display: none; }
  tbody { display: grid; gap: 10px; }
  tbody tr { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
  tbody tr:last-child td { border-bottom: 0; }
  td { min-width: 0; padding: 0; display: block; border: 0; white-space: normal; overflow-wrap: anywhere; }
  td::before { content: attr(data-label); margin-bottom: 4px; display: block; color: #7d8797; font-size: 12px; font-weight: 700; }
  td:first-child, td:nth-child(2) { grid-column: 1 / -1; }
  .app-cell { min-height: 24px; align-items: center; }
  .table-action { min-height: 32px; }
  .detail-summary { grid-template-columns: auto 1fr; align-items: start; }
  .detail-actions { grid-column: 1 / -1; }
  .detail-actions .button { width: 100%; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .fact-grid > div, .fact-grid > div:nth-child(3n), .fact-grid > div:nth-last-child(-n+3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .fact-grid > div:nth-child(2n) { border-right: 0; }
  .fact-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .membership-row { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .membership-meta { grid-column: 1 / -1; }
  .activity-strip { grid-template-columns: 1fr 1fr; }
  .activity-strip > div:nth-child(2) { border-right: 0; }
  .activity-strip > div:last-child { grid-column: 1 / -1; padding-left: 0; border-top: 1px solid var(--line); }
  footer span { display: none; }
}

/* Account v8: a consistent identity shell for login, consent and management. */
:root {
  --account-bg: #f8f9fb;
  --account-surface: #fff;
  --account-soft: #f2f4f6;
  --account-ink: #191c1e;
  --account-copy: #434655;
  --account-line: #d9dee7;
  --account-blue: #0b57d0;
  --account-blue-hover: #0847ad;
  --account-blue-soft: #eaf2ff;
  --account-green: #137a55;
}

body {
  color: var(--account-ink);
  background: var(--account-bg);
}

.topbar {
  width: 100%;
  height: 64px;
  padding: 0 28px;
  justify-content: space-between;
  border-bottom: 1px solid #e7e9ed;
  background: rgba(255, 255, 255, .96);
}

.wordmark { gap: 9px; }
.identity-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--account-blue);
  font-size: 14px;
  font-weight: 750;
}
.identity-mark.large { width: 44px; height: 44px; border-radius: 50%; font-size: 18px; }
.identity-name { font-size: 17px; font-weight: 650; }
.header-product { padding-left: 9px; color: #5f6368; font-size: 16px; }
.topbar-help { color: #5f6368; font-size: 13px; text-decoration: none; }
.topbar-help:hover { color: var(--account-blue); }

main { padding: 40px 24px 56px; }
footer { border-top-color: #e7e9ed; }

.button {
  min-height: 42px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
}
.button.primary { background: var(--account-blue); border-color: var(--account-blue); }
.button.primary:hover { background: var(--account-blue-hover); }
.button.secondary { border-color: #c6cbd3; }
.button.quiet { color: var(--account-blue); }
.button:focus-visible, .account-nav-link:focus-visible, .connected-app a:focus-visible {
  outline: 3px solid rgba(11, 87, 208, .2);
  outline-offset: 2px;
}

.page-login main, .page-signup main, .page-consent main, .page-account main {
  background: var(--account-bg);
}
.page-login main, .page-signup main, .page-consent main { padding-top: 54px; }
.auth-card {
  border: 1px solid #dadce0;
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(28, 39, 56, .08);
}
.brand-seal, .login-logo {
  border-radius: 50%;
  background: var(--account-blue);
}
.eyebrow, .section-kicker {
  color: var(--account-blue);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
}
.lead { color: var(--account-copy); }

.login-card {
  width: min(100%, 980px);
  min-height: 520px;
  padding: 50px;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: 72px;
  border: 1px solid #dadce0;
  border-radius: 28px;
  box-shadow: 0 12px 34px rgba(32, 44, 63, .08);
}
.login-intro { min-height: 100%; grid-template-rows: auto auto 1fr; gap: 28px; }
.login-logo { width: 48px; height: 48px; }
.login-intro h1 { max-width: 390px; font-size: 38px; font-weight: 600; line-height: 1.2; }
.login-intro .lead { font-size: 16px; }
.login-trust { align-self: end; margin: 0; color: #7b8290; font-size: 12px; line-height: 1.6; }
.login-panel-title { margin-bottom: 20px; font-size: 17px; }
.provider-button {
  min-height: 50px;
  border-radius: 12px;
  border-color: #bfc5cf;
}
.github-mark { width: 28px; height: 28px; }
.auth-form input { min-height: 52px; border-radius: 12px; }
.login-card .auth-form .button.primary { border-radius: 999px; }
.auth-divider { margin: 25px 0; }
.form-links { font-size: 13px; }
.provider-note { font-size: 12px; }

.signup-card {
  width: min(100%, 560px);
  padding: 40px;
}
.signup-card .form-brand { align-items: flex-start; }
.signup-card .form-brand h1 { margin-top: 4px; font-size: 30px; }
.signup-card .brand-seal { width: 44px; height: 44px; flex: 0 0 auto; }

.consent-card { width: min(100%, 470px); padding: 38px 40px; }
.consent-brand { justify-content: center; margin-bottom: 26px; }
.consent-link { color: #9aa0a6; }
.app-icon { width: 44px; height: 44px; border-radius: 12px; }
.consent-card > .eyebrow, .consent-card > h1, .consent-card > .lead { text-align: center; }
.consent-card > h1 { font-size: 25px; font-weight: 600; }
.consent-card > .lead { margin: 8px 0 0; font-size: 16px; }
.consent-description { margin: 24px 0 12px; color: var(--account-copy); font-size: 14px; line-height: 1.55; }
.signed-user { border-radius: 999px; background: #fff; }
.permission { border-color: #e4e7eb; }
.permission-icon { background: var(--account-green); }
.consent-actions .button { min-width: 116px; }

.welcome-card {
  width: min(100%, 500px);
  padding: 42px;
}

.page-account main, .page-console main, .page-detail main {
  width: 100%;
  padding: 0;
  display: block;
}
.account-shell {
  width: min(100%, 1380px);
  min-height: calc(100vh - 129px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}
.account-sidebar {
  padding: 34px 18px 36px;
  border-right: 1px solid #e1e4e9;
}
.sidebar-label { margin: 0 14px 18px; color: #7b8290; font-size: 12px; font-weight: 700; }
.account-sidebar nav { display: grid; gap: 4px; }
.account-nav-link {
  min-height: 46px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  color: #3d424b;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.account-nav-link > span {
  width: 18px;
  height: 18px;
  border: 2px solid #7b8290;
  border-radius: 50%;
}
.account-nav-link:hover { background: #eef1f5; }
.account-nav-link.is-active { color: #074a9f; background: #dfeaff; }
.account-nav-link.is-active > span { border: 5px solid var(--account-blue); }
.sidebar-note {
  margin: 32px 12px 0;
  padding: 18px;
  display: grid;
  gap: 7px;
  border: 1px solid var(--account-line);
  border-radius: 16px;
  background: #fff;
}
.sidebar-note strong { font-size: 13px; }
.sidebar-note span { color: #6a7180; font-size: 12px; line-height: 1.55; }
.account-workspace {
  min-width: 0;
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 50px 46px 72px;
}
.account-hero { text-align: center; }
.hero-avatar-wrap .avatar { width: 96px; height: 96px; margin-bottom: 19px; font-size: 34px; }
.account-hero h1 { font-size: 31px; font-weight: 600; }
.account-hero p { margin: 9px 0 0; color: #6b7280; font-size: 14px; }
.account-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.settings-card, .connected-section {
  border: 1px solid var(--account-line);
  border-radius: 24px;
  background: #fff;
}
.settings-card { min-width: 0; padding: 25px; }
.settings-card-head, .section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.settings-card h2, .section-title-row h2 { margin: 5px 0 0; font-size: 20px; font-weight: 600; }
.settings-card > p { margin: 14px 0 20px; color: var(--account-copy); font-size: 13px; line-height: 1.6; }
.section-symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--account-blue);
  background: var(--account-blue-soft);
  font-size: 13px;
  font-weight: 800;
}
.section-symbol.security { color: var(--account-green); background: #e9f6f1; }
.profile-row { display: flex; align-items: center; gap: 13px; }
.profile-row .avatar { width: 54px; height: 54px; margin: 0; flex: 0 0 auto; font-size: 19px; }
.profile-row strong, .profile-row span { display: block; }
.profile-row strong { font-size: 15px; }
.profile-row span { margin-top: 4px; color: #6b7280; font-size: 12px; overflow-wrap: anywhere; }
.avatar-settings { margin: 20px 0 0; padding: 17px 0 0; border-top: 1px solid #e6e9ed; border-bottom: 0; }
.avatar-settings > p { font-size: 11px; }
.avatar-upload label > span { font-size: 12px; }
.avatar-upload input[type="file"] { font-size: 12px; }
.security-facts { margin: 0 0 16px; border-top: 1px solid #e6e9ed; }
.security-facts > div { padding: 13px 0; display: grid; gap: 4px; border-bottom: 1px solid #e6e9ed; }
.security-facts dt { color: #7b8290; font-size: 11px; }
.security-facts dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.security-card form { margin: 0; }
.connected-section { margin-top: 18px; padding: 25px; }
.section-title-row { align-items: flex-end; padding-bottom: 17px; border-bottom: 1px solid #e6e9ed; }
.section-title-row > span { color: #7b8290; font-size: 12px; }
.connected-list { display: grid; }
.connected-app {
  min-width: 0;
  padding: 17px 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #e6e9ed;
}
.connected-app:last-child { border-bottom: 0; padding-bottom: 0; }
.connected-app-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #273142; font-weight: 800; }
.connected-app strong, .connected-app span { display: block; }
.connected-app p { margin: 4px 0; color: #596273; font-size: 13px; }
.connected-app div > span { color: #8a91a0; font-size: 11px; }
.connected-app > a { min-height: 36px; padding: 8px 14px; border-radius: 999px; color: var(--account-blue); font-size: 13px; font-weight: 650; text-decoration: none; }
.connected-app > a:hover { background: var(--account-blue-soft); }
.empty-connected { padding: 26px 0 4px; display: grid; gap: 7px; text-align: center; }
.empty-connected span { color: #737b89; font-size: 13px; }

.account-workspace .console-card {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.console-top h1 { font-size: 32px; font-weight: 600; }
.console-stats, .table-wrap, .fact-grid {
  border-color: var(--account-line);
  border-radius: 16px;
  background: #fff;
}
.console-stats { overflow: hidden; border: 1px solid var(--account-line); }
.console-stats div:first-child { padding-left: 18px; }
.console-search input { min-height: 44px; padding: 10px 14px; border-radius: 12px; }
.table-wrap { border-radius: 16px; }
.table-avatar { border-radius: 50%; }
.app-tag, .user-status, .table-action { border-radius: 999px; }
.detail-summary {
  padding: 22px;
  border: 1px solid var(--account-line);
  border-radius: 20px;
  background: #fff;
}
.detail-avatar { border-radius: 50%; }
.fact-grid { border-radius: 16px; }

@media (max-width: 900px) {
  .account-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .account-workspace { padding: 42px 28px 60px; }
  .account-grid { grid-template-columns: 1fr; }
  .login-card { gap: 42px; }
}

@media (max-width: 700px) {
  .topbar { height: 60px; padding: 0 16px; }
  .identity-name { font-size: 15px; }
  .header-product { font-size: 14px; }
  .topbar-help { display: none; }
  .page-login main, .page-signup main, .page-consent main { padding: 24px 14px 40px; }
  .auth-card { border-radius: 22px; }
  .login-card {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 28px 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .login-controls { min-width: 0; }
  .login-intro { min-height: 0; grid-template-rows: auto auto; gap: 20px; }
  .login-intro h1 { font-size: 29px; }
  .login-trust { display: none; }
  .signup-card, .consent-card, .welcome-card { padding: 28px 24px; }
  .account-shell { display: block; }
  .account-sidebar {
    padding: 12px 14px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #e1e4e9;
    background: #fff;
  }
  .sidebar-label, .sidebar-note { display: none; }
  .account-sidebar nav { width: max-content; display: flex; gap: 4px; }
  .account-nav-link { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .account-nav-link > span { display: none; }
  .account-workspace { width: 100%; padding: 32px 16px 48px; }
  .hero-avatar-wrap .avatar { width: 78px; height: 78px; }
  .account-hero h1 { font-size: 25px; }
  .account-grid { margin-top: 28px; }
  .settings-card, .connected-section { padding: 20px; border-radius: 18px; }
  .avatar-upload { grid-template-columns: 1fr; }
  .connected-app { grid-template-columns: 40px minmax(0, 1fr); }
  .connected-app-icon { width: 40px; height: 40px; }
  .connected-app > a { grid-column: 2; justify-self: start; }
  .console-card { padding: 0; }
  .console-stats { border-radius: 14px; }
  .console-stats div:first-child { padding-left: 14px; }
  .detail-summary { grid-template-columns: auto minmax(0, 1fr); }
  .detail-actions { grid-column: 1 / -1; }
}

/* Account v9: user-facing account center */
.page-account,
.page-console,
.page-detail { background: #f0f4f9; }
.page-account .topbar,
.page-console .topbar,
.page-detail .topbar {
  width: 100%;
  height: 72px;
  padding: 0 24px;
  border: 0;
}
.page-account .wordmark,
.page-console .wordmark,
.page-detail .wordmark { gap: 11px; font-weight: 650; }
.page-account .identity-name,
.page-console .identity-name,
.page-detail .identity-name { font-size: 20px; }
.page-account .header-product,
.page-console .header-product,
.page-detail .header-product { color: #30343b; font-size: 18px; }
.page-account footer,
.page-console footer,
.page-detail footer { border-top: 0; background: #f0f4f9; }

.account-shell {
  width: min(100%, 1500px);
  grid-template-columns: 270px minmax(0, 1fr);
}
.account-sidebar {
  padding: 24px 20px 48px;
  border-right: 0;
}
.account-sidebar nav { gap: 6px; }
.account-nav-link {
  min-height: 52px;
  padding: 0 14px 0 8px;
  gap: 11px;
  border-radius: 26px;
  color: #202124;
  font-size: 15px;
  font-weight: 550;
}
.account-nav-link .nav-symbol {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #174ea6;
  background: #d2e3fc;
  font-size: 16px;
  font-weight: 750;
}
.account-nav-link.nav-wallet .nav-symbol { color: #5b35a5; background: #e9ddff; }
.account-nav-link.nav-profile .nav-symbol { color: #176b45; background: #ccefd9; }
.account-nav-link.nav-security .nav-symbol { color: #075985; background: #c9e9fb; }
.account-nav-link.nav-password .nav-symbol { color: #50545c; background: #dde3ea; font-size: 12px; }
.account-nav-link.nav-apps .nav-symbol { color: #8b3f12; background: #ffe0cc; }
.account-nav-link:hover { background: #e5eaf1; }
.account-nav-link.is-active { color: #062e6f; background: #c2e7ff; }
.account-nav-link.is-active .nav-symbol { color: #fff; background: #075985; }

.account-workspace {
  width: min(100%, 920px);
  padding: 34px 42px 80px;
}
.account-page-head { margin: 0 8px 30px; }
.account-page-head h1 { font-size: 30px; font-weight: 600; }
.account-page-head p { margin: 9px 0 0; color: #59636f; font-size: 15px; line-height: 1.55; }
.account-page-head + .page-alert { margin-top: -12px; }
.page-alert {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #f2b8b5;
  border-radius: 12px;
  color: #8c1d18;
  background: #fce8e6;
  font-size: 14px;
}
.page-alert.success { color: #0d652d; border-color: #a8dab5; background: #e6f4ea; }

.home-hero { padding: 24px 0 6px; }
.home-hero .hero-avatar-wrap .avatar { width: 104px; height: 104px; margin-bottom: 16px; }
.home-hero h1 { font-size: 31px; }
.home-hero p { font-size: 15px; }
.home-hero .button { margin-top: 18px; }
.home-links {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.home-link {
  min-width: 0;
  min-height: 112px;
  padding: 22px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  border: 1px solid #d7dce4;
  border-radius: 22px;
  color: #202124;
  background: #fff;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.home-link:hover { border-color: #9eb8dc; box-shadow: 0 4px 14px rgba(60, 64, 67, .12); transform: translateY(-1px); }
.home-link-symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #174ea6; background: #d2e3fc; font-weight: 750; }
.home-link.wallet .home-link-symbol { color: #5b35a5; background: #e9ddff; }
.home-link.profile .home-link-symbol { color: #176b45; background: #ccefd9; }
.home-link.security .home-link-symbol { color: #075985; background: #c9e9fb; }
.home-link.password .home-link-symbol { color: #50545c; background: #dde3ea; font-size: 12px; }
.home-link.apps .home-link-symbol { color: #8b3f12; background: #ffe0cc; }
.home-link strong, .home-link p { display: block; }
.home-link strong { font-size: 16px; }
.home-link p { margin: 6px 0 0; color: #5f6368; font-size: 14px; line-height: 1.45; }
.row-arrow { color: #6c727b; font-size: 26px; }
.account-info-strip {
  margin-top: 20px;
  padding: 4px 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #d7dce4;
  border-radius: 22px;
  background: #fff;
}
.account-info-strip > div { min-width: 0; padding: 18px 16px; border-right: 1px solid #e4e7ec; }
.account-info-strip > div:last-child { border-right: 0; }
.account-info-strip span, .account-info-strip strong { display: block; }
.account-info-strip span { color: #6c727b; font-size: 13px; }
.account-info-strip strong { margin-top: 6px; overflow-wrap: anywhere; font-size: 15px; }

.wallet-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wallet-stats article {
  min-height: 154px;
  padding: 24px;
  border: 1px solid #d7dce4;
  border-radius: 22px;
  background: #fff;
}
.wallet-stats span { color: #5f6368; font-size: 15px; }
.wallet-stats strong { margin-top: 12px; display: block; font-size: 30px; font-weight: 620; }
.wallet-stats p { margin: 9px 0 0; color: #747a84; font-size: 13px; line-height: 1.45; }
.wallet-actions,
.logout-panel {
  margin-top: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid #d7dce4;
  border-radius: 22px;
  background: #fff;
}
.wallet-actions h2, .wallet-actions p, .logout-panel p { margin: 0; }
.wallet-actions h2 { font-size: 20px; font-weight: 600; }
.wallet-actions p, .logout-panel p { margin-top: 7px; color: #5f6368; font-size: 14px; line-height: 1.5; }
.wallet-actions > div:last-child { display: flex; flex: 0 0 auto; gap: 9px; }
.wallet-actions .button, .logout-panel .button { border-radius: 999px; }
.ledger-section,
.session-section,
.password-panel,
.apps-panel {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid #d7dce4;
  border-radius: 22px;
  background: #fff;
}
.ledger-section .section-title-row,
.session-section .section-title-row,
.password-panel .section-title-row,
.apps-panel .section-title-row { padding-bottom: 18px; }
.section-title-row h2 { margin: 0; font-size: 20px; font-weight: 600; }
.section-title-row p { margin: 6px 0 0; color: #656b75; font-size: 14px; }
.ledger-row {
  min-height: 72px;
  padding: 14px 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #e5e8ed;
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-mark { width: 40px; height: 40px; border-radius: 50%; background: #d2e3fc; }
.ledger-mark.income { background: #ccefd9; }
.ledger-mark.withdrawal { background: #f8d7da; }
.ledger-mark.transfer { background: #e9ddff; }
.ledger-mark.subscription { background: #ffe0cc; }
.ledger-main strong, .ledger-main span, .ledger-status strong, .ledger-status span { display: block; }
.ledger-main strong { font-size: 15px; }
.ledger-main span { margin-top: 5px; color: #737983; font-size: 13px; }
.ledger-status { text-align: right; }
.ledger-status strong { font-size: 15px; }
.ledger-status .amount.in { color: #137333; }
.ledger-status span { margin-top: 5px; color: #737983; font-size: 12px; }
.empty-ledger { padding: 34px 12px; display: grid; gap: 7px; color: #5f6368; text-align: center; }
.empty-ledger strong { color: #30343b; font-size: 15px; }
.empty-ledger span { font-size: 14px; }

.info-panel,
.profile-actions,
.security-summary,
.security-fact-grid,
.password-status {
  border: 1px solid #d7dce4;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}
.info-row {
  min-height: 74px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid #e5e8ed;
}
.info-row:last-child { border-bottom: 0; }
.info-row > span, .info-row div > span { color: #30343b; font-size: 15px; }
.info-row strong { max-width: 60%; overflow-wrap: anywhere; font-size: 15px; font-weight: 550; text-align: right; }
.info-row small { margin-top: 5px; display: block; color: #737983; font-size: 13px; }
.profile-avatar { width: 66px; height: 66px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0b57d0; font-size: 22px; font-weight: 750; }
.profile-actions { margin-top: 20px; padding: 22px; overflow: visible; }
.profile-actions .avatar-upload { margin: 0; }
.profile-actions > form:last-child { margin: 10px 0 0; }
.danger-text { color: #b3261e !important; }

.security-summary { padding: 22px 24px; display: flex; align-items: center; gap: 16px; }
.security-shield { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #188038; font-size: 22px; }
.security-summary h2, .security-summary p { margin: 0; }
.security-summary h2 { font-size: 18px; font-weight: 600; }
.security-summary p { margin-top: 5px; color: #5f6368; font-size: 14px; }
.security-fact-grid, .password-status { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.security-fact-grid > div, .password-status > div { min-width: 0; padding: 20px 22px; border-right: 1px solid #e5e8ed; }
.security-fact-grid > div:last-child, .password-status > div:last-child { border-right: 0; }
.security-fact-grid span, .security-fact-grid strong, .password-status span, .password-status strong { display: block; }
.security-fact-grid span, .password-status span { color: #6c727b; font-size: 13px; }
.security-fact-grid strong, .password-status strong { margin-top: 7px; overflow-wrap: anywhere; font-size: 15px; }
.security-row {
  min-height: 68px;
  padding: 13px 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid #e5e8ed;
}
.security-row:last-child { border-bottom: 0; }
.security-dot { width: 34px; height: 34px; border-radius: 50%; background: #d2e3fc; }
.security-row strong, .security-row span { display: block; }
.security-row strong { font-size: 15px; }
.security-row div span, .session-state { margin-top: 4px; color: #6c727b; font-size: 13px; }
.session-state { margin: 0; color: #137333; }
.logout-panel strong { font-size: 16px; }

.password-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.password-form { max-width: 560px; padding-top: 22px; display: grid; gap: 17px; }
.password-form label { display: grid; gap: 8px; }
.password-form label > span { font-size: 14px; font-weight: 600; }
.password-form input {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #aeb6c2;
  border-radius: 12px;
  outline: 0;
  font: inherit;
}
.password-form input:focus { border-color: #0b57d0; box-shadow: 0 0 0 3px rgba(11,87,208,.12); }
.password-form .button { width: max-content; margin-top: 2px; border-radius: 999px; }
.password-empty { padding: 24px 0 4px; }
.password-empty strong { font-size: 16px; }
.password-empty p { margin: 8px 0 18px; color: #5f6368; font-size: 14px; }
.password-empty .button { border-radius: 999px; }
.apps-panel .connected-app { min-height: 84px; }
.apps-panel .connected-app-icon { border-radius: 50%; }

@media (max-width: 900px) {
  .account-shell { grid-template-columns: 228px minmax(0, 1fr); }
  .account-workspace { padding: 32px 28px 64px; }
  .home-links { grid-template-columns: 1fr; }
  .wallet-actions { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .page-account .topbar, .page-console .topbar, .page-detail .topbar { height: 60px; padding: 0 16px; }
  .page-account .identity-name, .page-console .identity-name, .page-detail .identity-name { font-size: 17px; }
  .page-account .header-product, .page-console .header-product, .page-detail .header-product { font-size: 15px; }
  .account-sidebar { padding: 9px 10px; }
  .account-sidebar { scrollbar-width: none; }
  .account-sidebar::-webkit-scrollbar { display: none; }
  .account-sidebar nav { display: flex; width: max-content; }
  .account-nav-link { min-height: 40px; padding: 0 13px; font-size: 13px; }
  .account-nav-link .nav-symbol { display: none; }
  .account-workspace { padding: 28px 14px 48px; }
  .account-page-head { margin: 0 4px 24px; }
  .account-page-head h1 { font-size: 26px; }
  .home-hero { padding-top: 8px; }
  .home-hero .hero-avatar-wrap .avatar { width: 84px; height: 84px; }
  .home-links { margin-top: 26px; gap: 10px; }
  .home-link { min-height: 92px; padding: 17px; border-radius: 18px; }
  .account-info-strip { grid-template-columns: 1fr; padding: 0 18px; border-radius: 18px; }
  .account-info-strip > div { padding: 15px 0; border-right: 0; border-bottom: 1px solid #e4e7ec; }
  .account-info-strip > div:last-child { border-bottom: 0; }
  .wallet-stats { grid-template-columns: 1fr; gap: 10px; }
  .wallet-stats article { min-height: 132px; padding: 20px; border-radius: 18px; }
  .wallet-actions, .logout-panel, .ledger-section, .session-section, .password-panel, .apps-panel { padding: 19px; border-radius: 18px; }
  .wallet-actions > div:last-child { width: 100%; flex-wrap: wrap; }
  .wallet-actions .button { flex: 1; white-space: nowrap; }
  .ledger-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
  .ledger-mark { width: 34px; height: 34px; }
  .ledger-main span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .info-panel, .profile-actions, .security-summary, .security-fact-grid, .password-status { border-radius: 18px; }
  .info-row { min-height: 68px; padding: 14px 18px; gap: 18px; }
  .info-row strong { max-width: 55%; }
  .profile-actions .avatar-upload { grid-template-columns: 1fr; }
  .security-fact-grid, .password-status { grid-template-columns: 1fr; }
  .security-fact-grid > div, .password-status > div { padding: 16px 18px; border-right: 0; border-bottom: 1px solid #e5e8ed; }
  .security-fact-grid > div:last-child, .password-status > div:last-child { border-bottom: 0; }
  .logout-panel { align-items: flex-start; flex-direction: column; }
  .connected-app { grid-template-columns: 40px minmax(0, 1fr); }
  .connected-app > a { grid-column: 2; }
}