/* ---------------------------
GLOBAL
----------------------------*/

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

body{
font-family:Arial, Helvetica, sans-serif;
background:#f5f7fb;
color:#333;
line-height:1.6;
}

a{
text-decoration:none;
color:#0066cc;
}

a:hover{
color:#004999;
}

.container{
width:1100px;
margin:auto;
padding:20px;
}

/* ---------------------------
LAYOUT
----------------------------*/

.main-layout{
display:flex;
gap:25px;
align-items:flex-start;
}

.content-area{
flex:3;
}

.sidebar{
flex:1;
}

/* ---------------------------
QUESTION CARD
----------------------------*/

.question{
background:#fff;
border-radius:6px;
padding:20px;
margin-bottom:20px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.question h2{
font-size:20px;
margin-bottom:8px;
}

.question h2 a{
color:#222;
}

.question-meta{
font-size:13px;
color:#777;
margin-bottom:10px;
}

.question-desc{
font-size:15px;
margin-bottom:12px;
color:#444;
}

.read-more{
display:inline-block;
padding:6px 12px;
background:#4caf50;
color:#fff;
border-radius:4px;
font-size:13px;
}

.read-more:hover{
background:#3f9143;
}

.question-footer{
margin-top:10px;
font-size:13px;
color:#666;
display:flex;
gap:15px;
flex-wrap:wrap;
}

.question-answered{
background:#e8f5e9;
color:#2e7d32;
padding:3px 8px;
border-radius:3px;
font-size:12px;
}

/* ---------------------------
SIDEBAR
----------------------------*/

.widget{
background:#fff;
padding:20px;
margin-bottom:20px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.widget h3{
font-size:18px;
margin-bottom:15px;
border-bottom:1px solid #eee;
padding-bottom:8px;
}

/* ---------------------------
BUTTONS
----------------------------*/

.btn{
display:block;
text-align:center;
padding:10px;
background:#007bff;
color:#fff;
border-radius:4px;
margin-bottom:10px;
font-size:14px;
}

.btn:hover{
background:#005fd1;
}

.ask-btn{
background:#ff5722;
}

.ask-btn:hover{
background:#e64a19;
}

/* ---------------------------
USER LIST
----------------------------*/

.user-list{
list-style:none;
}

.user-list li{
padding:6px 0;
border-bottom:1px solid #eee;
}

.user-list li:last-child{
border-bottom:none;
}

.user-list a{
color:#333;
font-size:14px;
}

.user-list a:hover{
color:#007bff;
}

/* ---------------------------
RESPONSIVE
----------------------------*/

@media(max-width:900px){

.container{
width:95%;
}

.main-layout{
flex-direction:column;
}

.sidebar{
width:100%;
}

}



.site-header{
background:#fff;
border-bottom:1px solid #eee;
}

.header-inner{
width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 0;
}

.main-nav ul{
list-style:none;
display:flex;
gap:20px;
}

.nav-btn{
margin-left:10px;
padding:6px 10px;
background:#007bff;
color:#fff;
border-radius:4px;
}

.site-footer{
background:#222;
color:#ccc;
margin-top:40px;
}

.footer-inner{
width:1100px;
margin:auto;
display:flex;
gap:40px;
padding:40px 0;
}

.footer-col ul{
list-style:none;
}

.footer-col ul li{
margin-bottom:6px;
}

.footer-col a{
color:#ccc;
}

.footer-bottom{
text-align:center;
padding:15px;
border-top:1px solid #444;
}




/* =====================
PAGINATION
===================== */

.pagination{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:30px;
align-items:center;
}

.pagination a,
.pagination span{
display:inline-block;
padding:8px 14px;
border-radius:4px;
font-size:14px;
text-decoration:none;
border:1px solid #ddd;
background:#ffffff;
color:#333;
transition:0.2s;
}

.pagination a:hover{
background:#007bff;
color:#fff;
border-color:#007bff;
}

.pagination .page-current{
background:#007bff;
color:#fff;
border-color:#007bff;
font-weight:600;
}

.pagination .page-disabled{
background:#f3f3f3;
color:#aaa;
border:1px solid #ddd;
cursor:not-allowed;
}

.pagination .page-dots{
border:none;
background:none;
color:#777;
padding:8px 6px;
}

.pagination{
justify-content:center;
}

.error-box{
background:#fff;
padding:40px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.06);
text-align:center;
margin-bottom:30px;
}

.error-code h2{
font-size:70px;
margin:0;
color:#e91e63;
}

.error-code h3{
margin-top:10px;
font-size:26px;
}

.home-btn{
background:#e91e63;
color:#fff;
padding:10px 18px;
border-radius:4px;
text-decoration:none;
display:inline-block;
}

.home-btn:hover{
background:#c2185b;
}