.breadcrumb {
    display: flex; align-items: center; max-width: 1200px; margin: 20px auto;
    padding: 0 15px; text-align: left;
}
.breadcrumb a {
    color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px;
    transition: color 0.3s;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb span {
    color: rgba(255, 255, 255, 0.4); margin: 0 8px; font-size: 14px;
}
.breadcrumb .current { color: #fff; font-size: 14px; }
.filter-section {
    max-width: 1200px; margin: 20px auto; padding: 15px;
    background: rgb(70 66 66 / 40%); backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); border-radius: 12px; text-align: left;
}
.filter-title { font-size: 16px; color: #fff; margin-bottom: 10px; }
.filter-options {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.filter-option {
    padding: 6px 12px; background: rgba(255,255,255,.2); border-radius: 20px;
    color: #fff; font-size: 14px; cursor: pointer; transition: all 0.3s;
}
.filter-option:hover, .filter-option.active { background: #4e6ef2; }
.sort-section {
    max-width: 1200px; margin: 20px auto; padding: 0 15px;
    display: flex; justify-content: space-between; align-items: center;
}
.sort-options { display: flex; gap: 15px; }
.sort-option {
    color: rgba(255,255,255,.7); font-size: 14px; cursor: pointer;
    transition: color 0.3s;
}
.sort-option:hover, .sort-option.active { color: #fff; }
.sort-option.active::after {
    content: ""; display: block; height: 2px; background: #4e6ef2;
    margin-top: 2px;
}
.result-count { color: rgba(255,255,255,.7); font-size: 14px; }
.meme-grid {
    max-width: 1200px;
    margin: 40px auto;
    columns: 5;
    column-gap: 20px;
    padding: 0 15px;
}
@media (max-width: 1024px) {
    .meme-grid { columns: 3; }
}
.meme-card {
    break-inside: avoid;
    margin-bottom: 20px;
}
.meme-card {
    background: rgba(255,255,255,.85); backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px); border-radius: 12px; padding: 15px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    text-align: left; border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; overflow: visible;
}
.meme-card:hover {
    transform: scale(1.03); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.95); z-index: 10;
}
.meme-title {
    font-size: 18px;
    color: #222;
    margin-bottom: 10px;
    font-weight: normal;
    height: auto;
    line-height: 1.6;
}
.meme-title-link {
    color: #222; text-decoration: none; transition: color 0.3s; display: block;
}
.meme-title-link:hover { color: #1890ff; }
.meme-desc {
    color: #595757; font-size: 14px; line-height: 1.6; margin-bottom: 15px;
}
.meme-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: #888; margin-top: 10px;
}
.meme-date { display: flex; align-items: center; }
.meme-date svg {
    width: 14px; height: 14px; margin-right: 4px; fill: #888;
}
.meme-views { display: flex; align-items: center; }
.meme-views svg {
    width: 14px; height: 14px; margin-right: 4px; fill: #888;
}
.meme-tag {
    position: absolute; top: 10px; right: 10px; background: #4e6ef2;
    color: white; font-size: 12px; padding: 2px 6px; border-radius: 10px; line-height: 1;
}
.pagination {
    display: flex; justify-content: center; margin: 40px 0; gap: 10px;
}
.pagination-item {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); color: #fff; border-radius: 4px;
    text-decoration: none; transition: all 0.3s;
}
.pagination-item:hover, .pagination-item.active { background: #4e6ef2; }
.pagination-ellipsis {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.loading-indicator {
    display: none; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px 0; margin: 0 auto; max-width: 1200px;
}
.loading-indicator.visible { display: flex; }
.loading-spinner {
    width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%; border-top-color: #4e6ef2; animation: spin 1s ease-in-out infinite;
    margin-bottom: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tag{
    color: inherit;
    text-decoration: none;
}
@media (max-width: 768px) {
    .meme-grid { columns: 2; }
    .filter-option { padding: 5px 10px; font-size: 13px; }
    .sort-option { font-size: 13px; }
    .meme-title { font-size: 16px; }
}
@media (max-width: 480px) {
    .meme-grid { columns: 1; }
    .filter-options { gap: 8px; }
    .pagination-item { width: 32px; height: 32px; font-size: 13px; }
}
.filter-options, .sort-options { flex-wrap: wrap; }
/*.nav-left a { margin-left: 10px; font-size: 14px; }*/
.search-box { font-size: 14px; padding: 14px 16px; }
.search-btn { width: 60px; font-size: 14px; }
.page-title { font-size: 20px; }