:root {
    --primary: #0d6efd;
    --best-bg: #f0fdf4;
    --best-border: #22c55e;
}

body {
    background: #f5f7fa;
    font-size: 15px;
}

.question-card {
    background: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .2s;
}
.question-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.question-card .q-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}
.question-card .q-title:hover {
    color: var(--primary);
}
.question-card .q-meta {
    font-size: .82rem;
    color: #888;
}
.question-card .q-meta .badge {
    font-size: .75rem;
}
.q-desc {
    color: #555;
    font-size: .9rem;
    margin: 6px 0 0;
}

.answer-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.answer-card.best {
    background: var(--best-bg);
    border-left: 4px solid var(--best-border);
}
.answer-card .best-badge {
    color: var(--best-border);
    font-weight: 600;
    font-size: .9rem;
}
.answer-content {
    font-size: .95rem;
    line-height: 1.8;
    color: #333;
    word-break: break-word;
}
.answer-meta {
    font-size: .82rem;
    color: #888;
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 14px;
}

.detail-header {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.detail-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.pagination .page-link {
    border-radius: 8px;
    margin: 0 3px;
}

.sidebar-box {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.sidebar-box h6 {
    font-weight: 700;
    margin-bottom: 12px;
    color: #333;
}
.sidebar-box .list-group-item {
    border: none;
    padding: 8px 0;
    font-size: .88rem;
}
.sidebar-box .list-group-item a {
    color: #444;
    text-decoration: none;
}
.sidebar-box .list-group-item a:hover {
    color: var(--primary);
}

.stats-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
}

@media (max-width: 768px) {
    .question-card { padding: 14px; }
    .detail-header { padding: 16px; }
    .detail-header h1 { font-size: 1.15rem; }
    .answer-card { padding: 14px; }
}