/* =========================================================
   MICALO PROFILE — Shared profile styles
========================================================= */

.profile-page {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("../../assets/images/backgrounds/home-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(9,111,178,.34), rgba(88,218,255,.15), rgba(255,255,255,.08));
}

.profile-card {
  position: relative;
  z-index: 5;
  width: 1120px;
  min-height: 650px;
  padding: 68px 52px 28px;
  box-sizing: border-box;
  border: 5px solid rgba(255,255,255,.96);
  border-radius: 40px;
  background: linear-gradient(145deg, rgba(247,253,255,.98), rgba(224,247,255,.95));
  box-shadow: 0 0 0 4px rgba(62,204,250,.30), 0 0 36px rgba(46,196,244,.38), 0 20px 55px rgba(0,67,111,.24);
  text-align: center;
}

.profile-avatar-link {
  position: absolute;
  left: 50%;
  top: 0;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 5px solid #6adfff;
  border-radius: 34px;
  background: linear-gradient(145deg, #6adfff, #159edb);
  color: #fff;
  text-decoration: none;
  font-size: 56px;
  box-shadow: 0 0 25px rgba(61,209,255,.60), 0 12px 25px rgba(0,80,130,.20);
  transition: transform .12s ease, filter .12s ease;
}
.profile-avatar-link:hover { transform: translate(-50%, -50%) scale(1.04); filter: brightness(1.05); }
.profile-avatar-link:active { transform: translate(-50%, -48%) scale(.98); }
.profile-avatar-image { width:100%; height:100%; object-fit:cover; display:block; }
/* The default artwork has its own frame; selected avatars use the shared cyan frame. */
.profile-avatar-link.is-default-avatar { border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.profile-avatar-link.is-default-avatar .profile-avatar-image { object-fit:contain; transform:scale(1.22); }
.profile-avatar-link:focus-visible { outline:3px solid #159edb; outline-offset:4px; }
.profile-avatar-fallback { line-height:1; }

.profile-heading { margin-bottom: 20px; }
.profile-kicker { font-size: 14px; letter-spacing: 3px; color:#1594cd; font-weight:900; }
.profile-heading h1 { margin:4px 0; font-size:34px; color:#075d9d; }
.profile-heading p { margin:0; font-size:16px; font-weight:800; color:#1681b6; }

.profile-page-title { margin: 6px 0 4px; color:#075d9d; font-size:38px; }
.profile-page-subtitle { margin:0 0 22px; color:#64869a; font-size:16px; font-weight:800; }

.profile-meta {
  display:grid;
  grid-template-columns: repeat(3, auto);
  justify-content:center;
  gap:10px;
  margin-top:18px;
}
.profile-meta div {
  min-width:150px;
  padding:7px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:2px solid #d2edf7;
  border-radius:13px;
  background:rgba(233,248,253,.90);
}
.profile-meta span { color:#6b8798; font-size:11px; font-weight:800; }
.profile-meta strong { color:#075f96; font-size:12px; white-space:nowrap; }

.profile-empty {
  min-height:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:3px dashed #c7eafa;
  border-radius:28px;
  background:rgba(255,255,255,.64);
  color:#66879a;
  font-weight:850;
}

.profile-action {
  min-width:180px;
  min-height:54px;
  padding:0 22px;
  border:3px solid rgba(255,255,255,.96);
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(135deg,#63d8ff,#169edb);
  color:#fff;
  text-decoration:none;
  font-size:17px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 0 16px rgba(55,196,244,.30),0 7px 16px rgba(0,78,125,.14);
  transition:transform .12s ease,filter .12s ease;
}
.profile-action:hover { transform:translateY(-2px); filter:brightness(1.04); }
.profile-action:active { transform:translateY(1px); }
.profile-action.secondary { background:linear-gradient(135deg,#eef8fc,#d7edf6); color:#39738f; border-color:#d9eff7; box-shadow:none; }
.profile-action.danger { background:linear-gradient(135deg,#ff9b9b,#df4d4d); }
.profile-action[disabled] { opacity:.55; cursor:not-allowed; transform:none; }

.profile-actions-row { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:20px; }
.profile-note { color:#6d8999; font-size:13px; font-weight:800; }

.profile-toast {
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  min-width:260px;
  padding:13px 20px;
  border-radius:16px;
  background:rgba(7,68,105,.94);
  color:#fff;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  z-index:80;
}
.profile-toast.is-visible { opacity:1; transform:translateX(-50%) translateY(0); }