/* "Ki néz éppen?" profilválasztó - a welcome.css családjára épül (háttér, betűtípus,
   színek), csak a saját tartalmi részt (csempesor + gombok) definiálja itt. */
.profiles-screen{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; z-index:1; padding:40px 24px; text-align:center;
}
.profiles-screen h1{
  font-size:clamp(24px, 4vw, 40px); font-weight:800; margin-bottom:40px;
}
.profiles-grid{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;
  gap:28px; max-width:800px; margin-bottom:36px;
}
.profile-tile{
  display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer;
  width:130px; background:none; border:none; color:inherit; font-family:inherit;
}
.profile-tile-avatar{
  width:110px; height:110px; border-radius:12px; background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800;
  background-size:cover; background-position:center; border:3px solid transparent;
  transition:border-color .15s ease, transform .15s ease;
  overflow:hidden; position:relative;
}
.profile-tile-avatar.avatar-filled{
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.profile-tile:hover .profile-tile-avatar,
.profile-tile:focus-visible .profile-tile-avatar{
  border-color:#fff; transform:scale(1.04);
}
.profile-tile-name{
  font-size:15px; color:var(--text-dim); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.profile-tile-add .profile-tile-avatar{
  background:rgba(255,255,255,0.05); border:2px dashed rgba(255,255,255,0.25);
  font-size:40px; font-weight:400; color:var(--text-dim);
}
.profile-tile-add:hover .profile-tile-avatar,
.profile-tile-add:focus-visible .profile-tile-avatar{
  border-color:#fff; color:#fff;
}
.profile-tile-delete{
  position:absolute; inset:0; background:rgba(0,0,0,0.6); display:none;
  align-items:center; justify-content:center; font-size:28px; color:#ff5c6c;
}
.profiles-grid.edit-mode .profile-tile-delete{ display:flex; }
.profiles-grid.edit-mode .profile-tile-avatar{ border-color:rgba(255,255,255,0.3); }

.btn-outline{
  background:none; border:1px solid rgba(255,255,255,0.4); color:var(--text);
  padding:12px 32px; border-radius:4px; font-weight:600; font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; font-family:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,0.06); }

.profile-form-overlay{
  position:fixed; inset:0; background:rgba(5,6,10,0.85); z-index:50;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.profile-form-overlay.active{ display:flex; }
.profile-form-card{
  background:var(--surface-bg, rgba(18,21,28,0.96)); border:1px solid var(--surface-border, rgba(255,255,255,0.14));
  border-radius:12px; padding:32px; width:100%; max-width:380px; text-align:center;
}
.profile-form-card h2{ font-size:20px; margin-bottom:20px; }
.profile-form-avatar-preview{
  width:96px; height:96px; border-radius:12px; margin:0 auto 18px; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800;
}
.profile-form-card input[type="text"]{
  width:100%; padding:11px 14px; border-radius:7px; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14); color:var(--text); font-size:14px; margin-bottom:14px; font-family:inherit;
}
.profile-form-card input[type="file"]{ display:none; }
.profile-form-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; justify-content:center; }
.profile-form-actions button{ flex:1; min-width:110px; }
.btn-primary-solid{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:none;
  padding:11px 20px; border-radius:7px; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit;
}
.btn-text{
  background:none; border:none; color:var(--text-dim); font-size:13px; cursor:pointer; font-family:inherit;
  text-decoration:underline;
}
.profile-form-error{ color:#ff5c6c; font-size:13px; margin-top:10px; min-height:16px; }

@media (max-width: 600px){
  .profiles-grid{ gap:18px; }
  .profile-tile{ width:96px; }
  .profile-tile-avatar{ width:84px; height:84px; font-size:26px; }
}