/* Image Prompt Theme Styles - card grid layout */
:root{
    --card-bg: #ffffff;
    --muted: #6b7280;
    --shadow: 0 4px 14px rgba(12, 16, 34, 0.08);
}

/* General list style reset */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container{max-width:1200px;margin:0 auto;padding:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}

.card{background:var(--card-bg);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card-link{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.card-media{position:relative;height:160px;background:#f3f4f6}
.card-img{width:100%;height:100%;object-fit:cover;display:block}
.card-placeholder{width:100%;height:100%;background:linear-gradient(180deg,#f0f2f5,#e9eef6)}
.card-badge{position:absolute;top:12px;right:12px;background:#fff;padding:6px 10px;border-radius:999px;font-size:12px;color:#0f172a;box-shadow:0 2px 6px rgba(15,23,42,0.08);opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}

.card-content{padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.card-title{font-size:16px;margin:0 0 10px;color:#0f172a}
.card .card-meta{display:flex;align-items:center;font-size:13px;color:var(--muted)}
.card-author i{margin-right:6px;color:var(--muted)}
.card-author a{color:inherit;text-decoration:none}

/* homepage card meta should remain horizontal */
.home-meta{flex-direction:row}

/* inline row for author (left) and views (right) */
.inline-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.inline-row .meta-left{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-start}
.inline-row .meta-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.inline-row .meta-right .stat{background:transparent;box-shadow:none;padding:0;color:var(--muted);font-weight:600}

/* show badge on hover of the card (or when focus within) */
.card:hover .card-badge,.card:focus-within .card-badge{opacity:1;transform:translateY(0);pointer-events:auto}

/* stats inside card */
.card-stats{display:flex;justify-content:flex-end;margin-top:8px}
.card-stats .stat{background:rgba(255,255,255,0.9);padding:6px 8px;border-radius:8px;font-size:13px;color:var(--muted);box-shadow:0 1px 4px rgba(12,16,34,0.06);display:inline-flex;align-items:center}
.card-stats .stat i{margin-right:6px;color:var(--muted)}

/* post detail stats */
.post-stats .stat{margin-left:12px;font-size:14px;color:var(--muted);display:inline-flex;align-items:center}
.post-stats .stat i{margin-right:6px;color:var(--muted)}

.post-info-module{padding:18px 16px;border-radius:10px;box-shadow:0 4px 12px rgba(12,16,34,0.04);overflow:hidden;margin:20px 0;position:relative;z-index:5}
/* responsive grid: allow items to wrap on small screens */
.post-info-module .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;align-items:center}
/* each info item: stack icon above text and center-align to avoid overflow */
.post-info-module .info-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px 8px}
.post-info-module .info-row{display:flex;align-items:center;gap:8px}
.post-info-module .info-row .info-top i,.post-info-module .info-row .like-btn{font-size:16px;color:var(--muted);line-height:1}
.post-info-module .info-row .info-big{font-size:16px;color:#0f172a;font-weight:700}
.post-info-module .info-small{font-size:12px;color:var(--muted);margin-top:6px}

/* Make like button smaller and inline-friendly */
.like-btn{padding:6px;border-radius:6px}
.like-btn .fas{font-size:14px}

/* Ensure header meta in prompt doesn't overflow or apply global flex that affects homepage */
.prompt-header .prompt-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.prompt-header .prompt-meta time{display:inline-block}

/* small visual tweak: make module sit closer to images like the reference */
.post-info-module{margin-top:20px;padding-top:22px;padding-bottom:22px}

.like-btn{background:transparent;border:1px rgba(15,23,42,0.06);padding:8px;border-radius:8px;cursor:pointer}
.like-btn .fas{color:#ef4444}
.like-btn.liked{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.15)}

/* Minimal star rating styles (hover to reveal stars; icons are hollow) */
.rating-area .rating-stars {
    display: none;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
    justify-content: center;
}
.rating-area:not(.force-avg):hover .rating-avg-row {
    display: none;
}
.rating-area:not(.force-avg):hover .rating-stars {
    display: flex;
}

.rating-stars .star{background:transparent;border:1px solid rgba(15,23,42,0.06);padding:6px;border-radius:8px;cursor:pointer}
.rating-stars .star .fas,.rating-stars .star .far{color:#f59e0b;font-size:14px}
.rating-stars .star.active{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.25)}

/* Friendly tip message for actions */
.action-tip{margin-top:8px;text-align:center;font-size:12px;color:var(--muted)}
.action-tip.tip-success{color:#16a34a}
.action-tip.tip-warning{color:#f59e0b}
.action-tip.tip-error{color:#dc2626}

/* Toast styles for action feedback */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#111827;color:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.18);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:9999;font-size:14px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-success{background:#065f46}
.toast-warning{background:#92400e}
.toast-error{background:#7f1d1d}

/* Responsive tweaks */
@media (min-width: 1024px){
    .card-media{height:160px}
}
@media (min-width: 1280px){
    .card-media{height:180px}
}

/* Pagination styling */
.pagination{margin-top:28px;text-align:center}

/* When pageNav outputs a list (ol.page-navigator > li.page-item) style that structure */
.page-navigator{list-style:none;padding:0;margin:0;display:inline-flex;gap:8px;align-items:center}
.page-navigator .page-item{display:inline-block}
.page-navigator .page-item a{display:inline-block;padding:8px 12px;border-radius:8px;background:#fff;border:1px solid rgba(15,23,42,0.06);box-shadow:0 2px 6px rgba(12,16,34,0.04);text-decoration:none;color:var(--muted);font-weight:600;min-width:40px;text-align:center}
.page-navigator .page-item.current a,
.page-navigator .page-item.current{background:linear-gradient(180deg,#0ea5e9,#0369a1);color:#fff}
.page-navigator .page-item.current a{background:transparent;color:#fff;border-color:transparent;box-shadow:none}
.page-navigator .page-item.prev a,.page-navigator .page-item.next a{font-weight:700}
.page-navigator .page-item a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(3,7,18,0.08)}

/* Make sure the pagination is accessible on small widths */
@media (max-width: 560px){
    .page-navigator{gap:6px}
    .page-navigator .page-item a{padding:6px 10px;font-size:13px;min-width:34px}
}

/* Small helper for category text truncation */
.card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 搜索框样式 */
.search-form {
    margin-left: 20px;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid rgba(15,23,42,0.06);
}

.search-input {
    flex: 1;
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    background: transparent;
}

.search-submit {
    border: none;
    background: linear-gradient(180deg,#0ea5e9,#0369a1);
    color: #fff;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-submit:hover {
    background: linear-gradient(180deg,#0284c7,#0369a1);
}

.search-submit i {
    font-size: 14px;
}

/* 响应式搜索框 */
@media (max-width: 768px) {
    .header-inner {
        flex-direction: column;
        align-items: center;
    }
    
    .search-form {
        width: 100%;
    }
    
    .search-input-wrapper {
        width: 100%;
    }
    .site-title, .site-description {
        display: none;
    }
}

/* 调整头部布局 */
.header-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.site-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main-navigation {
    display: flex;
    align-items: flex-start;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin: 0 10px;
}

.nav-menu li a {
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-menu li a:hover,
.nav-menu li a.current {
    background: rgba(14,165,233,0.1);
    color: #0ea5e9;
}

/* Re-enable list styles for post content */
.post-content ul {
    list-style: initial;
    padding: initial;
    margin: initial;
}
.post-content ol {
    list-style: decimal;
    padding: initial;
    margin: initial;
}

/* Footer Styles */
.site-footer {
    background-color: #f8f9fa;
    padding: 40px 0;
    border-top: 1px solid #e7e7e7;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.footer-col {
    padding: 0 15px;
    margin-bottom: 20px;
}

.footer-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.footer-desc {
    font-size: 14px;
    color: #6c757d;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 8px;
}

.footer-list li a {
    color: #333;
    text-decoration: none;
}

.footer-list li a:hover {
    text-decoration: underline;
}

.footer-tags {
    display: flex;
    flex-wrap: wrap;
}

.footer-tag {
    background-color: #e9ecef;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.footer-bottom {
    border-top: 1px solid #e7e7e7;
    padding-top: 20px;
    font-size: 14px;
    color: #6c757d;
}

.copyright a,
.powered-by a {
    color: #333;
    text-decoration: none;
}

.copyright a:hover,
.powered-by a:hover {
    text-decoration: underline;
}

.footer-col,
.footer-title,
.footer-desc,
.footer-list {
    text-align: left;
}