:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171820;
  background: #f7f8fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --blue: #3949f5;
  --muted: #858ba0;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #f7f8fc; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(50px, env(safe-area-inset-top)) 24px calc(100px + env(safe-area-inset-bottom));
}

.topbar { display: flex; min-height: 48px; align-items: center; justify-content: space-between; }
.brand { font-size: 20px; font-weight: 850; letter-spacing: -.7px; }
.brand span { color: var(--blue); }
.avatar-small { display: grid; width: 44px; height: 44px; padding: 11px; place-items: center; border-radius: 50%; color: #fff; background: #171820; }
.avatar-small svg { width: 22px; fill: currentColor; }

.page-heading { margin: 22px 0 22px; }
.page-heading h1 { margin: 0; font-size: 36px; line-height: 1.12; letter-spacing: -1.4px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 16px; }

.profile-identity { display: flex; min-height: 120px; align-items: center; gap: 20px; margin: 0 4px 22px; }
.profile-avatar { display: grid; flex: 0 0 100px; width: 100px; height: 100px; place-items: center; border-radius: 50%; color: var(--blue); background: #e9eaff; }
.profile-avatar svg { width: 58px; fill: currentColor; }
.profile-identity h2 { margin: 0; font-size: 27px; letter-spacing: -.7px; }
.profile-identity p { margin: 5px 0 0; color: var(--muted); font-size: 17px; }

.account-card, .edit-card { border: 1px solid #eff0f5; border-radius: 19px; background: #fff; }
.account-card { padding: 18px 20px 10px; }
.account-card h2, .edit-card label { display: block; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.35px; }
.account-card dl { margin: 10px 0 0; }
.account-row { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #eceef4; }
.account-row:last-child { border-bottom: 0; }
.account-row dt { color: var(--muted); font-size: 15px; }
.account-row dd { margin: 0; font-size: 15px; text-align: right; }

.edit-card { display: grid; gap: 12px; margin-top: 16px; padding: 18px 20px 20px; }
.edit-card input { width: 100%; min-height: 48px; padding: 0 15px; border: 1px solid #dfe2eb; border-radius: 11px; outline: none; color: #171820; background: #fff; font-size: 15px; }
.edit-card input::placeholder { color: #a0a5b5; }
.edit-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(57 73 245 / 12%); }
.save-button { min-height: 48px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(100deg, #3154f5, #4a39e8); font-size: 15px; font-weight: 600; cursor: pointer; }
.form-feedback, .logout-feedback { margin: 0; color: #21854a; font-size: 13px; line-height: 1.4; }
.form-feedback.is-error { color: #a2323c; }
.form-feedback[hidden], .logout-feedback[hidden] { display: none; }

.logout-button { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; border: 1px solid #5557ed; border-radius: 14px; color: #3746db; background: transparent; font-size: 16px; font-weight: 650; cursor: pointer; }
.logout-button svg { width: 22px; height: 22px; fill: currentColor; }
.logout-feedback { margin: 8px 2px 0; color: var(--muted); text-align: center; }

.bottom-nav {
  position: fixed;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100%, 520px);
  min-height: calc(82px + env(safe-area-inset-bottom));
  margin: 0 auto;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #f0f1f6;
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(12px);
}

.nav-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: #a2a5b8; font-size: 12px; font-weight: 500; }
.nav-item svg { width: 24px; height: 24px; fill: currentColor; }
.nav-item.is-active { color: var(--blue); }

@media (max-width: 370px) {
  .app-shell { padding-right: 18px; padding-left: 18px; }
  .profile-identity { gap: 15px; }
  .profile-avatar { flex-basis: 88px; width: 88px; height: 88px; }
  .profile-avatar svg { width: 51px; }
  .account-card, .edit-card { padding-right: 16px; padding-left: 16px; }
}

@media (min-width: 520px) {
  .app-shell { min-height: calc(100vh - 18px); margin-top: 9px; border-radius: 28px; background: #fafbfe; }
  .bottom-nav { border-right: 1px solid #f0f1f6; border-left: 1px solid #f0f1f6; border-radius: 18px 18px 0 0; }
}