:root{
--brand:#ff1f8f; --brand-2:#ff6ab6; --text:#0b1220;
--muted:#595f6a;
--card:#ffffff;
--card-soft:#ffe8f3; --border:#e6e8ee;
--radius:14px;
--shadow:0 10px 30px rgba(0,0,0,.08);
}
.woocrm-wrap{
min-height:70vh;
padding:32px 16px 120px;
color:var(--text);
background:
linear-gradient(#fff,#fff); position:relative;
overflow:hidden;
} .woocrm-wrap.woocrm-login-page::after,
.woocrm-login-bg::after{
content:"";
position:absolute;
left:-10vw; right:-10vw; bottom:-18vh;
height:48vh;
background:
radial-gradient(150% 120% at 20% 110%, rgba(255,31,143,.25) 0 50%, transparent 51%),
radial-gradient(120% 100% at 80% 120%, rgba(255,31,143,.18) 0 52%, transparent 53%),
radial-gradient(180% 140% at 60% 130%, rgba(255,106,182,.18) 0 48%, transparent 49%);
filter: blur(0.2px);
transform: rotate(-2deg);
pointer-events:none;
} .woocrm-login-header{
max-width:760px;
margin:0 auto 16px;
text-align:center;
}
.woocrm-login-logo{
font-size:56px;
font-weight:700;
letter-spacing:.5px;
line-height:1.1;
margin:8px auto 8px;
}
.woocrm-login-logo small{
display:block;
font-size:14px;
letter-spacing:2px;
color:var(--muted);
margin-top:6px;
} .woocrm-avatar{
width:72px; height:72px; margin:8px auto 8px; border-radius:50%;
background:
radial-gradient(circle at 30% 20%, #fff 0 25%, rgba(255,255,255,0) 26%),
radial-gradient(circle at 70% 80%, rgba(255,255,255,.65) 0 25%, rgba(255,255,255,0) 26%),
linear-gradient(180deg, var(--brand), #e8007d);
box-shadow: 0 10px 24px rgba(255,31,143,.35), inset 0 0 0 2px rgba(255,255,255,.25);
position:relative;
}
.woocrm-avatar::after{ content:"";
position:absolute; inset:0;
background:
radial-gradient(circle 10px at 50% 35%, #fff 98%, transparent 100%),
radial-gradient(ellipse 22px 12px at 50% 60%, #fff 98%, transparent 100%);
} .woocrm-title{
font-size:24px;
margin:6px 0 0;
} .woocrm-card{
max-width:720px;
margin:16px auto 0;
background:linear-gradient(180deg, var(--card-soft), #ffeef7);
border:1px solid #ffd0e6;
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:28px 26px;
} .woocrm-row{display:flex; flex-wrap:wrap; gap:14px;}
.woocrm-field{flex:1 1 100%;}
.woocrm-field label{display:block; font-size:14px; font-weight:600; color:#444; margin-bottom:6px;}
.woocrm-input{
width:100%;
padding:14px 44px 14px 14px;
border-radius:12px;
border:1px solid #d6d8de;
background:#fff;
color:var(--text);
transition:border-color .15s ease, box-shadow .15s ease;
box-shadow: 0 2px 0 rgba(0,0,0,.02) inset;
}
.woocrm-input:focus{
outline:none;
border-color:var(--brand);
box-shadow:0 0 0 4px rgba(255,31,143,.12);
} .woocrm-input-eye{
position:relative;
}
.woocrm-input-eye .woocrm-input{
padding-right:48px;
}
.woocrm-input-eye .eye{
position:absolute; right:12px; top:35px; width:28px; height:18px;
background:
radial-gradient(circle 3px at 50% 50%, #888 98%, transparent 100%),
radial-gradient(ellipse 12px 8px at 50% 50%, transparent 60%, #888 61% 62%, transparent 63%);
opacity:.8;
} .woocrm-btn{
display:inline-block;
width:100%;
padding:12px 16px;
border-radius:10px;
border:0;
background:linear-gradient(180deg, var(--brand), #e8007d);
color:#fff; font-weight:700; text-align:center;
box-shadow: 0 8px 18px rgba(255,31,143,.35);
cursor:pointer;
}
.woocrm-btn:hover{filter:brightness(1.03);}
.woocrm-links{
text-align:center;
margin-top:14px;
color:var(--muted);
}
.woocrm-links a{
color:var(--brand);
text-decoration:none;
font-weight:600;
}
.woocrm-links a:hover{text-decoration:underline;} .woocrm-smalllinks{
text-align:center;
margin-top:14px;
color:var(--brand);
font-weight:600;
}
.woocrm-legal{
text-align:center;
margin-top:14px;
color:var(--brand);
font-weight:500;
opacity:.9;
} .woocrm-alert{padding:12px 14px; border-radius:12px; margin-bottom:12px;}
.woocrm-alert.success{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;}
.woocrm-alert.error{background:#fef2f2; color:#991b1b; border:1px solid #fecaca;} @media (min-width: 640px){
.woocrm-card{padding:30px 36px;}
}