@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
background:#f5f7fb;
color:#111827;
min-height:100vh;
}

a{
text-decoration:none;
}

.auth-bg{
position:fixed;
inset:0;


background:
radial-gradient(circle at top left,#c7d2fe,transparent 35%),
radial-gradient(circle at bottom right,#ddd6fe,transparent 35%);

z-index:-1;


}

.auth-wrapper{
min-height:100vh;


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

padding:20px;


}

.auth-panel{
width:100%;
max-width:460px;


background:rgba(255,255,255,.95);

border:1px solid #e5e7eb;

border-radius:28px;

padding:40px;

box-shadow:
0 20px 60px rgba(0,0,0,.08);


}

.brand{
text-align:center;
margin-bottom:30px;
}

.brand-icon{
width:80px;
height:80px;


margin:auto;
margin-bottom:16px;

border-radius:50%;

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

font-size:34px;

color:white;

background:
linear-gradient(
    135deg,
    #4f46e5,
    #7c3aed
);


}

.brand h1{
font-size:32px;
margin-bottom:6px;
}

.brand p{
color:#64748b;
}

.field{
margin-bottom:18px;
}

.field label{
display:block;
margin-bottom:8px;
color:#475569;
font-size:14px;
font-weight:600;
}

.field input{
width:100%;
height:58px;


border:1px solid #dbe1ea;

background:white;

border-radius:14px;

padding:0 18px;

font-size:15px;

transition:.2s;


}

.field input:focus{
outline:none;


border-color:#4f46e5;

box-shadow:
0 0 0 4px rgba(79,70,229,.12);


}

.primary-btn{
width:100%;
height:58px;


border:none;

border-radius:14px;

cursor:pointer;

color:white;

font-size:16px;
font-weight:700;

background:
linear-gradient(
    90deg,
    #4f46e5,
    #7c3aed
);


}

.primary-btn:hover{
opacity:.95;
}

.register-link{
display:block;


text-align:center;

margin-top:20px;

color:#4f46e5;

font-weight:600;


}

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

.sidebar{
width:280px;


background:white;

border-right:1px solid #e5e7eb;

padding:25px;

display:flex;
flex-direction:column;


}

.sidebar-logo{
text-align:center;
margin-bottom:40px;
}

.logo-circle{
width:90px;
height:90px;


margin:auto;
margin-bottom:15px;

border-radius:50%;

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

font-size:36px;

color:white;

background:
linear-gradient(
    135deg,
    #4f46e5,
    #7c3aed
);


}

.sidebar-logo h2{
margin-bottom:4px;
}

.sidebar-logo span{
color:#64748b;
}

.sidebar-user{
background:#f8fafc;


border:1px solid #e2e8f0;

border-radius:16px;

padding:16px;


}

.user-label{
color:#64748b;
font-size:13px;
}

.user-phone{
margin-top:5px;


font-size:18px;
font-weight:700;


}

.sidebar-btn{
margin-top:auto;


text-align:center;

padding:14px;

border-radius:14px;

color:white;

font-weight:600;

background:
linear-gradient(
    90deg,
    #ef4444,
    #dc2626
);


}

.main-content{
flex:1;


padding:40px;

background:
radial-gradient(
    circle at top right,
    #eef2ff,
    transparent 35%
),
#f5f7fb;


}

.content-header{
display:flex;
justify-content:space-between;
align-items:center;


margin-bottom:30px;


}

.content-header h1{
font-size:34px;
}

.photo-count{
background:white;


border:1px solid #e5e7eb;

border-radius:12px;

padding:10px 16px;

color:#64748b;


}

.gallery-grid{
display:grid;


grid-template-columns:
repeat(auto-fill,minmax(260px,1fr));

gap:20px;


}

.photo-card{
position:relative;


overflow:hidden;

border-radius:20px;

background:white;

border:1px solid #e5e7eb;

box-shadow:
0 4px 20px rgba(0,0,0,.04);

transition:.25s;


}

.photo-card:hover{
transform:translateY(-5px);


box-shadow:
0 15px 40px rgba(0,0,0,.08);


}

.photo-card img{
width:100%;
height:260px;


object-fit:cover;

cursor:pointer;


}

.photo-overlay{
position:absolute;


left:0;
right:0;
bottom:0;

padding:15px;

background:
linear-gradient(
    transparent,
    rgba(0,0,0,.85)
);


}

.photo-date{
color:white;
font-size:13px;
}

.pagination{
margin-top:35px;


display:flex;
justify-content:center;

gap:10px;

flex-wrap:wrap;


}

.pagination a{
background:white;


border:1px solid #e5e7eb;

color:#374151;

padding:10px 15px;

border-radius:12px;


}

.pagination .active{
background:#4f46e5;
color:white;
}

.modal{
display:none;


position:fixed;
inset:0;

background:rgba(0,0,0,.85);

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

z-index:9999;


}

.modal img{
max-width:90%;
max-height:90%;


border-radius:20px;


}

.error-wrapper{
min-height:100vh;


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

padding:20px;


}

.error-card{
width:100%;
max-width:520px;


background:white;

border-radius:24px;

border:1px solid #e5e7eb;

padding:40px;

text-align:center;

box-shadow:
0 10px 40px rgba(0,0,0,.05);


}

.error-code{
font-size:90px;
font-weight:700;


color:#4f46e5;


}

.error-message{
margin-top:15px;
color:#64748b;
}

.back-btn{
display:inline-block;


margin-top:25px;

padding:12px 20px;

border-radius:12px;

color:white;

background:
linear-gradient(
    90deg,
    #4f46e5,
    #7c3aed
);


}

.photo-card video{
    width:100%;
    height:260px;
    object-fit:cover;
    background:black;
}

.video-badge{
    position:absolute;

    top:10px;
    right:10px;

    background:rgba(0,0,0,.7);

    color:white;

    padding:6px 10px;

    border-radius:999px;

    font-size:12px;
    font-weight:600;

    z-index:10;
}

.sidebar-menu{
    margin-top:25px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.menu-btn{
    display:flex;
    align-items:center;
    gap:12px;

    padding:14px;

    border-radius:14px;

    background:#f4f6fb;

    color:#222;

    font-weight:600;

    transition:.2s;
}

.menu-btn:hover{
    background:#e6ecff;
}

.menu-btn.active{
    background:#4f7cff;
    color:white;
}

.upload-box{

max-width:650px;

padding:35px;

background:white;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.upload-box input{

width:100%;

padding:18px;

margin-bottom:25px;

border:2px dashed #cfd7e6;

border-radius:12px;

}

.upload-box button{

width:100%;

}

.sidebar-menu{

display:flex;
flex-direction:column;

gap:12px;

margin-top:25px;

}

.menu-btn{

padding:14px;

border-radius:12px;

background:white;

color:#222;

font-weight:600;

transition:.2s;

border:1px solid #ddd;

}

.menu-btn:hover{

background:#eef3ff;

}

.menu-btn.active{

background:#4f7cff;

color:white;

border-color:#4f7cff;

}

.upload-box{

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

max-width:700px;

}

.upload-box input[type=file]{

width:100%;

padding:20px;

border:2px dashed #cfd7e6;

border-radius:12px;

margin-bottom:25px;

}

.gallery-grid video{

width:100%;

height:260px;

object-fit:cover;

display:block;

border-radius:16px;

background:black;

}

.auth-note{
    margin-top:12px;
    text-align:center;
    font-size:12px;
    color:#8a8f98;
    line-height:1.5;
}