/* ==========================================================================
   虫虫开发者社区 - 社区互动、心愿求助单、静态站点与工具页面样式 (现代极客极简风 <= 300 行)
   覆盖: eeworm/comment, eeworm/wish, site/about, site/service, site/terms,
   site/privacy, site/maps, site/today-urls, site/error, site/fen
   ========================================================================== */

.about-container, .container-main, .maps-container,
.today-urls-container, .comment_box, .static-container {
    max-width: var(--ee-width, 1220px); margin: 0 auto; padding: 8px 0 40px;
}

/* 面包屑 */
.about-breadcrumb, .breadcrumb-nav {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ee-color-muted, #64748b); margin-bottom: 14px;
}
.breadcrumb-nav ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.about-breadcrumb a, .breadcrumb-nav a { color: var(--ee-color-muted, #64748b); text-decoration: none; transition: color 0.2s; }
.about-breadcrumb a:hover, .breadcrumb-nav a:hover { color: var(--ee-color-brand, #1e6fff); }
.breadcrumb-current, .breadcrumb-nav .current { color: var(--ee-color-ink, #0f172a); font-weight: 600; }

/* 页面顶部标题看板 */
.about-page-title, .page-title, .maps-header, .comment_title {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 60%, #eef2ff 100%);
    border: 1px solid #dbeafe; border-radius: 12px; padding: 22px 26px; margin-bottom: 18px;
    box-shadow: var(--ee-shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.04));
}
.maps-header { text-align: center; }
.about-page-title h1, .page-title h1, .maps-header h1, .comment_title h1 {
    margin: 0; font-size: 24px; font-weight: 800; color: var(--ee-color-ink, #0f172a); line-height: 1.3;
}
.maps-header p, .comment_title span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ee-color-muted, #64748b); }

/* 静态说明与协议正文卡片 */
.about-content-section, .content-box, .map-section {
    background: #fff; border: 1px solid var(--ee-color-line, #e2e8f0); border-radius: 12px;
    padding: 24px 28px; margin-bottom: 18px; box-shadow: var(--ee-shadow-sm); line-height: 1.8; color: var(--ee-color-text, #334155);
}
.about-section-title, .content-box h2, .map-section h3 {
    font-size: 17px; font-weight: 700; color: var(--ee-color-ink, #0f172a); margin: 22px 0 12px;
    padding-bottom: 10px; border-bottom: 2px solid var(--ee-color-brand, #1e6fff); display: flex; align-items: center; gap: 8px;
}
.about-section-title:first-child, .content-box h2:first-child, .map-section h3:first-child { margin-top: 0; }
.map-section h3 a { color: inherit; text-decoration: none; }
.map-section h3 a:hover { color: var(--ee-color-brand, #1e6fff); }
.content-box h3, .about-service-header { font-size: 15px; font-weight: 700; color: var(--ee-color-ink, #0f172a); margin: 16px 0 8px; }
.about-content-section p, .content-box p { margin: 10px 0; font-size: 14px; }
.about-service-list, .content-box ul { margin: 12px 0; padding-left: 20px; font-size: 14px; }
.about-service-list li, .content-box li { margin: 6px 0; }
.about-qr-container, .legal-contact-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid #f1f5f9; text-align: center; }
.about-qr-label, .legal-contact-title { font-weight: 700; color: var(--ee-color-ink, #0f172a); margin-bottom: 10px; }
.about-qr-image, .legal-qr-image { max-width: 200px; border-radius: 10px; border: 1px solid var(--ee-color-line, #e2e8f0); }
.about-qr-caption, .legal-meta-note { font-size: 13px; color: var(--ee-color-muted, #64748b); margin-top: 8px; }

/* 网站地图网格 (maps.php) */
.map-section ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 8px; }
.map-section li a {
    display: block; padding: 8px 12px; background: #f8fafc; border: 1px solid var(--ee-color-line, #e2e8f0);
    border-radius: 8px; color: var(--ee-color-text, #334155); text-decoration: none; font-size: 13px;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.18s;
}
.map-section li a:hover { background: var(--ee-color-brand, #1e6fff); border-color: var(--ee-color-brand, #1e6fff); color: #fff; }

/* ==================== 工程师心愿单全新重构布局 (wish.php, wish_list.php) ==================== */
.wish-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 65%, #1d4ed8 100%);
    color: #fff; border-radius: 12px; padding: 24px 28px; margin-bottom: 18px;
}
.wish-hero__main { flex: 1; min-width: 0; }
.wish-hero__badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    background: rgba(56, 189, 248, 0.16); border: 1px solid rgba(56, 189, 248, 0.35); color: #7dd3fc; font-size: 12px; font-weight: 600; margin-bottom: 10px;
}
.wish-hero__title { margin: 0 0 8px; font-size: 24px; font-weight: 800; color: #ffffff; }
.wish-hero__desc { margin: 0; font-size: 13.5px; color: #cbd5e1; line-height: 1.65; }
.wish-hero__stats { display: flex; gap: 12px; flex-shrink: 0; }
.wish-stat-card {
    min-width: 106px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14); text-align: center;
}
.wish-stat-card strong { display: block; font-size: 20px; font-weight: 800; color: #ffffff; line-height: 1.2; }
.wish-stat-card--green strong { color: #4ade80; }
.wish-stat-card span { font-size: 12px; color: #cbd5e1; margin-top: 4px; display: block; }

.wish-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.wish-main, .wish-sidebar { min-width: 0; }

/* 发布心愿卡片 & 留言板表单 */
.comment_form, .wish-publish-card, .wish-feed-card, .wish-side-card {
    background: #fff; border: 1px solid var(--ee-color-line, #e2e8f0);
    border-radius: 12px; padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--ee-shadow-xs);
}
.wish-card-head, .form_title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.wish-card-head h2, .form_title h2 { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--ee-color-ink, #0f172a); display: flex; align-items: center; gap: 8px; }
.wish-card-head h2 i { color: var(--ee-color-brand, #1e6fff); }
.wish-card-sub { font-size: 12.5px; color: var(--ee-color-muted, #64748b); }

.wish-type-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wish-type-label { font-size: 13px; font-weight: 600; color: var(--ee-color-ink, #0f172a); }
.wish-type-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.wish-type-pill {
    padding: 4px 11px; border-radius: 6px; border: 1px solid #e2e8f0; background: #f8fafc;
    color: var(--ee-color-text, #475569); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.wish-type-pill:hover { border-color: #93c5fd; color: var(--ee-color-brand, #1e6fff); }
.wish-type-pill.is-active { background: var(--ee-color-brand, #1e6fff); border-color: var(--ee-color-brand, #1e6fff); color: #ffffff; font-weight: 600; }

.wish-textarea-wrap { position: relative; margin-bottom: 14px; }
.community-textarea {
    width: 100%; min-height: 96px; padding: 12px 14px 26px; border: 1px solid #cbd5e1;
    border-radius: 8px; font-size: 14px; line-height: 1.6; resize: vertical; box-sizing: border-box;
}
.community-textarea:focus, .community-input:focus, .wish-search-input:focus {
    outline: none; border-color: var(--ee-color-brand, #1e6fff); box-shadow: 0 0 0 3px rgba(30, 111, 255, 0.12);
}
.wish-char-count { position: absolute; right: 12px; bottom: 8px; font-size: 11.5px; color: #94a3b8; pointer-events: none; }

.wish-submit-bar, .community-form-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.wish-submit-inputs { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.community-field { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.community-label { font-weight: 600; color: var(--ee-color-ink, #0f172a); white-space: nowrap; }
.community-label i { color: var(--ee-color-brand, #1e6fff); }
.wish-user-badge { padding: 4px 10px; border-radius: 6px; background: #eff6ff; color: var(--ee-color-brand, #1e6fff); font-weight: 600; font-size: 13px; }
.community-input { height: 38px; padding: 0 11px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13.5px; width: 136px; box-sizing: border-box; }
.wish-captcha-input { width: 108px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.community-captcha { height: 38px; width: 116px; border-radius: 6px; cursor: pointer; border: 1px solid #cbd5e1; background: #f8fafc; }
.wish-captcha-refresh { border: 0; background: none; color: var(--ee-color-brand, #1e6fff); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px; }
.wish-captcha-refresh:hover { text-decoration: underline; }
.community-submit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px;
    padding: 0 22px; border-radius: 8px; border: 0; cursor: pointer;
    background: var(--ee-color-brand, #1e6fff); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 3px 10px rgba(30, 111, 255, 0.22);
}
.community-submit-btn:hover { background: #165dff; }
.community-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.wish-feedback { display: none; margin-top: 12px; padding: 9px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.wish-feedback.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.wish-feedback.is-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }

/* 心愿筛选栏与卡片列表 */
.wish-filter-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.wish-status-tabs { display: flex; align-items: center; gap: 6px; }
.wish-status-tab {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px;
    font-size: 13px; font-weight: 600; color: var(--ee-color-text, #475569); text-decoration: none; background: #f8fafc;
}
.wish-status-tab.is-active, .wish-status-tab:hover { background: #eff6ff; color: var(--ee-color-brand, #1e6fff); }
.wish-tab-cnt { padding: 1px 6px; border-radius: 999px; background: rgba(30, 111, 255, 0.12); font-size: 11.5px; }
.wish-search-box { display: flex; align-items: center; gap: 6px; }
.wish-search-input { height: 34px; width: 220px; padding: 0 11px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; }
.wish-search-btn { height: 34px; width: 34px; border-radius: 7px; border: 1px solid #cbd5e1; background: #f8fafc; color: var(--ee-color-text); cursor: pointer; }
.wish-search-btn:hover { background: var(--ee-color-brand, #1e6fff); border-color: var(--ee-color-brand, #1e6fff); color: #fff; }

.comment { margin-bottom: 20px; }
.comment_cont ul, .wish-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.comment_cont ul li, .wish-item { padding: 16px 18px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; transition: border-color 0.15s; }
.wish-item:hover { border-color: #bfdbfe; background: #ffffff; }
.wish-item__head, .comment_cont ul li p.user { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid #e2e8f0; }
.wish-item__user { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wish-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--ee-color-brand, #1e6fff); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.wish-username, .comment_cont ul li p.user a { font-size: 13.5px; font-weight: 700; color: var(--ee-color-ink, #0f172a); text-decoration: none; }
.wish-id-pill { font-size: 11.5px; color: #94a3b8; font-family: monospace; }
.wish-cat-badge { padding: 2px 8px; border-radius: 4px; background: #eff6ff; color: var(--ee-color-brand, #1e6fff); font-size: 12px; font-weight: 600; }
.wish-item__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.wish-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.wish-status-badge.is-replied { background: #dcfce7; color: #15803d; }
.wish-status-badge.is-pending { background: #fef3c7; color: #b45309; }
.wish-time, .comment_cont ul li span.time { font-size: 12px; color: #94a3b8; }
.wish-item__content, .comment_cont ul li p { margin: 0; font-size: 14px; line-height: 1.68; color: var(--ee-color-ink, #1e293b); word-break: break-word; }

.comment_cont .reply, .wish-reply-box { margin-top: 11px; padding: 11px 14px; background: #eff6ff; border-left: 3px solid var(--ee-color-brand, #1e6fff); border-radius: 6px; }
.wish-reply-hd, .comment_cont .reply h3 { margin: 0 0 4px; font-size: 12.5px; color: var(--ee-color-brand, #1e6fff); display: flex; align-items: center; gap: 5px; }
.comment_cont .reply_box { font-size: 13px; color: var(--ee-color-text, #334155); line-height: 1.6; }
.comment_cont .reply_box a { color: var(--ee-color-brand, #1e6fff); font-weight: 600; text-decoration: none; }
.comment_cont .reply_box a:hover { text-decoration: underline; }

.manu { margin-top: 18px; text-align: center; }
.manu a, .manu .current, .manu .disabled {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
    padding: 0 10px; margin: 2px; border-radius: 7px; border: 1px solid var(--ee-color-line, #e2e8f0);
    font-size: 13px; text-decoration: none; color: var(--ee-color-text, #475569); background: #fff;
}
.manu a:hover { border-color: var(--ee-color-brand, #1e6fff); color: var(--ee-color-brand, #1e6fff); }
.manu .current { background: var(--ee-color-brand, #1e6fff); border-color: var(--ee-color-brand, #1e6fff); color: #fff; font-weight: 700; }
.wish-page-summary { font-size: 12.5px; color: #64748b; margin-left: 8px; }
.wish-empty { padding: 36px 20px; text-align: center; color: #64748b; font-size: 14px; }

/* 右侧栏组件 */
.wish-side-title { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; font-size: 15px; font-weight: 700; color: var(--ee-color-ink, #0f172a); display: flex; align-items: center; gap: 7px; }
.wish-side-title i { color: var(--ee-color-brand, #1e6fff); }
.wish-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.wish-steps li { padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; }
.wish-steps li strong { display: block; font-size: 13px; color: var(--ee-color-ink, #0f172a); margin-bottom: 3px; }
.wish-steps li span { font-size: 12px; color: #64748b; line-height: 1.5; display: block; }
.wish-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.wish-side-tag { padding: 4px 10px; border-radius: 6px; background: #f1f5f9; color: var(--ee-color-text, #334155); font-size: 12.5px; text-decoration: none; }
.wish-side-tag:hover { background: #eff6ff; color: var(--ee-color-brand, #1e6fff); }
.wish-quick-links { display: flex; flex-direction: column; gap: 8px; }
.wish-quick-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; text-decoration: none; color: inherit; }
.wish-quick-link:hover { border-color: #93c5fd; background: #eff6ff; }
.wish-quick-link i { font-size: 18px; color: var(--ee-color-brand, #1e6fff); width: 22px; text-align: center; }
.wish-quick-link strong { display: block; font-size: 13px; color: var(--ee-color-ink, #0f172a); }
.wish-quick-link span { font-size: 11.5px; color: #64748b; }

/* 今日URL与错误页 */
.page-info { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 18px; padding: 14px 18px; background: #eff6ff; border-radius: 10px; border-left: 4px solid var(--ee-color-brand, #1e6fff); }
.info-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.info-label { font-weight: 600; color: var(--ee-color-muted, #64748b); }
.info-value { color: var(--ee-color-brand, #1e6fff); font-weight: 700; font-size: 16px; }
.actions-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 8px; font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--ee-color-brand, #1e6fff); color: #fff; }
.btn-secondary, .btn-outline { background: #fff; color: var(--ee-color-text, #334155); border-color: #cbd5e1; }
.url-list-container { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.url-list { width: 100%; min-height: 360px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; font-family: monospace; font-size: 13px; line-height: 1.7; }
.tips { margin-top: 18px; padding: 16px 20px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; color: #1e3a8a; font-size: 13px; }
.copy-success { position: fixed; top: 20px; right: 20px; background: #16a34a; color: #fff; padding: 11px 20px; border-radius: 8px; z-index: 9999; font-weight: 600; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15); }
.copy-success.is-error { background: #dc2626; }

.error-page { min-height: 65vh; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.error-container { max-width: 680px; width: 100%; background: #fff; border-radius: 14px; border: 1px solid var(--ee-color-line, #e2e8f0); padding: 38px 28px; text-align: center; box-shadow: var(--ee-shadow-sm); }
.error-code { font-size: 80px; font-weight: 900; color: var(--ee-color-brand, #1e6fff); line-height: 1; }
.error-title { font-size: 22px; font-weight: 700; color: var(--ee-color-ink, #0f172a); margin: 12px 0 8px; }
.error-message { color: var(--ee-color-muted, #64748b); font-size: 14.5px; margin-bottom: 22px; }
.error-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.error-suggestions { text-align: left; background: #f8fafc; padding: 16px 20px; border-radius: 10px; border-left: 3px solid var(--ee-color-brand, #1e6fff); font-size: 13.5px; }
.fen-banner-img { display: block; max-width: 100%; height: auto; margin: 20px auto; border-radius: 12px; }
.pages-nav { margin-top: 14px; text-align: center; }

@media (max-width: 960px) {
    .wish-hero { flex-direction: column; align-items: flex-start; }
    .wish-layout { grid-template-columns: 1fr; }
}