/* Phase 53: Mega Modern Profile Layout – scoped, non-invasive */
:root{
  --cem-bg:#07111f;
  --cem-panel:rgba(15,23,42,.84);
  --cem-panel-2:rgba(17,24,39,.92);
  --cem-line:rgba(148,163,184,.18);
  --cem-text:#eef6ff;
  --cem-muted:#94a3b8;
  --cem-blue:#38bdf8;
  --cem-pink:#ec4899;
  --cem-violet:#8b5cf6;
  --cem-green:#22c55e;
  --cem-radius:26px;
  --cem-shadow:0 28px 90px rgba(0,0,0,.34);
}

body.profile-page-static{
  background:
    radial-gradient(circle at 12% 0%, rgba(56,189,248,.16), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(236,72,153,.16), transparent 32%),
    linear-gradient(180deg,#050b16,#08111f 42%,#050b16) !important;
  color:var(--cem-text);
}

.profile-web-bg{
  width:min(1420px, calc(100vw - 28px));
  margin:22px auto 50px !important;
  padding:0 !important;
  background-size:cover;
  background-position:center;
  border-radius:32px;
}

.profile-page-static .card,
.profile-page-static .profile-tabs,
.profile-page-static .profile-sidebar-modern section,
.profile-page-static .profile-feed-modern section{
  background:linear-gradient(145deg, rgba(15,23,42,.88), rgba(2,6,23,.78)) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04) !important;
  color:var(--cem-text) !important;
  border-radius:var(--cem-radius) !important;
}

.profile-hero-modern{
  position:relative;
  overflow:hidden;
  min-height:355px;
  padding:0 !important;
  border-radius:34px !important;
  isolation:isolate;
}
.profile-hero-modern:before{
  content:"";
  position:absolute; inset:-2px;
  background:linear-gradient(135deg, rgba(56,189,248,.22), rgba(139,92,246,.14), rgba(236,72,153,.18));
  z-index:-1;
}
.profile-cover{
  height:235px !important;
  min-height:235px;
  background-color:#101827;
  background-size:calc(100% * var(--cover-scale,1)) auto !important;
  background-position:var(--cover-x,50%) var(--cover-y,50%) !important;
  background-repeat:no-repeat !important;
  position:relative;
}
.profile-cover:after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,6,23,.14), rgba(2,6,23,.90));
}
.profile-cover-shade{display:none!important;}

.profile-modern-row{
  position:relative;
  margin-top:-54px;
  padding:0 30px 28px;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:end;
  gap:22px;
  z-index:2;
}
.profile-avatar-wrap{
  width:136px;height:136px;
  border-radius:36px;
  padding:5px;
  background:linear-gradient(135deg,var(--cem-blue),var(--cem-violet),var(--cem-pink));
  box-shadow:0 18px 60px rgba(56,189,248,.23);
  position:relative;
}
.profile-avatar{
  width:100%!important;height:100%!important;object-fit:cover!important;
  border-radius:31px!important;
  border:4px solid rgba(2,6,23,.9)!important;
  background:#0f172a;
}
.profile-online-dot{
  position:absolute;right:5px;bottom:8px;width:22px;height:22px;border-radius:50%;
  background:var(--cem-green);border:4px solid #07111f;box-shadow:0 0 0 5px rgba(34,197,94,.16);
}
.profile-title h1{
  margin:0 0 9px!important;
  font-size:clamp(30px,4vw,54px)!important;
  line-height:1!important;
  letter-spacing:-.045em;
  color:#fff!important;
  text-shadow:0 12px 40px rgba(0,0,0,.35);
}
.profile-name-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.role-badge{
  padding:8px 12px!important;border-radius:999px!important;
  background:rgba(56,189,248,.12)!important;border:1px solid rgba(56,189,248,.28)!important;color:#b9edff!important;
  text-transform:uppercase;font-size:11px;letter-spacing:.08em;
}
.profile-mini-stats{display:flex;gap:10px;flex-wrap:wrap;}
.profile-mini-stats span{
  background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.18);border-radius:999px;
  padding:9px 12px;color:#dbeafe;font-weight:800;font-size:13px;
}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.profile-actions .btn,.profile-actions a,
.profile-page-static .btn{
  border-radius:16px!important;font-weight:900!important;text-decoration:none!important;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
}
.profile-data-export-link{color:#bfdbfe!important;background:rgba(255,255,255,.08);padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);}

.profile-tabs{
  margin:18px 0!important;
  padding:10px!important;
  display:flex!important;
  gap:8px!important;
  overflow-x:auto;
  position:sticky;top:74px;z-index:30;
  backdrop-filter:blur(18px);
}
.profile-tabs a{
  white-space:nowrap;
  padding:12px 15px!important;
  border-radius:16px!important;
  color:#cbd5e1!important;
  text-decoration:none!important;
  font-weight:900;
  border:1px solid transparent;
}
.profile-tabs a:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;}
.profile-tabs a.active{
  color:#04111d!important;
  background:linear-gradient(135deg,var(--cem-blue),#a78bfa)!important;
  box-shadow:0 12px 34px rgba(56,189,248,.22);
}

.profile-layout-refined{
  display:grid!important;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr)!important;
  gap:20px!important;
  align-items:start;
}
.profile-sidebar-modern{display:flex;flex-direction:column;gap:16px;position:sticky;top:150px;}
.profile-sidebar-modern .card,.profile-feed-modern .card{padding:20px!important;}
.section-title{display:flex!important;align-items:center;gap:11px;margin:0 0 16px!important;}
.section-title>span{
  width:42px;height:42px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(236,72,153,.16));
  border:1px solid rgba(255,255,255,.08);
}
.section-title h2,.section-title h3{margin:0!important;color:#fff!important;letter-spacing:-.025em;}
.profile-info-modern p,.profile-page-static .muted{color:#9fb0c8!important;line-height:1.6;}
.profile-info-modern strong{color:#e2e8f0!important;}

.profile-team-note-card textarea,
.profile-edit-card textarea,
.profile-edit-card input,
.profile-edit-card select{
  width:100%;border:1px solid rgba(148,163,184,.18)!important;border-radius:17px!important;
  background:rgba(2,6,23,.55)!important;color:#e5f0ff!important;padding:13px 14px!important;
}
.team-note-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;}
.team-note-meta button,.profile-edit-card button{
  border:0;border-radius:16px;background:linear-gradient(135deg,var(--cem-blue),var(--cem-violet));
  color:#04111d;font-weight:1000;padding:12px 16px;cursor:pointer;
}

.visitor-mini-list,.friends-grid-small{display:grid;gap:10px;}
.visitor-mini-row,.friend-tile{
  display:flex!important;align-items:center;gap:11px;text-decoration:none!important;color:#e2e8f0!important;
  padding:10px;border-radius:17px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);
}
.visitor-mini-row img,.friend-tile img{width:42px!important;height:42px!important;border-radius:14px!important;object-fit:cover;}
.visitor-mini-row small{display:block;color:#94a3b8;margin-top:2px;}

.profile-feed-modern{min-width:0;display:flex;flex-direction:column;gap:16px;}
.profile-about-wide p{font-size:16px;line-height:1.72;color:#d7e4f7!important;}
.profile-posts-head{position:relative;overflow:hidden;}
.profile-posts-head:after{
  content:"";position:absolute;right:-45px;top:-45px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.20),transparent 67%);
}
.profile-page-static .post-card,.profile-feed-modern article{
  border-radius:24px!important;border:1px solid rgba(148,163,184,.14)!important;
}

.profile-level-badges-card .level-unified-head,
.profile-level-summary{
  display:flex;align-items:center;gap:16px;padding:14px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);
}
.level-medal,.profile-level-icon{
  width:66px;height:66px;border-radius:21px;display:grid;place-items:center;font-size:30px;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.level-progress{height:13px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;overflow:hidden;margin:15px 0!important;}
.level-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cem-blue),var(--cem-violet),var(--cem-pink))!important;box-shadow:0 0 28px rgba(56,189,248,.33);}
.unified-badges{display:flex!important;gap:8px!important;flex-wrap:wrap!important;}
.unified-badges .badge,
.profile-badge-card{
  background:rgba(255,255,255,.055)!important;color:#e2e8f0!important;border:1px solid rgba(148,163,184,.16)!important;
}
.profile-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:18px;}
.profile-badge-card{display:flex;gap:14px;align-items:center;border-radius:22px!important;padding:16px!important;position:relative;overflow:hidden;}
.profile-badge-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--badge-color,#38bdf8);}
.profile-badge-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:27px;background:color-mix(in srgb, var(--badge-color,#38bdf8) 22%, transparent);}
.profile-badge-card b{color:#fff}.profile-badge-card p{margin:4px 0;color:#9fb0c8}.profile-badge-card small{color:#94a3b8}

.profile-sticker-wall,.profile-sticker-wall.compact{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px;}
.profile-gift-list{display:grid;gap:10px;margin-top:14px;}
.profile-gift-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  padding:12px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
}
.profile-gift-mini{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:rgba(15,23,42,.7);border:1px solid rgba(255,255,255,.08);}
.profile-gift-mini img{max-width:34px!important;max-height:34px!important;object-fit:contain;}
.profile-gift-mini span{font-size:25px}.profile-gift-info b{display:block;color:#fff}.profile-gift-info small,.profile-gift-row time{color:#94a3b8;font-size:12px}.profile-gift-info a{color:#93c5fd!important;text-decoration:none!important;}
.friends-grid-full{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}.friend-tile-wide{display:block!important}.friend-tile-wide a{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;}

.profile-page-static .success-card{background:rgba(34,197,94,.10)!important;border:1px solid rgba(34,197,94,.24)!important;color:#bbf7d0!important;border-radius:16px;padding:10px 12px;}

@media(max-width:980px){
  .profile-layout-refined{grid-template-columns:1fr!important;}
  .profile-sidebar-modern{position:static;order:2;}
  .profile-feed-modern{order:1;}
  .profile-modern-row{grid-template-columns:auto 1fr;align-items:end;}
  .profile-actions{grid-column:1/-1;justify-content:flex-start;}
  .profile-tabs{top:58px;}
}
@media(max-width:640px){
  .profile-web-bg{width:calc(100vw - 16px);margin-top:10px!important;}
  .profile-cover{height:180px!important;min-height:180px;}
  .profile-modern-row{margin-top:-45px;padding:0 16px 20px;gap:14px;}
  .profile-avatar-wrap{width:98px;height:98px;border-radius:28px;}.profile-avatar{border-radius:24px!important;}
  .profile-title h1{font-size:28px!important;}
  .profile-mini-stats span{font-size:12px;padding:8px 10px;}
  .profile-tabs{border-radius:18px!important;padding:7px!important;top:52px;}
  .profile-tabs a{padding:10px 12px!important;font-size:13px;}
  .profile-sidebar-modern .card,.profile-feed-modern .card{padding:16px!important;}
  .profile-gift-row{grid-template-columns:auto 1fr}.profile-gift-row time{grid-column:2;}
}