/* Profile cards for the embedded Vue application, version 1.0.1. */
#app .ovp-root {
  --ovp-surface: #fff;
  --ovp-subtle: #f5f5f5;
  --ovp-line: #e9e9e9;
  --ovp-text: #191919;
  --ovp-muted: #727272;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px;
  max-width: 1120px;
  align-items: start;
}
html.dark #app .ovp-root {
  --ovp-surface: #171717;
  --ovp-subtle: #202020;
  --ovp-line: #303030;
  --ovp-text: #f2f2f2;
  --ovp-muted: #a3a3a3;
}
#app .ovp-root > *, #app .ovp-contents > * { margin: 0; min-width: 0; }
#app .ovp-contents { display: contents; }
#app .ovp-root .ovp-card {
  border: 1px solid var(--ovp-line);
  border-radius: 28px;
  background: var(--ovp-surface);
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}
#app .ovp-root .ovp-hidden-provider { display: none !important; }
#app .ovp-identity { grid-column: 1 / -1; order: 1; }
#app .ovp-root > .ovu-profile { grid-column: 1 / -1; order: 2; min-width: 0; }
#app .ovp-details { order: 3; grid-column: 1; padding: 24px; }
#app .ovp-bindings { order: 4; grid-column: 2; padding: 24px; }
#app .ovp-password { order: 5; grid-column: 1 / -1; }
#app .ovp-factor { order: 6; grid-column: 1; }
#app .ovp-passkey { order: 7; grid-column: 2; }
#app .ovp-secondary { order: 8; grid-column: 1 / -1; }
#app .ovp-root .ovp-identity {
  color: #f5f5f5;
  border: 0;
  background: radial-gradient(120% 120% at 20% 0%, #272727 0%, #151515 60%, #0d0d0e 100%) !important;
}
#app .ovp-identity-body { padding: 28px 32px; }
#app .ovp-identity-layout { display: flex; flex-direction: row; align-items: flex-start; gap: 24px; }
#app .ovp-identity .ovp-avatar {
  width: 72px; height: 72px; border-radius: 24px; margin-top: 4px;
  background: #363636; color: #fff; box-shadow: none;
}
#app .ovp-identity .ovp-person { min-width: 0; }
#app .ovp-avatar-display { position: relative; }
#app .ovp-avatar-display > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#app .ovp-avatar-display > .ovp-avatar-fallback { display: none; }
#app .ovp-avatar-display.ovp-avatar-failed > img { visibility: hidden; }
#app .ovp-avatar-display.ovp-avatar-failed > .ovp-avatar-fallback { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; }
#app .ovp-identity .ovp-person-title { align-items: center; gap: 8px; }
#app .ovp-identity h2 { color: #f5f5f5; font-size: 24px; line-height: 1.3; }
#app .ovp-identity .ovp-person > div:first-child > div:last-child p { color: #b5b5b5; overflow-wrap: anywhere; }
#app .ovp-identity .badge { background: #ffffff12; color: #d1d1d1; }
#app .ovp-identity .badge-success { background: #a3e63520; color: #c3f174; }
#app .ovp-account-metrics { gap: 0; margin-top: 20px; }
#app .ovp-account-metrics > div {
  padding: 0 20px; border-radius: 0; background: transparent; box-shadow: none;
  border: 0; border-left: 1px solid #ffffff19; --tw-ring-shadow: 0 0 #0000;
}
#app .ovp-account-metrics > div:first-child { padding-left: 0; border-left: 0; }
#app .ovp-account-metrics > div > p:first-child { color: #9e9e9e; letter-spacing: 0; font-size: 12px; }
#app .ovp-account-metrics > div > p:last-child {
  color: #f5f5f5; font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 6px;
}
#app .ovp-root > .ovu-profile { padding: 0; margin: 0; }
#app .ovp-root .ovu-summary { margin-top: 0; }
#app .ovp-root .ovu-calendar { margin-bottom: 0; }
#app .ovp-details > div:first-child { margin-bottom: 20px; }
#app .ovp-editor-grid { display: block; }
#app .ovp-editor-grid > div { padding: 0; border: 0; border-radius: 0; background: transparent; }
#app .ovp-avatar-content { display: flex; align-items: flex-start; gap: 16px; }
#app .ovp-avatar-content > div:first-child { width: 56px; height: 56px; border-radius: 18px; box-shadow: none; flex: 0 0 auto; }
#app .ovp-avatar-content > div:last-child { margin: 0; min-width: 0; }
#app .ovp-avatar-content p { font-size: 13px; line-height: 1.6; }
#app .ovp-avatar-content > div:last-child > div:last-child { gap: 8px; }
#app .ovp-name-editor { margin-top: 24px; padding-top: 24px !important; border-top: 1px solid var(--ovp-line) !important; }
#app .ovp-name-editor form > div:first-child { display: none; }
#app .ovp-name-editor form > div:last-child { padding-top: 4px; }
#app .ovp-root .input { border-radius: 12px; min-height: 42px; background: var(--ovp-subtle); border: 1px solid transparent; }
#app .ovp-root .input:hover { border-color: var(--ovp-line); }
#app .ovp-root .input:focus { border-color: var(--ovp-muted); }
#app .ovp-root .btn { border-radius: 12px; min-height: 38px; padding: 8px 14px; }
#app .ovp-root .btn-sm { min-height: 34px; padding: 6px 10px; font-size: 12px; }
#app .ovp-root :is(button, input, label[role="button"]):focus-visible {
  outline: 2px solid var(--ovp-text); outline-offset: 3px;
}
#app .ovp-bindings > div > div > div:first-child > p:first-child { font-size: 18px; font-weight: 600; }
#app .ovp-bindings .ovp-binding-row {
  background: transparent; border: 0; border-radius: 0; padding: 20px 0 0; margin-top: 20px;
  box-shadow: none; border-top: 1px solid var(--ovp-line);
}
#app .ovp-binding-row > div { gap: 12px; }
#app .ovp-binding-row > div > div:first-child { gap: 12px; }
#app .ovp-binding-row > div > div:first-child > div:first-child { width: 38px; height: 38px; border-radius: 12px; }
#app .ovp-binding-row p { overflow-wrap: anywhere; }
#app .ovp-bindings [data-testid="profile-binding-email-form"] { grid-template-columns: minmax(0, 1fr); }
#app .ovp-bindings [data-testid="profile-binding-email-form"] > * { grid-column: 1; min-width: 0; }
#app .ovp-bindings [data-testid="profile-binding-email-send-code"] { justify-self: start; }
#app .ovp-root .ovp-card h2, #app .ovp-root .ovp-card h3 { font-weight: 600; }
#app .ovp-password > div:first-child, #app .ovp-factor > div:first-child, #app .ovp-passkey > div:first-child {
  border: 0; padding: 24px 24px 0;
}
#app .ovp-password > div:last-child, #app .ovp-factor > div:last-child, #app .ovp-passkey > div:last-child { padding: 20px 24px 24px; }
#app .ovp-password-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#app .ovp-password-form > div { margin: 0; min-width: 0; }
#app .ovp-password-form > div:last-child { grid-column: 1 / -1; padding-top: 0; }
#app .ovp-factor > div:last-child > div { padding: 0; }
#app .ovp-passkey > div:last-child .border-dashed { border: 0; background: var(--ovp-subtle); border-radius: 14px; padding: 20px 12px; }
#app .ovp-card p { overflow-wrap: anywhere; }
#app .ovp-invite { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ovp-line); }
#app .ovp-invite-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#app .ovp-invite-heading h3 { font-size: 16px; line-height: 24px; color: var(--ovp-text); }
#app .ovp-invite-status { color: var(--ovp-muted); font-size: 12px; flex-shrink: 0; }
#app .ovp-invite[data-status="bound"] .ovp-invite-status { color: #367b36; }
html.dark #app .ovp-invite[data-status="bound"] .ovp-invite-status { color: #b4e889; }
#app .ovp-invite-description { margin-top: 8px; color: var(--ovp-muted); font-size: 13px; line-height: 1.7; }
#app .ovp-invite-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
#app .ovp-invite-form .input { width: 100%; min-width: 0; color: var(--ovp-text); }
#app .ovp-invite-form .btn { justify-self: start; min-width: 116px; }
#app .ovp-invite-message { margin-top: 12px; color: #b42318; font-size: 13px; line-height: 1.6; }
html.dark #app .ovp-invite-message { color: #ffaaa3; }
#app .ovp-invite > .btn { margin-top: 12px; }
#app .ovp-invite [hidden] { display: none !important; }
@media (max-width: 1199px) {
  #app .ovp-root { gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .ovp-binding-row > div { flex-direction: column; }
}
@media (max-width: 767px) {
  #app .ovp-root { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #app .ovp-root .ovp-card { grid-column: 1; }
  #app .ovp-root .ovp-details, #app .ovp-root .ovp-bindings { padding: 22px; }
  #app .ovp-identity-body { padding: 24px; }
  #app .ovp-identity-layout { gap: 16px; flex-wrap: wrap; }
  #app .ovp-identity .ovp-avatar { width: 56px; height: 56px; border-radius: 18px; margin-top: 0; }
  #app .ovp-identity .ovp-person { flex-basis: calc(100% - 72px); }
  #app .ovp-identity h2 { font-size: 20px; }
  #app .ovp-account-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-left: -72px; width: calc(100% + 72px); margin-top: 24px; }
  #app .ovp-account-metrics > div { padding: 0; border-left: 0; }
  #app .ovp-account-metrics > div > p:last-child { font-size: 18px; }
  #app .ovp-password-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #app .ovp-password > div:first-child, #app .ovp-factor > div:first-child, #app .ovp-passkey > div:first-child { padding: 22px 22px 0; }
  #app .ovp-password > div:last-child, #app .ovp-factor > div:last-child, #app .ovp-passkey > div:last-child { padding: 20px 22px 22px; }
}
@media (max-width: 359px) {
  #app .ovp-root .ovp-details, #app .ovp-root .ovp-bindings { padding: 20px; }
  #app .ovp-identity-body { padding: 20px; }
  #app .ovp-account-metrics { gap: 10px; }
  #app .ovp-account-metrics > div > p:last-child { font-size: 16px; }
  #app .ovp-avatar-content { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  #app .ovp-root *, #app .ovp-root *::before, #app .ovp-root *::after { animation: none !important; transition: none !important; }
}

/* Scoped analytics and compatibility styles for the profile extension. */
#app .ovp-root {
  width: 100%;
  max-width: 1120px !important;
  --ovp-surface: #ffffff;
  --ovp-subtle: #f4f4f5;
  --ovp-line: #e5e5e7;
  --ovp-text: #191919;
  --ovp-muted: #727272;
  color: var(--ovp-text);
}
html.dark #app .ovp-root {
  --ovp-surface: #171717;
  --ovp-subtle: #26272c;
  --ovp-line: #303134;
  --ovp-text: #f2f2f2;
  --ovp-muted: #a3a3a3;
}
#app .ovp-root .ovp-card {
  background: var(--ovp-surface) !important;
  border: 1px solid var(--ovp-line) !important;
  border-radius: 28px !important;
  box-shadow: none !important;
}
#app .ovp-root .ovp-identity {
  border: 0 !important;
  background: radial-gradient(120% 120% at 20% 0%, #272727 0%, #151515 60%, #0d0d0e 100%) !important;
}
#app .ovp-root .ovp-editor-grid > div,
#app .ovp-root .ovp-binding-row {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: 0 !important;
}
#app .ovp-root .ovp-editor-grid > .ovp-name-editor {
  border-top: 1px solid var(--ovp-line) !important;
}
#app main:has(.ovp-root) { background: #fafafa !important; }
html.dark #app main:has(.ovp-root) { background: #101113 !important; }
#app .ovp-root .ovp-binding-row {
  border-top: 1px solid var(--ovp-line) !important;
}
#app .ovp-identity .ovp-avatar {
  background: #363636 !important;
  box-shadow: none !important;
}
#app .ovp-identity .ovp-account-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#app .ovp-identity .ovp-account-metrics > div {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: 0;
}
#app .ovp-root .input {
  color: var(--ovp-text) !important;
  background: var(--ovp-subtle) !important;
  border: 1px solid var(--ovp-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
#app .ovp-root .input:focus { outline: 2px solid #8c9c92; outline-offset: 2px; }
#app .ovp-root .btn { box-shadow: none !important; border-radius: 12px !important; }
#app .ovp-root .ovp-passkey .border-dashed { background: var(--ovp-subtle) !important; }
#app .ovp-root .ovp-password-form > div { width: auto; }
#app .ovp-root > .lan-usage {
  grid-column: 1 / -1;
  order: 2;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  color: var(--ovp-text);
  --lan-heat-0: #edf0ee;
  --lan-heat-1: #d0e2d5;
  --lan-heat-2: #9bbba6;
  --lan-heat-3: #688e76;
  --lan-heat-4: #355b44;
}
html.dark #app .lan-usage {
  --lan-heat-0: #2c312f;
  --lan-heat-1: #324c3d;
  --lan-heat-2: #4c6e59;
  --lan-heat-3: #789b80;
  --lan-heat-4: #aecbb5;
}
#app .lan-usage * { box-sizing: border-box; }
#app .lan-usage :is(p, dl, dd, h3) { margin: 0; }
#app .lan-summary {
  display: grid;
  grid-template-columns: minmax(300px, 1.35fr) minmax(0, 2.65fr);
  align-items: center;
  gap: 40px;
  padding: 28px 0;
  border-block: 1px solid var(--ovp-line);
}
#app .lan-total-block { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
#app .lan-total-block > div:first-child { min-width: 0; }
#app .lan-eyebrow { font-size: 13px; font-weight: 500; color: var(--ovp-muted); }
#app .lan-total { display: flex; gap: 10px; align-items: baseline; margin: 7px 0 8px; font-variant-numeric: tabular-nums; }
#app .lan-total strong { font-size: 48px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; overflow-wrap: anywhere; }
#app .lan-total > span { font-size: 20px; color: var(--ovp-muted); white-space: nowrap; }
#app .lan-caption { font-size: 11px; color: var(--ovp-muted); overflow-wrap: anywhere; }
#app .lan-spark { flex: 0 0 100px; align-self: end; text-align: right; }
#app .lan-mini { display: flex; height: 52px; align-items: end; gap: 3px; justify-content: flex-end; }
#app .lan-mini > span { display: block; width: 4px; min-width: 2px; background: #66b8ab; border-radius: 2px 2px 0 0; }
#app .lan-spark small { display: block; margin-top: 5px; font-size: 10px; color: var(--ovp-muted); }
#app .lan-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; min-width: 0; }
#app .lan-kpi { min-width: 0; }
#app .lan-kpi dt { font-size: 12px; color: var(--ovp-muted); }
#app .lan-kpi dd { margin: 8px 0 6px; font-size: 23px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#app .lan-kpi small { display: block; font-size: 10px; color: var(--ovp-muted); overflow-wrap: anywhere; }
#app .lan-calendar { border-top: 1px solid var(--ovp-line); padding: 24px 0; min-width: 0; }
#app .lan-calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#app .lan-calendar h3 { font-size: 16px; line-height: 1.5; font-weight: 600; }
#app .lan-calendar-heading p { font-size: 12px; color: var(--ovp-muted); margin-top: 3px; }
#app .lan-calendar-stats { margin: 20px 0 18px !important; color: var(--ovp-muted); font-size: 12px; }
#app .lan-legend { display: flex; gap: 4px; align-items: center; font-size: 10px; color: var(--ovp-muted); white-space: nowrap; }
#app .lan-legend i { display: block; width: 10px; height: 10px; border-radius: 2px; }
#app .lan-level-0 { fill: var(--lan-heat-0); background: var(--lan-heat-0); }
#app .lan-level-1 { fill: var(--lan-heat-1); background: var(--lan-heat-1); }
#app .lan-level-2 { fill: var(--lan-heat-2); background: var(--lan-heat-2); }
#app .lan-level-3 { fill: var(--lan-heat-3); background: var(--lan-heat-3); }
#app .lan-level-4 { fill: var(--lan-heat-4); background: var(--lan-heat-4); }
#app .lan-heat-scroll { width: 100%; min-width: 0; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; border-radius: 5px; }
#app .lan-heat-scroll:focus-visible { outline: 2px solid var(--ovp-muted); outline-offset: 3px; }
#app .lan-heatmap { display: block; max-width: none; overflow: visible; }
#app .lan-heatmap rect { cursor: crosshair; }
#app .lan-heatmap rect[data-active] { stroke: var(--ovp-text); stroke-width: 1.5px; }
#app .lan-axis { fill: var(--ovp-muted); font-size: 10px; font-family: inherit; }
#app .lan-heat-detail { font-size: 11px; line-height: 1.7; min-height: 20px; margin: 10px 0 16px !important; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#app .lan-range { font-size: 11px; color: var(--ovp-muted); }
#app .lan-usage-state { padding: 24px 0; border-top: 1px solid var(--ovp-line); font-size: 13px; color: var(--ovp-muted); }
#app .lan-usage-state button { margin-top: 12px; }
@media (max-width: 1199px) {
  #app .lan-summary { grid-template-columns: minmax(240px, 1.2fr) minmax(0, 1.8fr); gap: 24px; }
  #app .lan-kpis { gap: 16px; }
  #app .lan-kpi dd { font-size: 20px; }
}
@media (max-width: 950px) {
  #app .lan-summary { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  #app .lan-total-block { max-width: 420px; }
}
@media (max-width: 767px) {
  #app .ovp-root { gap: 20px; }
  #app .ovp-identity-layout { flex-wrap: nowrap; }
  #app .ovp-identity .ovp-person { flex: 1 1 0; }
  #app .ovp-account-metrics { gap: 12px; }
  #app .ovp-account-metrics > div { min-width: 0; }
  #app .lan-usage { gap: 20px !important; }
  #app .lan-summary { gap: 28px; padding: 26px 0; }
  #app .lan-kpis { gap: 24px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .lan-kpi dd { font-size: 23px; }
  #app .lan-calendar-heading { align-items: flex-start; }
  #app .lan-calendar-heading p { max-width: 220px; }
  #app .lan-calendar-stats { font-size: 11px; }
  #app .ovp-binding-row > div { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 359px) {
  #app .lan-spark { flex-basis: 88px; }
  #app .lan-mini { gap: 2px; }
  #app .lan-total strong { font-size: 42px; }
  #app .lan-kpi dd { font-size: 21px; }
  #app .lan-legend { gap: 2px; }
  #app .ovp-root .ovp-avatar-content { flex-direction: row; gap: 12px; }
  #app .ovp-root .ovp-avatar-content > div:first-child { width: 44px; height: 44px; }
}