:root{
--bg:#0f172a;
--card:#1e293b;
--text:#e2e8f0;
--accent:#38bdf8;
}

.light{
--bg:#f1f5f9;
--card:#ffffff;
--text:#0f172a;
--accent:#0284c7;
}

body{
margin:0;
font-family:system-ui;
background:var(--bg);
color:var(--text);
}

.container{
max-width:700px;
margin:auto;
padding:20px;
}

.app-header{
display:flex;
justify-content:center;
padding:20px;
}

.search-card{
display:flex;
gap:10px;
background:var(--card);
padding:15px;
border-radius:12px;
}

input{
flex:1;
padding:10px;
border:none;
border-radius:8px;
}

button{
padding:10px 15px;
border:none;
border-radius:8px;
cursor:pointer;
background:var(--accent);
color:white;
}

.profile{
background:var(--card);
padding:20px;
border-radius:15px;
text-align:center;
margin-top:20px;
}

.profile img{
width:120px;
border-radius:50%;
}

.stats{
display:flex;
justify-content:space-around;
margin-top:15px;
}

.loading,.error{
text-align:center;
margin-top:20px;
}

.hidden{
display:none;
}

.recent{
margin-top:20px;
}

.recent button{
margin:5px;
}

.theme-btn {
    position: fixed;      
    top: 20px;            
    left: 20px;           
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: var(--accent);
    color: white;
    transition: background 0.3s, color 0.3s;
    z-index: 1000;        /* يتأكد انه فوق كل العناصر */
}