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

body{
font-family:'Poppins',sans-serif;
background:radial-gradient(circle at top,#1a001f,#000);
color:white;
overflow-x:hidden;
}

/* Sakura Canvas */
#sakura{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

/* Header */
.main-header{
background:rgba(0,0,0,0.8);
padding:20px;
text-align:center;
border-bottom:2px solid hotpink;
box-shadow:0 0 25px hotpink;
}

.main-header h1{
color:hotpink;
text-shadow:0 0 20px hotpink;
}

nav a{
color:white;
margin:0 10px;
text-decoration:none;
transition:0.3s;
}

nav a:hover{
color:hotpink;
text-shadow:0 0 10px hotpink;
}

/* Container */
.container{
padding:30px;
text-align:center;
}

/* Cards */
.card{
background:rgba(20,0,30,0.9);
border:2px solid hotpink;
border-radius:25px;
padding:25px;
margin:20px;
display:inline-block;
width:380px;              /* 🔥 breiter */
min-height:520px;         /* etwas höher für gleichmäßige Optik */
vertical-align:top;
transition:0.4s;
transform-style:preserve-3d;
box-shadow:0 0 25px rgba(255,105,180,0.4);
}

.card:hover{
transform:rotateY(8deg) scale(1.05);
box-shadow:0 0 40px hotpink;
}

.card img{
width:100%;
height:280px;
object-fit:cover;   /* Bild bleibt schön zugeschnitten */
border-radius:15px;
margin-bottom:15px;
}

.tag{
display:inline-block;
background:hotpink;
color:black;
padding:5px 10px;
border-radius:15px;
margin:4px;
font-size:12px;
font-weight:bold;
}

/* Buttons */
button{
background:linear-gradient(45deg,hotpink,#ff66cc);
border:none;
padding:10px 15px;
border-radius:15px;
color:white;
font-weight:bold;
cursor:pointer;
transition:0.3s;
}

button:hover{
transform:scale(1.1);
box-shadow:0 0 15px hotpink;
}

/* Forms */
input, textarea, select{
width:250px;
padding:8px;
margin:5px;
border-radius:10px;
border:none;
background:#111;
color:white;
}

/* Footer */
.footer{
padding:20px;
text-align:center;
border-top:1px solid hotpink;
margin-top:50px;
}

/* Responsive */
@media(max-width:900px){
.card{
width:90%;
}
}

.cursor-glow{
position:absolute;
width:10px;
height:10px;
background:hotpink;
border-radius:50%;
pointer-events:none;
box-shadow:0 0 20px hotpink;
z-index:9999;
}

/* ===============================
   ADMIN PANEL DESIGN
=================================*/

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

.admin-sidebar{
width:240px;
background:#0f0015;
border-right:2px solid hotpink;
padding:20px;
box-shadow:0 0 20px hotpink;
}

.admin-sidebar h2{
color:hotpink;
margin-bottom:20px;
text-shadow:0 0 15px hotpink;
}

.admin-sidebar a{
display:block;
color:white;
text-decoration:none;
padding:10px;
margin-bottom:10px;
border-radius:10px;
transition:0.3s;
}

.admin-sidebar a:hover{
background:hotpink;
color:black;
box-shadow:0 0 15px hotpink;
}

.admin-content{
flex:1;
padding:30px;
background:linear-gradient(180deg,#14001f,#000);
}

.admin-card{
background:rgba(30,0,40,0.9);
padding:20px;
border-radius:20px;
margin-bottom:20px;
border:2px solid hotpink;
box-shadow:0 0 20px hotpink;
}

.admin-table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

.admin-table th,
.admin-table td{
padding:10px;
border-bottom:1px solid hotpink;
text-align:left;
}

.admin-table tr:hover{
background:rgba(255,105,180,0.1);
}

/* ===============================
   PROFILE DESIGN
=================================*/

.profile-wrapper{
display:flex;
justify-content:center;
margin-top:40px;
}

.profile-card{
background:rgba(30,0,40,0.95);
border:2px solid hotpink;
border-radius:25px;
padding:40px;
width:400px;
text-align:center;
box-shadow:0 0 30px hotpink;
}

.profile-card h2{
margin-bottom:20px;
color:hotpink;
text-shadow:0 0 15px hotpink;
}

.profile-info{
margin-bottom:15px;
font-size:16px;
}

.profile-actions{
margin-top:20px;
display:flex;
flex-direction:column;
gap:10px;
}