.profile-view,
.profile-page-view {
  background: var(--ice-canvas);
}

.profile-header {
  padding: max(24px, env(safe-area-inset-top)) 18px 14px;
  background:
    radial-gradient(circle at 18% 0%, rgba(22, 185, 220, .12), transparent 34%),
    var(--ice-canvas);
}

.profile-topbar {
  display: grid;
  min-height: 48px;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}

.profile-topbar h1 {
  margin: 0;
  text-align: center;
  font-size: 24px;
  letter-spacing: -.035em;
}

.profile-topbar__spacer { width: 44px; height: 44px; }

.profile-content {
  display: grid;
  gap: 16px;
  padding: 8px 14px 34px;
}

.profile-person {
  display: grid;
  padding: 20px;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid var(--ice-line);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow);
}

.profile-person__avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  color: #087e9b;
  background: var(--cyan-pale);
  font-size: 18px;
  font-weight: 800;
}

.profile-person h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.profile-person__role { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.profile-person__study { margin: 9px 0 0; color: var(--ink-soft); font-size: 13px; font-weight: 650; }
.profile-person__freshness { margin: 5px 0 0; color: var(--muted); font-size: 11px; }

.profile-menu {
  overflow: hidden;
  border: 1px solid var(--ice-line);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow);
}

.profile-menu__item {
  display: grid;
  width: 100%;
  min-height: 68px;
  padding: 10px 16px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.profile-menu__item + .profile-menu__item { border-top: 1px solid #e9f1f4; }
.profile-menu__item:hover { background: #f9fcfd; }
.profile-menu__copy { min-width: 0; }
.profile-menu__copy strong { display: block; font-size: 15px; line-height: 1.3; }
.profile-menu__copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.profile-menu__arrow { color: var(--muted); font-size: 24px; line-height: 1; }

.profile-menu__icon,
.profile-state__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
}

.profile-menu__icon svg,
.profile-state__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-tone--violet { color: #7652c6; background: #f1ebff; }
.profile-tone--cyan { color: #079cbe; background: #e7f9fc; }
.profile-tone--blue { color: #4b78df; background: #edf2ff; }
.profile-tone--pink { color: #df5d8b; background: #fff0f5; }
.profile-tone--green { color: #239b71; background: #e9f8f2; }
.profile-tone--orange { color: #d47b1d; background: #fff3e2; }
.profile-tone--red { color: #d65359; background: #fff0f1; }

.profile-delete {
  width: 100%;
  min-height: 58px;
  border: 1px solid #f0dadd;
  border-radius: 20px;
  color: var(--danger);
  background: var(--white);
  font-weight: 720;
  cursor: pointer;
}

.profile-page-header {
  display: grid;
  min-height: 126px;
  padding: max(24px, env(safe-area-inset-top)) 18px 20px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}

.profile-page-header .back-button { align-self: center; background: transparent; }
.profile-page-header p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.profile-page-header h1 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; }
.profile-page-content { display: grid; gap: 14px; padding: 0 14px 34px; }

.profile-card {
  padding: 20px;
  border: 1px solid var(--ice-line);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow);
}

.profile-card h2 { margin: 0 0 14px; font-size: 18px; letter-spacing: -.02em; }
.profile-card h3 { margin: 0 0 6px; font-size: 15px; }
.profile-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.profile-card p + p { margin-top: 10px; }

.profile-fields { margin: 0; }
.profile-field { padding: 13px 0; }
.profile-field:first-child { padding-top: 0; }
.profile-field:last-child { padding-bottom: 0; }
.profile-field + .profile-field { border-top: 1px solid #e8f0f3; }
.profile-field dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.profile-field dd { margin: 0; font-size: 14px; font-weight: 680; line-height: 1.45; overflow-wrap: anywhere; }
.profile-field dd.is-missing { color: var(--muted); font-weight: 550; }

.profile-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.profile-state + .profile-state { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e8f0f3; }
.profile-state__copy strong { display: block; font-size: 15px; }
.profile-state__label { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; }
.profile-state__detail { margin-top: 7px !important; color: var(--muted) !important; font-size: 12px !important; }
.profile-state--fresh .profile-state__label { color: var(--positive); }
.profile-state--warning .profile-state__label { color: var(--warning); }
.profile-state--danger .profile-state__label { color: var(--danger); }
.profile-state--idle .profile-state__label { color: var(--muted); }

.profile-setting {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.profile-setting + .profile-setting { border-top: 1px solid #e8f0f3; }
.profile-setting__copy strong { display: block; font-size: 14px; }
.profile-setting__copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.profile-switch {
  position: relative;
  width: 50px;
  height: 30px;
  flex: 0 0 50px;
  border: 0;
  border-radius: 99px;
  background: #d9e5ea;
  cursor: pointer;
}
.profile-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(31, 81, 101, .18);
  transition: transform .18s ease;
}
.profile-switch[aria-pressed="true"] { background: var(--cyan); }
.profile-switch[aria-pressed="true"]::after { transform: translateX(20px); }

.profile-choice {
  display: inline-flex;
  padding: 4px;
  gap: 3px;
  border-radius: 14px;
  background: var(--ice-soft);
}
.profile-choice button {
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.profile-choice button[aria-pressed="true"] { color: var(--ink); background: var(--white); box-shadow: 0 2px 8px rgba(31, 81, 101, .08); }

.profile-action {
  width: 100%;
  min-height: 50px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid #a9dfeb;
  border-radius: 16px;
  color: var(--cyan-deep);
  background: #effbfe;
  font-weight: 750;
  cursor: pointer;
}
.profile-action--danger { border-color: #f0c9cd; color: var(--white); background: var(--danger); }
.profile-action--quiet { border-color: var(--ice-line); color: var(--ink); background: var(--white); }

.profile-warning-card { border-color: #f2d7da; background: #fffafb; }
.profile-warning-card__step { margin-bottom: 7px !important; color: var(--danger) !important; font-size: 12px !important; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.profile-demo-note { padding: 13px 15px; border-radius: 15px; color: #8c5b14 !important; background: #fff4df; font-size: 12px !important; }
.profile-success { text-align: center; }
.profile-success__mark { display: grid; width: 58px; height: 58px; margin: 0 auto 14px; place-items: center; border-radius: 20px; color: var(--positive); background: #e6f7f0; font-size: 28px; }

@media (max-width: 340px) {
  .profile-content,
  .profile-page-content { padding-inline: 10px; }
  .profile-person { padding: 17px; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
  .profile-person__avatar { width: 50px; height: 50px; }
  .profile-menu__item { padding-inline: 13px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .profile-menu__icon { width: 38px; height: 38px; }
  .profile-card { padding: 17px; }
}