.share-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.72);

display:none;
align-items:center;
justify-content:center;

padding:20px;

z-index:999999;

backdrop-filter:blur(8px);
}

.share-overlay.active{
display:flex;
}

.share-modal{
width:100%;
max-width:760px;

background:#fff;

border-radius:28px;

padding:28px;

box-shadow:
0 30px 80px rgba(0,0,0,.28);

animation:shareFade .18s ease;
}

@keyframes shareFade{

from{
opacity:0;
transform:translateY(12px) scale(.98);
}

to{
opacity:1;
transform:translateY(0) scale(1);
}

}

.share-head{
margin-bottom:20px;
}

.share-title{
font-size:34px;
font-weight:900;
color:#7c3aed;
line-height:1;
margin-bottom:8px;
}

.share-subtitle{
font-size:14px;
color:#6b7280;
line-height:1.5;
}

.share-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:18px;
}

.share-label{
font-size:13px;
font-weight:800;
color:#6b7280;
margin-bottom:8px;
}

.share-message{
width:100%;
min-height:260px;

border:1px solid #d1d5db;
border-radius:18px;

padding:18px;

font-size:14px;
font-family:inherit;
line-height:1.7;

resize:vertical;

outline:none;
}

.share-message:focus{
border-color:#7c3aed;
box-shadow:0 0 0 4px rgba(124,58,237,.12);
}

.share-actions{
display:flex;
justify-content:flex-end;
gap:12px;
margin-top:22px;
flex-wrap:wrap;
}

.share-close{
background:#e5e7eb !important;
color:#111827 !important;
box-shadow:none !important;
}

.share-close:hover{
background:#d1d5db !important;
}

@media(max-width:768px){

.share-overlay{
padding:0;
align-items:flex-end;
}

.share-modal{
max-width:none;
height:92vh;

border-radius:
28px 28px 0 0;

overflow:auto;

padding:22px;
}

.share-grid{
grid-template-columns:1fr;
}

.share-title{
font-size:28px;
}

.share-message{
min-height:320px;
font-size:16px;
}

.share-actions{
flex-direction:column;
}

.share-actions .btn{
width:100%;
}

}