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

/* Centered Auth Boxes */
.center-container {
    display:flex; justify-content:center; align-items:center;
    height:100vh; background: linear-gradient(135deg,#1f1c2c,#928dab);
}

.auth-box {
    background: #0b0c10; color:white; padding:40px;
    border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    width:350px; text-align:center;
    transform: translateZ(0); /* 3D */
}

.auth-box h2 { margin-bottom:20px; }

.auth-box input {
    width:100%; padding:10px; margin:10px 0;
    border-radius:10px; border:none;
    background: #1f2833; color:white; font-size:16px;
}

.auth-box button {
    width:100%; padding:12px; margin-top:15px;
    border:none; border-radius:12px; font-size:16px;
    background: linear-gradient(145deg,#0f3460,#162447);
    color:white; cursor:pointer;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.4),
                -4px -4px 10px rgba(255,255,255,0.1);
    transition: all 0.2s ease;
}

.auth-box button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 6px 6px 15px rgba(0,0,0,0.6),
                -6px -6px 15px rgba(255,255,255,0.15);
}

/* Dashboard */
.dashboard-container {
    display:flex; height:100vh; background:#1f1f2e;
}

/* Sidebar */
.sidebar {
    width:220px; background:#0b0c10; padding:20px;
    color:white; display:flex; flex-direction:column;
}

.sidebar h3 { margin-bottom:20px; text-align:center; }

.sidebar button {
    background: linear-gradient(145deg,#0f3460,#162447);
    color:white; border:none; border-radius:12px;
    padding:12px; margin-bottom:12px; cursor:pointer;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.4),
                -4px -4px 10px rgba(255,255,255,0.1);
    transition: all 0.2s ease;
}

.sidebar button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 6px 6px 15px rgba(0,0,0,0.6),
                -6px -6px 15px rgba(255,255,255,0.15);
}

/* Main Content */
.main-content {
    flex:1; padding:40px; overflow-y:auto; color:white;
}

#content button {
    background: linear-gradient(145deg,#0f3460,#162447);
    color:white; border:none; border-radius:12px;
    padding:10px 15px; margin:5px; cursor:pointer;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.4),
                -3px -3px 10px rgba(255,255,255,0.1);
    transition: all 0.2s ease;
}

#content button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 5px 5px 12px rgba(0,0,0,0.6),
                -5px -5px 12px rgba(255,255,255,0.15);
}

.stem-grid {
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:20px; margin-top:20px;
}