*{box-sizing:border-box}

body{
margin:0;
font-family:Inter,Arial,Helvetica,sans-serif;
background:#0f172a;
color:#e5e7eb
}

a{
color:#38bdf8;
text-decoration:none
}

label{
display:block;
margin-top:13px;
margin-bottom:6px;
color:#cbd5e1
}

input,select,textarea,button{
width:100%;
padding:12px;
border-radius:14px;
border:1px solid #334155;
background:#020617;
color:#fff
}

textarea{
min-height:110px
}

button,.btn{
display:inline-block;
width:auto;
background:linear-gradient(135deg,#38bdf8,#22c55e);
color:#06111f;
border:0;
padding:12px 16px;
font-weight:800;
cursor:pointer;
border-radius:999px
}

.btn.secondary{
background:#475569;
color:#fff
}

.btn.dark{
background:#020617;
color:#fff;
border:1px solid #334155
}

.login-box{
width:420px;
max-width:92%;
margin:70px auto;
background:#111827;
padding:28px;
border-radius:28px;
box-shadow:0 18px 60px rgba(0,0,0,.35)
}

.login-box.wide{
width:720px
}

.layout{
display:flex;
min-height:100vh
}

aside{
width:250px;
background:#020617;
padding:22px;
border-right:1px solid #1e293b;
position:fixed;
min-height:100vh
}

aside h2{
font-size:22px;
margin-bottom:25px;
color:#fff
}

aside a{
display:block;
padding:13px 14px;
border-radius:16px;
margin-bottom:8px;
color:#cbd5e1
}

aside a.active,
aside a:hover{
background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(34,197,94,.14));
color:#fff
}

main{
flex:1;
margin-left:250px;
padding:28px
}

.cards{
display:grid;
grid-template-columns:repeat(4,minmax(150px,1fr));
gap:16px;
margin:20px 0
}

.card{
background:#111827;
padding:22px;
border-radius:24px;
border:1px solid #1e293b;
box-shadow:0 10px 35px rgba(0,0,0,.16)
}

.card b{
display:block;
font-size:34px
}

.card span{
color:#94a3b8
}

.alert,.notice{
padding:13px 15px;
border-radius:16px;
margin:12px 0;
background:#1e293b
}

.alert.danger{
background:#7f1d1d
}

.alert.success{
background:#14532d
}

.table{
overflow-x:auto;
background:#111827;
border:1px solid #1e293b;
border-radius:24px;
padding:10px;
margin-bottom:26px
}

table{
width:100%;
border-collapse:collapse
}

th,td{
padding:13px;
border-bottom:1px solid #334155;
text-align:left;
font-size:14px;
vertical-align:top
}

th{
color:#93c5fd
}

.target{
max-width:340px;
word-break:break-all;
color:#cbd5e1
}

.copy{
padding:6px 10px;
font-size:12px;
margin-left:5px;
background:#0ea5e9;
color:#00111f
}

.check{
display:flex;
align-items:center;
gap:8px
}

.check input{
width:auto
}

/* HEYLINK USER */

.user-grid{
display:grid;
grid-template-columns:380px 1fr;
gap:22px;
align-items:start
}

.profile-card{
position:sticky;
top:24px;
text-align:center;
background:
radial-gradient(circle at top,#164e63 0%,rgba(17,24,39,.95) 42%),
#111827;
padding:24px;
border-radius:28px;
border:1px solid #1e293b
}

.avatar{
width:92px;
height:92px;
border-radius:50%;
object-fit:cover;
border:4px solid rgba(56,189,248,.7);
margin:5px auto 14px;
background:#020617
}

.avatar-fallback{
width:92px;
height:92px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:5px auto 14px;
font-size:36px;
font-weight:900;
border:4px solid rgba(56,189,248,.7);
background:linear-gradient(135deg,#38bdf8,#22c55e);
color:#020617
}

.profile-name{
font-size:25px;
font-weight:900;
margin:5px 0
}

.profile-username{
color:#93c5fd;
margin-bottom:10px
}

.profile-bio{
color:#cbd5e1;
line-height:1.5
}

.profile-url{
margin-top:14px;
display:block;
padding:12px;
background:#020617;
border:1px solid #334155;
border-radius:16px;
word-break:break-all
}

.link-list{
display:grid;
gap:13px
}

.link-card{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
transition:.18s ease;
background:#111827;
padding:20px;
border-radius:24px;
border:1px solid #1e293b
}

.link-card:hover{
transform:translateY(-2px);
border-color:#38bdf8
}

.link-title{
font-weight:800;
font-size:17px;
color:#fff
}

.link-url{
font-size:13px;
color:#94a3b8;
word-break:break-all;
margin-top:5px
}

.link-meta{
font-size:12px;
color:#93c5fd;
margin-top:7px
}

.link-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end
}

.mini-btn{
display:inline-block;
padding:8px 11px;
border-radius:999px;
background:#1e293b;
color:#e5e7eb;
font-size:12px;
font-weight:800
}

.mini-btn.red{
background:#7f1d1d;
color:#fff
}

.heylink-top{
display:flex;
justify-content:space-between;
gap:16px;
align-items:center;
margin-bottom:20px
}

.heylink-title h1{
margin:0;
font-size:30px
}

.heylink-title p{
margin:6px 0 0;
color:#94a3b8
}

/* ANALYTICS */

.analytics-grid{
display:grid;
grid-template-columns:repeat(2,minmax(240px,1fr));
gap:16px;
margin:18px 0
}

.panel-lite{
background:rgba(17,24,39,.92);
border:1px solid #1e293b;
border-radius:24px;
padding:20px;
box-shadow:0 10px 35px rgba(0,0,0,.16)
}

.panel-lite h3{
margin:0 0 14px;
font-size:18px;
color:#fff
}

.rank-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:10px 0;
border-bottom:1px solid #243449
}

.rank-row:last-child{
border-bottom:0
}

.rank-row span{
color:#cbd5e1;
word-break:break-all
}

.rank-row b{
color:#38bdf8
}

.muted{
color:#94a3b8
}

/* PUBLIC PROFILE */

.public-page{
min-height:100vh;
padding:28px 16px;
background:
radial-gradient(circle at top,#164e63 0%,#020617 48%,#000 100%)
}

.public-card{
width:100%;
max-width:520px;
margin:0 auto;
text-align:center
}

.public-avatar,
.public-avatar-fallback{
width:105px;
height:105px;
border-radius:50%;
margin:8px auto 15px;
object-fit:cover;
border:4px solid rgba(255,255,255,.7)
}

.public-avatar-fallback{
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
font-weight:900;
background:#38bdf8;
color:#020617
}

.public-name{
font-size:28px;
font-weight:900
}

.public-bio{
color:#cbd5e1;
margin:10px 0 24px;
line-height:1.55
}

.public-links{
display:grid;
gap:13px
}

.public-link{
display:block;
padding:17px 18px;
border-radius:22px;
background:rgba(255,255,255,.96);
color:#020617;
font-weight:900;
box-shadow:0 12px 28px rgba(0,0,0,.22);
transition:.15s ease
}

.public-link:hover{
transform:scale(1.015)
}

.public-footer{
color:#64748b;
margin-top:26px;
font-size:13px
}

/* RESPONSIVE */

@media(max-width:950px){

.layout{
display:block
}

aside{
position:relative;
width:100%;
min-height:auto
}

main{
margin-left:0;
padding:18px
}

.cards,
.analytics-grid{
grid-template-columns:1fr
}

.user-grid{
grid-template-columns:1fr
}

.profile-card{
position:relative;
top:auto
}

.heylink-top{
display:block
}

.heylink-top .btn{
margin-top:12px
}

.link-card{
display:block
}

.link-actions{
margin-top:12px;
justify-content:flex-start
}

}