:root{
  --bg: radial-gradient(1200px 600px at 50% -20%, #2a2a2a 0%, #0f1115 60%, #0b0d12 100%);
  --card: #1c1f26;
  --card-hover: #242936;
  --text: #e8eaee;
  --muted: #9aa3b2;
  --accent: #7aa2ff;
  --ring: rgba(122,162,255,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg), #0b0d12;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wrapper{
  width:100%;
  max-width:480px;
  padding:24px;
}
.header{
  text-align:center;
  margin-bottom:20px;
}
.avatar-wrap{
  width:132px;
  height:132px;
  margin:0 auto 14px;
  border-radius:9999px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid #2b3242;
}
.avatar{width:100%;height:100%;display:block;object-fit:cover;background:#141821}
h1{
  font-size:28px;
  line-height:1.2;
  margin:8px 0 4px;
}
.subtitle{
  margin:0;
  color:var(--muted);
  font-size:16px;
}
.list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:22px 0;
}
.btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  background:var(--card);
  color:var(--text);
  text-decoration:none;
  padding:16px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid #2b3242;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--card-hover); transform: translateY(-1px); border-color:#364157}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}
.left{display:flex; align-items:center; gap:12px;}
.icon{width:22px;height:22px;display:inline-block}
.small{font-size:14px;color:var(--muted);margin-top:10px;text-align:center}
.footer{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}
.controls{
  margin-top:10px;
  display:flex;
  justify-content:center;
}
input[type="file"]{display:none}
.change-photo{
  background:transparent;
  color:var(--muted);
  border:1px dashed #384157;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.change-photo:hover{color:var(--text); border-color:#4b566b}