:root{
  --bg:#301c49;
  --panel:#1c1129;
  --aside:#301c49;
  --line1:#8E48FF; --line2:#552B99; --line3:#6200FF;
}

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body {
    background:var(--bg);
    color:#fff;
    font-family:"ADLaM Display",system-ui;
}

.layout-profile{
  display:grid;
  grid-template-columns:auto 1fr 300px;
  grid-template-rows:120px 1fr;
  grid-template-areas:
    "sidebar banner right"
    "sidebar center right";
  min-height:100vh;
}


.sidebar{
  grid-area: sidebar;
  position: relative;
  display: flex;
  align-items: flex-start;
  background: var(--aside);
}

.sidebar h1{
    margin:20px; 
    font-size:30px; 
    font-weight:400; 
    text-shadow:-2px 0 #A13DFF;
}
.sidebar::after{
  content:""; 
  position:absolute; 
  top:0; 
  right:0; 
  width:1px; 
  height:100%;
  background:linear-gradient(180deg,var(--line1),var(--line2) 50%,var(--line3));
}

.banner {
    grid-area:banner; 
    display:grid; 
    place-items:center; 
    background:#26163a; 
    position:relative;
}

.banner::after{
  content:""; 
  position:absolute; 
  left:0; 
  right:0; 
  bottom:0; 
  height:1px;
  background:linear-gradient(90deg,var(--line1),var(--line2) 50%,var(--line3));
}
.banner-thumb{
  width:72px; 
  height:72px; 
  border-radius:12px; 
  display:grid; 
  place-items:center;
  border:1px solid transparent; 
  font-size:28px;
  background:
    linear-gradient(#3a2552,#3a2552) padding-box,
    linear-gradient(90deg,var(--line1),var(--line2) 50%,var(--line3)) border-box;
}

.center {
    grid-area:center; 
    background:var(--panel); 
    position:relative;
}

.center::after { 
    display: none; 
}

.profile-card {
  display:grid; 
  grid-template-columns:72px 1fr; 
  gap:16px;
  padding:20px; 
  position:relative;
  border-top:1px solid rgba(142,72,255,.15);
}

.profile-card::after {
  content:""; 
  position:absolute; 
  left:0; 
  right:0; 
  bottom:0; 
  height:2px;
  background:linear-gradient(90deg,var(--line1),var(--line2) 50%,var(--line3)); opacity:.7;
}

.p-avatar {
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.p-body {
    display:grid; 
    gap:6px;
}

.p-line {
    color:#d8c8ff;
    opacity:.95;
}

.p-name {
    font-weight:800; 
    font-size:22px;
}

.p-handle {
    color:#a89ad8; 
    font-size:14px;
}

.p-actions {
    display:flex; 
    gap:10px; 
    align-items:center; 
    margin-top:6px;
}

.btn {
  border:1px solid transparent; 
  border-radius:999px; 
  padding:6px 14px; 
  font-weight:800; color:#fff;
  background:linear-gradient(#2a1a3a,#2a1a3a) padding-box,
            linear-gradient(90deg,var(--line1),var(--line2) 50%,var(--line3)) border-box;
}

.btn.ghost{
    padding:6px 10px; 
    border-radius:10px;
}

.btn:hover{
    box-shadow:0 0 12px rgba(142,72,255,.25);
}

.card { 
    background:transparent; 
    position:relative;
}

.post{
  display:grid; grid-template-columns:56px 1fr 140px; align-items:center; column-gap:16px;
  padding:16px 20px; border-top:1px solid rgba(142,72,255,.15);
}

.post::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--line1),var(--line2) 50%,var(--line3));
}

.avatar { 
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.content {  
    display:grid; 
    gap:8px;
}

.user-row { 
    display:flex; 
    gap:10px; 
    align-items:baseline; 
    flex-wrap:wrap;
}

.user { 
    font-weight:800; 
}

.meta { 
    color:#b3a3ea; 
    font-size:12px;
}

.text { 
    color:#eee; 
    line-height:1.5;
}

/*Ayuda por favor me estoy muriendo 😭 */

.media { 
    justify-self:end; 
    width:120px; 
    height:120px; 
    border-radius:10px; 
    padding:6px;
    background:rgba(255,255,255,.04); 
    box-shadow:0 0 0 1px rgba(142,72,255,.25) inset;
}

.media img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    border-radius:8px;
}

.actions { 
    display:flex; 
    gap:18px; 
    margin-top:4px;
}

.icon {
  background:none; 
  border:0; 
  color:#cbbaff; 
  font-size:18px; 
  cursor:pointer; 
  padding:4px;
}

.icon:hover { 
    text-shadow:0 0 8px rgba(142,72,255,.6);
}

.placeholder{ 
    height:220px; 
    border-top:1px solid rgba(142,72,255,.15);
}

.right{
  grid-area: right;
  position: relative;
  background: var(--aside);
}

.right::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    var(--line1) 0%,
    var(--line2) 50%,
    var(--line3) 100%
  );
  pointer-events: none;
}