/* LIGHT */
body.light {
  background: #f8f9fb;
  color: #000;
}

/* DARK */
body.dark {
  background: #0f172a;
  color: #fff;
}

/* cards */
body.dark .card {
  background: #1e293b;
  border-color: #334155;
}

/* navbar */
body.dark .header {
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

/* text */
body.dark p {
  color: #cbd5e1;
}
.alert{
    background:#ffe0e0;
    color:#c40000;
    padding:10px;
    border-radius:8px;
    margin-bottom:15px;
    font-size:14px;
}
.flash-msg{
    background: #111;
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 15px;
    animation: fadeIn 0.4s ease;
    transition: opacity 0.5s ease;
}

.hide-msg{
    opacity:0;
    transform: translateY(-10px);
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform: translateY(-10px);
    }
    to{
        opacity:1;
        transform: translateY(0);
    }
}
@media (max-width: 768px){

.top-nav,
header{
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
}

.nav-right{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.layout{
    flex-direction:column;
}

.sidebar{
    width:100%;
    position:static;
}

.main{
    width:100%;
    padding:15px;
}

.grid,
.projects,
.lc-top{
    grid-template-columns:1fr !important;
    display:grid;
}

.hero h1{
    font-size:38px;
}

.hero p{
    font-size:16px;
}

.card{
    padding:18px;
}
}