.profile-page {
  width: 100%;
  min-width: 0;

  --profile-bg: #f5f6f7;

  --profile-surface: #ffffff;
  --profile-surface-soft: #f8f9fa;
  --profile-surface-hover: #f2f3f5;

  --profile-text: #15181d;
  --profile-text-soft: #3f4752;
  --profile-muted: #6f7783;

  --profile-border:
    rgba(
      17,
      24,
      39,
      0.08
    );

  --profile-border-strong:
    rgba(
      17,
      24,
      39,
      0.14
    );

  --profile-primary: #111827;
  --profile-primary-hover: #1f2937;
  --profile-primary-contrast: #ffffff;

  --profile-success: #18794e;
  --profile-success-bg: #edf8f2;
  --profile-success-border: #c9e8d6;

  --profile-danger: #bd3434;
  --profile-danger-bg: #fdf1f1;
  --profile-danger-border: #efcccc;

  --profile-warning: #9a6700;

  --profile-shadow:
    0 1px 2px
      rgba(
        15,
        23,
        42,
        0.02
      ),
    0 8px 26px
      rgba(
        15,
        23,
        42,
        0.04
      );

  --profile-shadow-hover:
    0 12px 34px
      rgba(
        15,
        23,
        42,
        0.07
      );

  --profile-radius-sm: 9px;
  --profile-radius-md: 13px;
  --profile-radius-lg: 17px;

  --profile-transition:
    180ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  color:
    var(--profile-text);
}



html[data-theme="dark"]
.profile-page,
body[data-theme="dark"]
.profile-page {
  --profile-bg: #0a0a0b;

  --profile-surface: #111214;
  --profile-surface-soft: #16171a;
  --profile-surface-hover: #1c1d21;

  --profile-text: #f4f5f7;
  --profile-text-soft: #cdd1d7;
  --profile-muted: #a2a8b0;

  --profile-border:
    rgba(
      255,
      255,
      255,
      0.07
    );

  --profile-border-strong:
    rgba(
      255,
      255,
      255,
      0.13
    );

  --profile-primary: #f4f5f7;
  --profile-primary-hover: #ffffff;
  --profile-primary-contrast: #111214;

  --profile-success: #7ec59a;
  --profile-success-bg: #15251c;
  --profile-success-border: #285338;

  --profile-danger: #ef9292;
  --profile-danger-bg: #291919;
  --profile-danger-border: #583030;

  --profile-warning: #e0b65f;

  --profile-shadow:
    0 1px 0
      rgba(
        255,
        255,
        255,
        0.02
      ),
    0 10px 30px
      rgba(
        0,
        0,
        0,
        0.18
      );

  --profile-shadow-hover:
    0 16px 42px
      rgba(
        0,
        0,
        0,
        0.28
      );
}



.profile-hero {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 12px;

  padding:
    15px
    17px;

  overflow: hidden;

  background:
    var(--profile-surface);

  border:
    1px solid
    var(--profile-border);

  border-radius:
    var(--profile-radius-lg);

  box-shadow:
    var(--profile-shadow);

  transition:
    transform
      var(--profile-transition),
    box-shadow
      var(--profile-transition),
    border-color
      var(--profile-transition),
    background-color
      var(--profile-transition);
}



.profile-hero:hover {
  border-color:
    var(--profile-border-strong);

  box-shadow:
    var(--profile-shadow-hover);

  transform:
    translateY(-1px);
}



.profile-hero-main {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 14px;
}



.profile-avatar-wrap {
  position: relative;

  flex: 0 0 auto;
}



.profile-avatar {
  position: relative;

  width: 76px;
  height: 76px;

  flex:
    0 0
    76px;

  overflow: hidden;

  background:
    var(--profile-surface-soft);

  border:
    1px solid
    var(--profile-border-strong);

  border-radius: 50%;

  box-shadow:
    0 7px 22px
    rgba(
      15,
      23,
      42,
      0.08
    );

  transition:
    transform
      var(--profile-transition),
    box-shadow
      var(--profile-transition),
    border-color
      var(--profile-transition);
}



.profile-avatar:hover {
  transform:
    scale(1.025);

  box-shadow:
    0 10px 26px
    rgba(
      15,
      23,
      42,
      0.11
    );
}



.profile-avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius:
    50%;
}



.profile-avatar-fallback {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--profile-primary-contrast);

  background:
    var(--profile-primary);

  border-radius:
    50%;

  font-size: 18px;
  font-weight: 850;

  letter-spacing:
    -0.03em;
}



.profile-avatar-fallback[hidden] {
  display: none !important;
}



.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--profile-primary-contrast);

  background:
    var(--profile-primary);

  font-size: 18px;
  font-weight: 850;

  letter-spacing:
    -0.03em;
}



.profile-avatar-status {
  position: absolute;

  right: 3px;
  bottom: 3px;

  z-index: 4;

  width: 13px;
  height: 13px;

  background: #22a06b;

  border:
    3px solid
    var(--profile-surface);

  border-radius: 50%;

  box-sizing:
    border-box;
}



.profile-hero-info {
  min-width: 0;
}



.profile-eyebrow {
  display: flex;
  align-items: center;

  margin-bottom: 4px;
}



.profile-eyebrow span {
  color:
    var(--profile-muted);

  font-size: 8px;
  font-weight: 820;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}



.profile-hero-info h1 {
  margin: 0;

  overflow: hidden;

  color:
    var(--profile-text);

  font-size: 22px;
  font-weight: 850;

  line-height: 1.1;

  letter-spacing:
    -0.035em;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}



.profile-hero-info > p {
  margin:
    4px 0 0;

  overflow: hidden;

  color:
    var(--profile-muted);

  font-size: 10px;
  font-weight: 700;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}



.profile-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 9px;
}



.profile-meta span {
  min-height: 24px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding:
    0 7px;

  color:
    var(--profile-text-soft);

  background:
    var(--profile-surface-soft);

  border:
    1px solid
    var(--profile-border);

  border-radius:
    8px;

  font-size: 8px;
  font-weight: 720;

  white-space: nowrap;
}



.profile-meta svg {
  width: 11px;
  height: 11px;

  stroke-width: 1.9;

  color:
    var(--profile-muted);
}



.profile-photo-actions {
  flex:
    0 0 auto;

  display: flex;
  align-items: center;

  gap: 6px;
}



.profile-button {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding:
    0 10px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--profile-radius-sm);

  outline: none;

  font-family: inherit;
  font-size: 9.5px;
  font-weight: 760;

  line-height: 1;

  cursor: pointer;

  white-space: nowrap;

  transition:
    color
      var(--profile-transition),
    background-color
      var(--profile-transition),
    border-color
      var(--profile-transition),
    transform
      var(--profile-transition),
    box-shadow
      var(--profile-transition),
    opacity
      var(--profile-transition);
}



.profile-button svg {
  width: 13px;
  height: 13px;

  stroke-width: 2;
}



.profile-button:hover:not(
  :disabled
) {
  transform:
    translateY(-1px);
}



.profile-button:active:not(
  :disabled
) {
  transform:
    translateY(0)
    scale(0.98);
}



.profile-button:focus-visible {
  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.12
    );
}



.profile-button:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}



.profile-button.primary {
  color:
    var(--profile-primary-contrast);

  background:
    var(--profile-primary);

  border-color:
    var(--profile-primary);
}



.profile-button.primary:hover:not(
  :disabled
) {
  background:
    var(--profile-primary-hover);

  border-color:
    var(--profile-primary-hover);
}



.profile-button.secondary {
  color:
    var(--profile-text-soft);

  background:
    var(--profile-surface);

  border-color:
    var(--profile-border);
}



.profile-button.secondary:hover:not(
  :disabled
) {
  color:
    var(--profile-text);

  background:
    var(--profile-surface-hover);

  border-color:
    var(--profile-border-strong);
}



.profile-layout {
  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      235px,
      300px
    );

  gap: 12px;

  align-items: start;
}



.profile-main-column,
.profile-side-column {
  min-width: 0;

  display: grid;

  gap: 12px;
}



.profile-card {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  background:
    var(--profile-surface);

  border:
    1px solid
    var(--profile-border);

  border-radius:
    var(--profile-radius-md);

  box-shadow:
    var(--profile-shadow);

  transition:
    transform
      var(--profile-transition),
    border-color
      var(--profile-transition),
    box-shadow
      var(--profile-transition),
    background-color
      var(--profile-transition);
}



.profile-card:hover {
  border-color:
    var(--profile-border-strong);

  box-shadow:
    var(--profile-shadow-hover);

  transform:
    translateY(-1px);
}



.profile-card-header {
  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    13px
    15px;

  border-bottom:
    1px solid
    var(--profile-border);
}



.profile-card-heading {
  min-width: 0;
}



.profile-card-kicker {
  display: block;

  margin-bottom: 3px;

  color:
    var(--profile-muted);

  font-size: 7.8px;
  font-weight: 820;

  line-height: 1;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}



.profile-card-header h2 {
  margin: 0;

  color:
    var(--profile-text);

  font-size: 13.5px;
  font-weight: 820;

  line-height: 1.15;

  letter-spacing:
    -0.02em;
}



.profile-card-header p {
  margin:
    3px 0 0;

  color:
    var(--profile-muted);

  font-size: 8.8px;
  font-weight: 680;

  line-height: 1.3;
}



.profile-card-icon {
  width: 31px;
  height: 31px;

  flex:
    0 0
    31px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--profile-text-soft);

  background:
    var(--profile-surface-soft);

  border:
    1px solid
    var(--profile-border);

  border-radius:
    9px;

  transition:
    transform
      var(--profile-transition),
    background-color
      var(--profile-transition);
}



.profile-card:hover
.profile-card-icon {
  transform:
    scale(1.04);

  background:
    var(--profile-surface-hover);
}



.profile-card-icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 1.9;
}



.profile-form {
  padding:
    15px;
}



.profile-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px
    13px;
}



.profile-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;
}



.profile-field-wide {
  grid-column:
    1 / -1;
}



.profile-field-label {
  color:
    var(--profile-text-soft);

  font-size: 9.2px;
  font-weight: 760;

  line-height: 1.2;
}



.profile-field small {
  color:
    var(--profile-muted);

  font-size: 7.8px;
  font-weight: 650;

  line-height: 1.4;
}



.profile-input-wrap,
.profile-password-field {
  position: relative;

  width: 100%;
  min-width: 0;
}



.profile-input-icon {
  position: absolute;

  top: 50%;
  left: 10px;

  z-index: 2;

  width: 13px;
  height: 13px;

  color:
    var(--profile-muted);

  stroke-width: 1.8;

  transform:
    translateY(-50%);

  pointer-events: none;

  transition:
    color
      var(--profile-transition);
}



.profile-form input,
.profile-form select,
.profile-form textarea {
  width: 100%;

  outline: none;

  color:
    var(--profile-text);

  background:
    var(--profile-surface-soft);

  border:
    1px solid
    var(--profile-border);

  border-radius:
    var(--profile-radius-sm);

  font-family: inherit;

  font-size: 9.8px;
  font-weight: 670;

  transition:
    color
      var(--profile-transition),
    background-color
      var(--profile-transition),
    border-color
      var(--profile-transition),
    box-shadow
      var(--profile-transition);
}



.profile-form input,
.profile-form select {
  min-height: 36px;

  padding:
    0 10px;
}



.profile-input-wrap input,
.profile-input-wrap select {
  padding-left: 31px;
}



.profile-form textarea {
  min-height: 92px;

  padding:
    9px 10px;

  resize: vertical;

  line-height: 1.5;
}



.profile-form input::placeholder,
.profile-form textarea::placeholder {
  color:
    var(--profile-muted);

  opacity: 0.78;
}



.profile-form input:hover:not(
  :disabled
),
.profile-form select:hover,
.profile-form textarea:hover {
  border-color:
    var(--profile-border-strong);
}



.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus {
  background:
    var(--profile-surface);

  border-color:
    var(--profile-border-strong);

  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.profile-input-wrap:focus-within
.profile-input-icon,
.profile-password-field:focus-within
.profile-input-icon {
  color:
    var(--profile-text);
}



.profile-form input:disabled {
  color:
    var(--profile-muted);

  background:
    var(--profile-surface-hover);

  cursor:
    not-allowed;
}



.profile-form select {
  cursor: pointer;
}



.profile-field-helper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;
}



.profile-character-counter {
  flex: 0 0 auto;

  color:
    var(--profile-muted);

  font-size: 7.8px;
  font-weight: 700;

  font-variant-numeric:
    tabular-nums;
}



.profile-form-footer {
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 15px;

  padding-top: 12px;

  border-top:
    1px solid
    var(--profile-border);
}



.profile-form-footer-end {
  justify-content:
    flex-end;
}



.profile-form-meta {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.profile-form-meta span {
  color:
    var(--profile-muted);

  font-size: 7.8px;
  font-weight: 650;
}



.profile-form-meta strong {
  color:
    var(--profile-text-soft);

  font-size: 8.8px;
  font-weight: 730;
}



.profile-password-field input {
  padding:
    0 38px
    0 31px;
}



.profile-password-toggle {
  position: absolute;

  top: 50%;
  right: 4px;

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color:
    var(--profile-muted);

  background:
    transparent;

  border: 0;

  border-radius: 7px;

  outline: none;

  cursor: pointer;

  transform:
    translateY(-50%);

  transition:
    color
      var(--profile-transition),
    background-color
      var(--profile-transition),
    transform
      var(--profile-transition);
}



.profile-password-toggle:hover {
  color:
    var(--profile-text);

  background:
    var(--profile-surface-hover);
}



.profile-password-toggle:active {
  transform:
    translateY(-50%)
    scale(0.94);
}



.profile-password-toggle:focus-visible {
  box-shadow:
    0 0 0 2px
    var(--profile-border-strong);
}



.profile-password-toggle svg {
  width: 13px;
  height: 13px;

  stroke-width: 1.9;
}



.profile-password-strength {
  margin-top: 14px;

  padding:
    10px;

  background:
    var(--profile-surface-soft);

  border:
    1px solid
    var(--profile-border);

  border-radius:
    var(--profile-radius-sm);
}



.profile-password-strength-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 7px;
}



.profile-password-strength-head span {
  color:
    var(--profile-muted);

  font-size: 8px;
  font-weight: 680;
}



.profile-password-strength-head strong {
  color:
    var(--profile-text-soft);

  font-size: 8px;
  font-weight: 760;
}



.profile-password-strength-track {
  width: 100%;
  height: 4px;

  overflow: hidden;

  background:
    var(--profile-border);

  border-radius:
    999px;
}



.profile-password-strength-track > span {
  width: 0;
  height: 100%;

  display: block;

  background:
    var(--profile-muted);

  border-radius:
    inherit;

  transition:
    width
      250ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
    background-color
      var(--profile-transition);
}



.profile-password-strength-track
> span[data-level="1"] {
  background:
    var(--profile-danger);
}



.profile-password-strength-track
> span[data-level="2"] {
  background:
    var(--profile-warning);
}



.profile-password-strength-track
> span[data-level="3"] {
  background:
    var(--profile-success);
}



.profile-security-info {
  display: flex;
  align-items: flex-start;

  gap: 7px;

  margin-top: 10px;

  padding:
    9px 10px;

  color:
    var(--profile-text-soft);

  background:
    var(--profile-surface-soft);

  border:
    1px solid
    var(--profile-border);

  border-radius:
    var(--profile-radius-sm);
}



.profile-security-info svg {
  width: 13px;
  height: 13px;

  flex:
    0 0
    13px;

  margin-top: 1px;

  color:
    var(--profile-muted);

  stroke-width: 1.9;
}



.profile-security-info span {
  font-size: 8.2px;
  font-weight: 650;

  line-height: 1.45;
}



.profile-summary-list {
  display: grid;
}



.profile-summary-list > div {
  min-height: 49px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 3px;

  padding:
    10px 13px;

  border-bottom:
    1px solid
    var(--profile-border);

  transition:
    background-color
      var(--profile-transition),
    padding-left
      var(--profile-transition);
}



.profile-summary-list > div:last-child {
  border-bottom: 0;
}



.profile-summary-list > div:hover {
  padding-left: 15px;

  background:
    var(--profile-surface-soft);
}



.profile-summary-list span {
  color:
    var(--profile-muted);

  font-size: 8px;
  font-weight: 700;
}



.profile-summary-list strong {
  overflow-wrap:
    anywhere;

  color:
    var(--profile-text-soft);

  font-size: 9.4px;
  font-weight: 760;

  line-height: 1.3;
}



.profile-photo-rules {
  display: grid;
}



.profile-photo-rules > div {
  min-height: 54px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    10px 13px;

  border-bottom:
    1px solid
    var(--profile-border);

  transition:
    background-color
      var(--profile-transition),
    padding-left
      var(--profile-transition);
}



.profile-photo-rules > div:last-child {
  border-bottom: 0;
}



.profile-photo-rules > div:hover {
  padding-left: 15px;

  background:
    var(--profile-surface-soft);
}



.profile-photo-rule-icon {
  width: 28px;
  height: 28px;

  flex:
    0 0
    28px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--profile-text-soft);

  background:
    var(--profile-surface-soft);

  border:
    1px solid
    var(--profile-border);

  border-radius: 8px;
}



.profile-photo-rule-icon svg {
  width: 13px;
  height: 13px;

  stroke-width: 1.9;
}



.profile-photo-rules > div > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.profile-photo-rules strong {
  color:
    var(--profile-text-soft);

  font-size: 8.8px;
  font-weight: 760;
}



.profile-photo-rules
> div
> div
> span {
  color:
    var(--profile-muted);

  font-size: 7.8px;
  font-weight: 660;
}



.profile-message {
  position: relative;

  min-height: 40px;

  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 12px;

  padding:
    7px
    8px
    7px
    10px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--profile-radius-sm);

  font-size: 8.8px;
  font-weight: 700;

  box-shadow:
    var(--profile-shadow);
}



.profile-message.is-success {
  color:
    var(--profile-success);

  background:
    var(--profile-success-bg);

  border-color:
    var(--profile-success-border);
}



.profile-message.is-error {
  color:
    var(--profile-danger);

  background:
    var(--profile-danger-bg);

  border-color:
    var(--profile-danger-border);
}



.profile-message-icon {
  width: 25px;
  height: 25px;

  flex:
    0 0
    25px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background:
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.profile-message-icon svg {
  width: 13px;
  height: 13px;

  stroke-width: 2;
}



.profile-message > span {
  min-width: 0;

  flex: 1;
}



.profile-message-close {
  width: 27px;
  height: 27px;

  flex:
    0 0
    27px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: currentColor;

  background:
    transparent;

  border: 0;

  border-radius: 7px;

  outline: none;

  cursor: pointer;

  opacity: 0.75;

  transition:
    opacity
      var(--profile-transition),
    background-color
      var(--profile-transition),
    transform
      var(--profile-transition);
}



.profile-message-close:hover {
  opacity: 1;

  background:
    rgba(
      127,
      127,
      127,
      0.1
    );
}



.profile-message-close:active {
  transform:
    scale(0.92);
}



.profile-message-close svg {
  width: 12px;
  height: 12px;
}



.profile-state {
  min-height: 360px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 25px;

  color:
    var(--profile-muted);
}



.profile-state-icon {
  width: 42px;
  height: 42px;

  flex:
    0 0
    42px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--profile-text-soft);

  background:
    var(--profile-surface);

  border:
    1px solid
    var(--profile-border);

  border-radius: 12px;

  box-shadow:
    var(--profile-shadow);
}



.profile-state-icon svg {
  width: 18px;
  height: 18px;
}



.profile-loading
.profile-state-icon svg {
  animation:
    profileSpin
    900ms
    linear
    infinite;
}



.profile-state-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 4px;
}



.profile-state-copy strong {
  color:
    var(--profile-text);

  font-size: 12px;
  font-weight: 780;
}



.profile-state-copy > span {
  max-width: 380px;

  color:
    var(--profile-muted);

  font-size: 9px;
  font-weight: 650;

  line-height: 1.45;
}



.profile-state-copy
.profile-button {
  margin-top: 7px;
}



.profile-enter {
  opacity: 0;

  animation:
    profileEnter
    380ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    var(
      --profile-delay,
      0ms
    )
    forwards;
}



@keyframes profileEnter {
  from {
    opacity: 0;

    transform:
      translateY(8px)
      scale(0.995);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}



@keyframes profileSpin {
  to {
    transform:
      rotate(360deg);
  }
}



.profile-button
svg[data-lucide="loader-circle"] {
  animation:
    profileSpin
    850ms
    linear
    infinite;
}



html[data-theme="dark"]
.profile-avatar {
  box-shadow:
    0 8px 24px
    rgba(
      0,
      0,
      0,
      0.32
    );
}



html[data-theme="dark"]
.profile-form input,
html[data-theme="dark"]
.profile-form select,
html[data-theme="dark"]
.profile-form textarea {
  color-scheme:
    dark;
}



html[data-theme="light"]
.profile-form input,
html[data-theme="light"]
.profile-form select,
html[data-theme="light"]
.profile-form textarea {
  color-scheme:
    light;
}



html[data-theme="dark"]
.profile-eyebrow span,
html[data-theme="dark"]
.profile-card-kicker,
html[data-theme="dark"]
.profile-card-header p,
html[data-theme="dark"]
.profile-hero-info > p,
html[data-theme="dark"]
.profile-field small,
html[data-theme="dark"]
.profile-summary-list span,
html[data-theme="dark"]
.profile-photo-rules
> div
> div
> span,
html[data-theme="dark"]
.profile-password-strength-head span,
html[data-theme="dark"]
.profile-form-meta span {
  color:
    #aeb3ba;
}



html[data-theme="dark"]
.profile-field-label,
html[data-theme="dark"]
.profile-summary-list strong,
html[data-theme="dark"]
.profile-photo-rules strong,
html[data-theme="dark"]
.profile-form-meta strong,
html[data-theme="dark"]
.profile-security-info,
html[data-theme="dark"]
.profile-meta span {
  color:
    #d0d3d8;
}



@media (
  max-width: 1180px
) {
  .profile-layout {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      250px;
  }

  .profile-meta
  span:last-child {
    display: none;
  }
}



@media (
  max-width: 980px
) {
  .profile-layout {
    grid-template-columns:
      1fr;
  }

  .profile-side-column {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}



@media (
  max-width: 760px
) {
  .profile-hero {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap: 14px;

    padding:
      14px;
  }

  .profile-photo-actions {
    width: 100%;
  }

  .profile-photo-actions
  .profile-button {
    flex: 1;
  }

  .profile-layout {
    gap: 10px;
  }

  .profile-main-column,
  .profile-side-column {
    gap: 10px;
  }

  .profile-form-grid {
    grid-template-columns:
      1fr;
  }

  .profile-field-wide {
    grid-column:
      auto;
  }

  .profile-side-column {
    grid-template-columns:
      1fr;
  }

  .profile-form {
    padding:
      13px;
  }

  .profile-card-header {
    padding:
      12px
      13px;
  }
}



@media (
  max-width: 560px
) {
  .profile-hero-main {
    width: 100%;

    align-items:
      flex-start;
  }

  .profile-avatar {
    width: 64px;
    height: 64px;

    flex-basis:
      64px;
  }

  .profile-avatar-placeholder,
  .profile-avatar-fallback {
    font-size: 16px;
  }

  .profile-hero-info {
    flex: 1;
  }

  .profile-hero-info h1 {
    font-size: 18px;
  }

  .profile-meta {
    gap: 5px;
  }

  .profile-meta span {
    min-height: 22px;

    padding:
      0 6px;

    font-size: 7.8px;
  }

  .profile-meta
  span:nth-child(2) {
    display: none;
  }

  .profile-photo-actions {
    flex-direction:
      column;
  }

  .profile-photo-actions
  .profile-button {
    width: 100%;
  }

  .profile-form-footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .profile-form-footer
  .profile-button {
    width: 100%;
  }

  .profile-form-footer-end {
    align-items:
      stretch;
  }

  .profile-form-meta {
    padding-bottom: 2px;
  }
}



@media (
  max-width: 420px
) {
  .profile-hero {
    padding:
      12px;
  }

  .profile-hero-main {
    gap: 10px;
  }

  .profile-avatar {
    width: 56px;
    height: 56px;

    flex-basis:
      56px;
  }

  .profile-avatar-placeholder,
  .profile-avatar-fallback {
    font-size: 14px;
  }

  .profile-avatar-status {
    width: 11px;
    height: 11px;
  }

  .profile-hero-info h1 {
    font-size: 16px;
  }

  .profile-hero-info > p {
    font-size: 8.8px;
  }

  .profile-meta span {
    max-width: 100%;

    overflow: hidden;

    text-overflow:
      ellipsis;
  }

  .profile-card-header {
    min-height: 58px;

    padding:
      10px
      11px;
  }

  .profile-card-header h2 {
    font-size: 12.5px;
  }

  .profile-card-header p {
    display: none;
  }

  .profile-card-icon {
    width: 29px;
    height: 29px;

    flex-basis:
      29px;
  }

  .profile-form {
    padding:
      11px;
  }

  .profile-form-grid {
    gap: 10px;
  }

  .profile-form input,
  .profile-form select {
    min-height: 35px;
  }

  .profile-form textarea {
    min-height: 82px;
  }

  .profile-summary-list > div {
    min-height: 45px;

    padding:
      9px
      11px;
  }

  .profile-photo-rules > div {
    min-height: 50px;

    padding:
      9px
      11px;
  }

  .profile-message {
    font-size: 8.2px;
  }
}



@media (
  hover: none
) {
  .profile-hero:hover,
  .profile-card:hover,
  .profile-button:hover:not(
    :disabled
  ),
  .profile-avatar:hover {
    transform: none;
  }

  .profile-summary-list
  > div:hover,
  .profile-photo-rules
  > div:hover {
    padding-left:
      13px;
  }
}



@media (
  prefers-reduced-motion:
  reduce
) {
  .profile-hero,
  .profile-avatar,
  .profile-button,
  .profile-card,
  .profile-card-icon,
  .profile-form input,
  .profile-form select,
  .profile-form textarea,
  .profile-input-icon,
  .profile-password-toggle,
  .profile-password-strength-track
  > span,
  .profile-summary-list
  > div,
  .profile-photo-rules
  > div,
  .profile-message-close,
  .profile-enter {
    animation:
      none !important;

    transition:
      none !important;
  }

  .profile-enter {
    opacity: 1;
  }
}.profile-eyebrow span {
  font-size: 9px;
  font-weight: 850;
}



.profile-hero-info h1 {
  font-size: 24px;
  font-weight: 900;
}



.profile-hero-info > p {
  font-size: 11px;
  font-weight: 740;
  color: var(--profile-text-soft);
}



.profile-meta span {
  font-size: 9px;
  font-weight: 760;
}



.profile-card-kicker {
  font-size: 8.5px;
  font-weight: 850;
}



.profile-card-header h2 {
  font-size: 14.5px;
  font-weight: 860;
}



.profile-card-header p {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--profile-text-soft);
}



.profile-field-label {
  font-size: 10px;
  font-weight: 800;
}



.profile-field small {
  font-size: 8.5px;
  font-weight: 690;
  color: var(--profile-text-soft);
}



.profile-form input,
.profile-form select,
.profile-form textarea {
  font-size: 10.5px;
  font-weight: 720;
}



.profile-character-counter {
  font-size: 8.5px;
  font-weight: 760;
}



.profile-form-meta span {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--profile-text-soft);
}



.profile-form-meta strong {
  font-size: 9.5px;
  font-weight: 780;
}



.profile-password-strength-head span,
.profile-password-strength-head strong {
  font-size: 8.8px;
  font-weight: 760;
}



.profile-security-info span {
  font-size: 9px;
  font-weight: 700;
}



.profile-summary-list span {
  font-size: 8.8px;
  font-weight: 740;
  color: var(--profile-text-soft);
}



.profile-summary-list strong {
  font-size: 10px;
  font-weight: 800;
  color: var(--profile-text);
}



.profile-photo-rules strong {
  font-size: 9.4px;
  font-weight: 800;
  color: var(--profile-text);
}



.profile-photo-rules
> div
> div
> span {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--profile-text-soft);
}



.profile-button {
  font-size: 10px;
  font-weight: 800;
}



.profile-message {
  font-size: 9.5px;
  font-weight: 760;
}



.profile-state-copy strong {
  font-size: 13px;
  font-weight: 820;
}



.profile-state-copy > span {
  font-size: 10px;
  font-weight: 700;
  color: var(--profile-text-soft);
}



html[data-theme="dark"]
.profile-eyebrow span,
html[data-theme="dark"]
.profile-card-kicker {
  color: #c3c7ce;
}



html[data-theme="dark"]
.profile-hero-info > p,
html[data-theme="dark"]
.profile-card-header p,
html[data-theme="dark"]
.profile-field small,
html[data-theme="dark"]
.profile-form-meta span,
html[data-theme="dark"]
.profile-summary-list span,
html[data-theme="dark"]
.profile-photo-rules
> div
> div
> span,
html[data-theme="dark"]
.profile-security-info span {
  color: #c7cbd1;
}



html[data-theme="dark"]
.profile-field-label,
html[data-theme="dark"]
.profile-summary-list strong,
html[data-theme="dark"]
.profile-photo-rules strong,
html[data-theme="dark"]
.profile-form-meta strong,
html[data-theme="dark"]
.profile-password-strength-head strong {
  color: #f0f1f3;
}