/* style.css - 月弦阁 AI 机器人官网 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* 服务条例美化 */
.tos-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.tos-list li {
    font-size: 1.04rem;
    color: var(--text-color);
    background: rgba(167,209,255,0.08);
    border-radius: 7px;
    padding: 10px 16px 10px 12px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 6px rgba(167,209,255,0.04);
}
.tos-icon {
    margin-right: 10px;
    font-size: 1.2em;
}
.tos-warning {
    background: rgba(255, 80, 80, 0.13);
    color: #ffb3b3;
    border-left: 4px solid #ff4d4f;
    font-weight: bold;
}
.tos-tip {
    margin-top: 18px;
    background: rgba(167,209,255,0.13);
    color: #a7d1ff;
    border-radius: 6px;
    padding: 8px 15px;
    font-size: 0.99rem;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 6px rgba(167,209,255,0.07);
}
.tos-tip-icon {
    margin-right: 7px;
    font-size: 1.1em;
}
/* 小千 Bot 娱乐机器人说明美化 */
.bot-desc-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 10px 0 0 0;
}
.bot-desc-icon {
    font-size: 2.5rem;
    margin-top: 2px;
    filter: drop-shadow(0 2px 6px rgba(167,209,255,0.18));
}
.bot-desc-content {
    flex: 1;
}
.bot-desc-main {
    font-size: 1.08rem;
    margin-bottom: 7px;
    color: #a7d1ff;
}
.bot-desc-notice {
    font-size: 1rem;
    margin-bottom: 12px;
    padding: 10px 15px;
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
    border-radius: 4px;
    color: #ffc107;
    line-height: 1.6;
}
.bot-desc-notice strong {
    color: #ffdb4d;
    font-weight: 600;
}
.bot-desc-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.bot-desc-list li {
    margin-bottom: 3px;
    font-size: 0.98rem;
    color: var(--text-color);
}
.desc-tag {
    background: rgba(167,209,255,0.13);
    color: #a7d1ff;
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 0.93em;
    margin-left: 3px;
}

/* 联系方式美化 */
.contact-wrapper {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 10px;
}
.contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-label {
    font-size: 1.1rem;
    color: #a7d1ff;
    font-weight: bold;
}
.contact-desc {
    font-size: 0.98rem;
    color: #8aafde;
}
.contact-qr {
    width: 120px;
    height: 120px;
    margin: 0;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 2px 10px rgba(167,209,255,0.10);
}

/* 价目表提示美化 */
.pricing-tip-box {
    background: rgba(167,209,255,0.10);
    border-radius: 7px;
    padding: 7px 13px;
    margin-bottom: 12px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    font-size: 0.99rem;
    box-shadow: 0 1px 6px rgba(167,209,255,0.07);
}
.tip-icon {
    margin-right: 7px;
    font-size: 1.1em;
}
.tip-highlight {
    color: #ffd700;
    font-weight: bold;
    margin: 0 2px;
}

/* Ensure the discount highlight doesn't break into multiple lines */
.tip-highlight {
    display: inline-block;
    white-space: nowrap;
}
/* 价目表美化 */
.pricing-table-wrapper {
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(167,209,255,0.08);
    table-layout: fixed; /* Ensure table doesn't overflow container */
}
.pricing-table td:first-child, .pricing-table th:first-child {
    text-align: left;
    padding-left: 20px;
    width: 25%; /* Give first column specific width */
}
.pricing-table td, .pricing-table th {
    vertical-align: middle;
    word-wrap: break-word; /* Prevent text overflow */
    overflow-wrap: break-word;
}
.pricing-table th, .pricing-table td {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid var(--card-border-color);
    color: var(--text-color);
}
.pricing-table th {
    background: rgba(167,209,255,0.13);
    font-size: 1.1rem;
    color: #a7d1ff;
    font-weight: 700;
}
.pricing-table tr:last-child td {
    border-bottom: none;
}
.pricing-table td {
    font-size: 1.05rem;
}
.pricing-tip {
    color: #8aafde;
    font-size: 0.98rem;
    margin-bottom: 10px;
    margin-top: 2px;
}

/* note for custom AI persona requests below the pricing tip */
.pricing-custom-note {
    margin-top: 8px;
    color: #ffd; /* light off-white */
    background: rgba(255,215,0,0.07);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.95rem;
    display: inline-block;
    color: #fff7d6;
}

.pricing-details {
    margin-top: 10px;
    color: #cfe6ff;
    font-size: 0.95rem;
}
.pricing-details ul {
    margin: 6px 0 0 18px;
}
.pricing-details li {
    margin-bottom: 6px;
    line-height: 1.4;
}

/* 体验版群聊要求样式 */
.trial-requirements {
    margin-top: 20px;
    padding: 15px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
}

.trial-requirements h3 {
    color: #e74c3c;
    margin-top: 0;
    margin-bottom: 15px;
}

.requirement-section {
    margin-bottom: 15px;
    color: #cfe6ff;
}

.requirement-section p {
    margin: 8px 0;
    line-height: 1.6;
}

.requirement-important ul {
    margin: 10px 0 0 20px;
    padding: 0;
}

.requirement-important li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #cfe6ff;
}

.text-highlight {
    color: #ffd700;
    font-weight: bold;
}

:root {
    --background-url: url('imgs/353a76cf461a6d04d4c741b7227488db_2_0_art.jpeg');
    --bg-image: url('imgs/353a76cf461a6d04d4c741b7227488db_2_0_art.jpeg');
    /* 增强毛玻璃对比度，减小透明度以提高文字可读性 */
    --card-bg-color: rgba(0, 0, 0, 0.68);
    --glass-bg: rgba(0, 0, 0, 0.68);
    --card-border-color: rgba(255, 255, 255, 0.22);
    --glass-border: rgba(255, 255, 255, 0.15);
    --text-color: #f0f0f0;
    --text-main: #f0f0f0;
    --header-text-color: #ffffff;
    --link-color: #a7d1ff;
    --text-highlight: #a7d1ff;
    --link-hover-color: #ffffff;
    --text-accent: #ffd700;
    --card-radius: 15px;
    --card-min-height: 420px; /* unified min height for hero and highlights on desktop */
    /* default header height; updated dynamically via JS on load/resize */
    --header-height: 72px;
    
    /* Z-Index 管理 */
    --z-back-to-top: 500;
    --z-header: 1000;
    --z-mobile-nav: 999; /* 导航菜单层级略低于 Header 本身 */
    --z-overlay: 2000;
    --z-splash: 9999;
}

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

body {
    font-family: 'Noto Sans SC', sans-serif;
    background: var(--background-url) no-repeat center center fixed;
    background-size: cover;
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: scroll; /* 强制显示滚动条，避免左右不对称 */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    /* soften global text shadow so overlays don't appear overly dark */
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* --- Header & Nav --- */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header-height);
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
    transition: background 0.3s ease;
}

header h1 {
    font-size: 2rem;
    color: var(--header-text-color);
}

/* 修复左侧标题和按钮的对齐问题 */
.brand {
    display: flex;
    align-items: center;
    gap: 15px; /* 控制标题和按钮之间的间距 */
}

/* 确保 h1 没有多余的外边距干扰对齐 */
.brand h1 {
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.brand h1 a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.brand-home {
    color: var(--header-text-color);
    text-decoration: none;
}
.brand-home:hover { color: var(--link-hover-color); }

/* MC跳转链接动画 */
.mc-link {
    margin-left: 10px;
    padding: 5px 12px;
    font-size: 0.9rem;
    background: rgba(167,209,255,0.1);
    color: var(--text-highlight);
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mc-link:hover {
    background: rgba(167,209,255,0.2);
    color: #fff;
    border-color: rgba(167,209,255,0.4);
    box-shadow: 0 0 10px rgba(167,209,255,0.2);
    transform: translateY(-1px);
}

/* 桌面端导航链接动画 */
.nav-links {
    display: flex;
    gap: 25px;
    align-items: center;
}
.nav-links a {
    color: var(--text-highlight);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-highlight);
    transition: width 0.3s ease;
}
.nav-links a:hover {
    color: #fff;
}
.nav-links a:hover::after {
    width: 100%;
}

/* 汉堡菜单按钮 */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1002; /* 必须高于遮罩层 */
}

/* Ensure in-page anchors (cards/sections) are scrolled into view with offset for fixed header */
.card, section {
    scroll-margin-top: calc(var(--header-height) + 8px);
}

/* Back-to-top floating button */
#back-to-top {
    position: fixed;
    right: 18px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    cursor: pointer;
    z-index: 1500;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

#back-to-top:hover {
    background: rgba(167,209,255,0.12);
    color: #a7d1ff;
}

/* Image overlay (lightbox) */
#image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#image-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#image-overlay .overlay-inner {
    max-width: 90vw;
    max-height: 85vh;
    background: rgba(0,0,0,0.6);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

#image-overlay.visible .overlay-inner {
    transform: scale(1);
}

#image-overlay img {
    max-width: 100%;
    max-height: 82vh; /* Ensure image fits within viewport height leaving space for padding */
    border-radius: 6px;
    object-fit: contain;
    display: block;
}

#image-overlay .overlay-close {
    position: absolute;
    top: 20px;
    right: 22px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.easyhelp-row { margin-top: 8px; }
.show-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8fc8ff, #6faee6);
    border: none;
    color: #08131a;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 2px 6px rgba(111, 174, 230, 0.2);
}
.show-image-btn::before {
    content: '🖼️';
    font-size: 1.1em;
}
.show-image-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(111, 174, 230, 0.4);
    filter: brightness(1.05);
}
.show-image-btn:active {
    transform: translateY(0);
}

/* 状态指示器 & 统计浮窗 */
#status-indicator {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: help;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}
#status-indicator::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
}
#status-indicator:hover {
    background: rgba(255,255,255,0.1);
}

/* 状态颜色点 */
.status-checking::before {
    background: #ffa726 !important;
    box-shadow: 0 0 8px #ffa726;
}
.status-online::before {
    background: #66bb6a !important;
    box-shadow: 0 0 8px #66bb6a;
}
.status-offline::before {
    background: #ef5350 !important;
}

.status-online #status-text {
    color: #fff;
}

/* 统计浮窗动画 */
.stats-tooltip {
    position: absolute;
    top: 140%;
    right: 0;
    width: 200px;
    background: rgba(15, 20, 30, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动画 */
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1000;
}
#status-indicator:hover .stats-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 提示框标题 */
.stats-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a7d1ff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    letter-spacing: 0.5px;
}

/* 内容区域 */
.stats-content {
    padding: 12px 16px;
}

/* 统计项目 */
.stats-item {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 4px;
}
.stats-item:last-child {
    border: none;
}

.stats-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 400;
}

.stats-value {
    font-weight: bold;
    color: #fff;
    font-family: monospace;
    min-width: 50px;
    text-align: right;
}

/* ★★★ 数据加载呼吸动画 ★★★ */
.stats-value.loading {
    color: #888;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

main {
    width: 100%;
    max-width: 1000px;
    padding-top: 230px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 50px; /* 增加板块间距，从30px改为50px */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box; /* Include padding in width calculation */
}

#pricing-contact {
    display: flex;
    gap: 30px;
    padding: 25px;
    box-sizing: border-box; /* Ensure padding doesn't cause overflow */
}

.sub-card-content {
    flex: 1;
}

/* Grid layout for wider screens */
@media (min-width: 769px) {
    /* main grid kept as 1 column to ensure vertical stacking */
    /* main { grid-template-columns: repeat(2, 1fr); } - Removed to fix layout shift */
    /* #features, #features-link, #pricing-contact { grid-column: 1 / -1; } - No longer needed */
}

/* Mobile Responsiveness Fixes */
@media (max-width: 768px) {
    /* Hero优化 */
    .hero-inner {
        padding: 24px 18px;
        max-width: 100%;
    }
    
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 0.98rem;
    }
    
    .hero-tags {
        gap: 8px;
    }
    
    .hero-tags span {
        font-size: 0.88rem;
        padding: 5px 10px;
    }
    
    .hero-cta {
        padding: 11px 26px;
        font-size: 0.95rem;
        margin-top: 16px;
    }
    
    /* Highlights优化 */
    .highlights {
        gap: 15px;
    }
    
    .highlight {
        flex: 0 1 100%;
        max-width: 100%;
        min-height: 150px;
        padding: 18px 16px;
    }
    
    .highlight-icon {
        font-size: 2.2rem;
    }
    
    .highlight h3 {
        font-size: 1.05rem;
    }
    
    .highlight .small {
        font-size: 0.92rem;
    }

    /* Fix contact section overflow */
    .contact-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .contact-qr {
        margin-top: 10px;
        align-self: center; /* Center QR code on mobile */
    }

    /* Fix pricing table overflow */
    .pricing-table-wrapper {
        width: 100%;
        display: block;
    }
    
    .pricing-table {
        width: 100%;
        margin-bottom: 0;
    }
    
    .pricing-table th, .pricing-table td {
        padding: 8px 4px; /* Further reduce padding */
        font-size: 0.85rem; /* Further reduce font size */
        white-space: normal; /* Allow text wrapping */
        word-break: break-word; /* Ensure long words break */
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Adjust main padding to prevent content being hidden behind header or too much gap */
    main {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        overflow-x: hidden; /* Prevent main container from causing scroll */
    }
    
    /* Ensure cards don't overflow */
    .card {
        width: 100%;
        overflow: hidden; /* Contain children */
    }
}

@media (max-width: 480px) {
    /* Adjust padding for smaller screens if needed, but 240px might be too much if header isn't that big */
    /* Let's reduce it slightly or ensure it matches actual header height */
    main {
        padding-top: 120px; /* More reasonable value than 240px unless header is huge */
    }
}

.card {
    background: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    border-radius: 15px;
    padding: 25px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* softer, layered shadow: subtle bluish ambient + low-contrast dark base */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(167,209,255,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-color);
    text-decoration: none;
    max-width: 100%; /* Prevent overflow */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

a.card {
    display: block;
}

.cta-button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background-color: var(--link-color);
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;

}

/* Disclaimer enhancements */
.card#disclaimer {
    position: relative;
    padding: 22px 25px 22px 20px;
    background: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-radius);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(167,209,255,0.03);
    border-left: 6px solid rgba(255, 215, 0, 0.08); /* softer accent */
}
.card#disclaimer h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.card#disclaimer ul {
    margin-top: 12px;
    margin-left: 18px;
}
.card#disclaimer ul li {
    margin-bottom: 10px;
    line-height: 1.5;
    padding-left: 8px;
    position: relative;
}
.card#disclaimer ul li::before {
    content: "•";
    position: absolute;
    left: -18px;
    color: #ffd700;
    font-weight: 700;
}

/* 重要声明高亮区域 */
.disclaimer-highlight {
    margin: 20px 0;
    padding: 16px 20px;
    background: rgba(255, 152, 0, 0.1);
    border-left: 4px solid #ff9800;
    border-radius: 8px;
}

.disclaimer-highlight p {
    margin: 0 0 12px 0;
    color: #ffa726;
    font-weight: 600;
}

.disclaimer-highlight ul {
    margin: 0;
    padding-left: 20px;
}

.disclaimer-highlight li {
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.6;
}

.disclaimer-note {
    margin-top: 12px;
    font-size: 0.95rem;
    color: #dfeaff;
    background: rgba(0,0,0,0.06);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.03);
}

.disclaimer-foot {
    margin-top: 12px;
    font-size: 0.98rem;
    color: var(--text-color);
}


.cta-button:hover {
    background-color: var(--link-hover-color);
    transform: scale(1.02);
}

.qr-placeholder {
    width: 150px;
    height: 150px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 0;
    color: #333;
    font-weight: bold;
}

.card:hover {
    transform: translateY(-5px);
    /* reduce intense glow and prefer subtle cool ambient highlight */
    box-shadow: 0 0 12px rgba(167, 209, 255, 0.08), 0 10px 30px rgba(0,0,0,0.18);
}

.card h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--header-text-color);
    border-bottom: 1px solid var(--card-border-color);
    padding-bottom: 10px;
}

footer {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    margin-top: auto;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--card-border-color);
}

/* Scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Mobile Responsiveness */
.nav-toggle {
    display: none;
}

/* Hero and Highlights styles */
.hero {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 36px 0; /* Vertical padding only */
    /* transparent - hero-inner carries the visual card so the page art isn't blocked */
    background: transparent;
    color: #fff;
}
.hero-inner {
    width: 100%;
    max-width: 720px; /* slightly narrower for better balance */
    display: flex;
    flex-direction: column;
    align-items: center; /* keep centered on all screen sizes */
    text-align: center;
    /* match the card tone but slightly lighter so hero stands out a bit */
    background: rgba(0,0,0,0.50);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 28px 24px; /* 增加内边距使其更有呼吸感 */
    border-radius: calc(var(--card-radius) - 2px);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* subtle sheen + low-contrast shadow for consistent card look */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.20), 0 2px 8px rgba(167,209,255,0.05);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    color: var(--text-color);
    gap: 8px; /* slightly smaller gap */
    justify-content: center; /* vertically center content to avoid empty feeling */
}
.hero h2 {
    margin: 0;
    font-size: 2.2rem;
    letter-spacing: 0.6px;
    color: var(--header-text-color);
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    line-height: 1.1;
    font-weight: 700;
}
.hero-subtitle {
    margin: 4px 0 0 0;
    color: #d4e8ff;
    font-size: 1.05rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
    max-width: 680px;
    line-height: 1.5;
}
.hero-cta {
    display: inline-block;
    padding: 13px 32px;
    margin-top: 20px; /* space above button - moved down slightly */
    background: linear-gradient(135deg, #8fc8ff, #6faee6);
    color: #08131a;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 8px 22px rgba(107,158,205,0.18), 0 0 20px rgba(143,200,255,0.1);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.hero-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(107,158,205,0.28), 0 0 30px rgba(143,200,255,0.15);
}

/* On larger screens, left-align text within the hero for better hierarchy */
@media (min-width: 769px) {
    /* Keep hero centered on large screens as requested */
    .hero-inner {
        padding: 32px 28px; /* modestly increase horizontal padding, keep vertical tight */
    }
    .hero h2 { font-size: 2.6rem; }
    .hero-subtitle { font-size: 1.08rem; }
    /* Arrange tags in 2 rows x 3 cols on desktop */
    .hero-tags { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 14px; justify-content: center; }
    .hero-tags span { padding: 7px 14px; font-size: 0.94rem; }
    /* Move CTA further down on desktop */
    .hero-cta { margin-top: 24px; padding: 14px 38px; font-size: 1.05rem; }
    /* Extra padding bottom so hero content doesn't feel cramped */
    .hero-inner { padding-bottom: 32px; }
    /* Ensure hero and highlights share a consistent min-height so cards align */
    .hero-inner { min-height: var(--card-min-height); }
    .highlight { display: flex; flex-direction: column; justify-content: center; }
}

/* Small tag list inside hero to reduce empty space and show core features */
.hero-tags {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-tags span {
    background: rgba(167,209,255,0.12);
    color: #a7d1ff;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.92rem;
    box-shadow: 0 2px 8px rgba(167,209,255,0.06);
    border: 1px solid rgba(167,209,255,0.15);
    transition: all 0.3s ease;
}
.hero-tags span:hover {
    background: rgba(167,209,255,0.18);
    border-color: rgba(167,209,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(167,209,255,0.12);
}

/* Header CTA (desktop only) */
.header-cta { display: inline-block; margin-left: 8px; padding: 8px 12px; background: rgba(167,209,255,0.12); color: #a7d1ff; border-radius: 8px; text-decoration: none; font-weight: 700; }
.header-cta:hover { background: rgba(167,209,255,0.2); color: #fff; }

.highlights {
    width: 100%;
    /* default to flex for small screens */
    display: flex;
    flex-wrap: wrap; /* allow wrapping into multiple rows */
    justify-content: center;
    gap: 20px;
    padding: 12px 0; /* Vertical padding only */
    background: transparent;
}
.highlight {
    background: var(--card-bg-color);
    padding: 22px 20px;
    border-radius: var(--card-radius);
    /* default flex sizing for small screens */
    flex: 0 1 calc(33.333% - 24px);
    max-width: 340px;
    min-height: 180px;
    box-sizing: border-box;
    text-align: center;
    color: var(--text-color);
    border: 1px solid var(--card-border-color);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(167,209,255,0.02);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.26s ease, box-shadow 0.26s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 改为顶部对齐，因为文字更多 */
    gap: 10px;
}

/* 功能卡片图标 */
.highlight-icon {
    font-size: 2.8rem;
    margin-bottom: 2px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(167,209,255,0.2));
    transition: transform 0.3s ease;
}

.highlight:hover .highlight-icon {
    transform: scale(1.15) translateY(-4px);
}

.highlight h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-highlight);
    font-weight: 600;
    line-height: 1.3;
}
.highlight .small {
    margin: 0;
    color: #c5dcf5;
    font-size: 0.96rem;
    line-height: 1.6;
    text-align: center;
}

/* hover interactions to match .card */
.hero-inner:hover, .highlight:hover {
    transform: translateY(-4px);
    /* gentler hover: smaller, softer shadow */
    box-shadow: 0 8px 28px rgba(0,0,0,0.16), 0 0 10px rgba(167,209,255,0.06);
}

@media (min-width: 769px) {
    /* Keep hero centered on large screens as requested */
    .hero-inner {
        padding: 20px 28px; /* modest horizontal padding, keep vertical tight */
        min-height: var(--card-min-height);
        display: flex;
        flex-direction: column;
        justify-content: center; /* vertical centering */
    }
    .hero h2 { font-size: 2.4rem; }
    .hero p { font-size: 1.03rem; }

    /* Use CSS grid for highlights on larger screens for consistent rows/cols */
    .highlights {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        gap: 20px;
        align-items: stretch;
        justify-items: stretch;
    }

    .highlight {
        min-height: calc(var(--card-min-height) / 2);
        max-width: none;
        padding: 18px 16px;
        text-align: left;
    }

    /* make the hero occupy the left column and span two rows so heights align */
    .hero { grid-column: 1 / 2; grid-row: 1 / span 2; }

    .highlight h3 { margin-top: 0; }
    .highlight .small { color: #bfdcff; }

    /* Slightly bring hero into visual balance with highlights */
    .hero { align-self: stretch; }
}

/* 汉堡图标动画 - 恢复精致旋转效果 */
.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #fff;
    left: 0;
    transition: all 0.3s ease-in-out;
}
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

/* 汉堡激活状态 */
body.nav-open .hamburger {
    background: transparent;
}
body.nav-open .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}
body.nav-open .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
}

    @media (max-width: 768px) {
        .nav-links {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.9);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
            z-index: 1000;
        }

        .nav-open .nav-links {
            transform: translateX(0);
        }

        .nav-links a {
            font-size: 1.5rem;
        }

        /* Reposition status indicator inside the full-screen nav */
        .nav-links #status-indicator {
            position: absolute;
            bottom: 5vh;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    main {
        padding-top: 100px; /* Adjust for smaller header */
        padding-left: 15px;
        padding-right: 15px;
        grid-template-columns: 1fr; /* Ensure single column on mobile */
    }

    #pricing-contact {
        flex-direction: column;
    }

    .card h2 {
        font-size: 1.5rem;
    }

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    main {
        padding-top: 120px; /* More reasonable value than 240px unless header is huge */
    }

    .card {
        padding: 20px;
    }
}

/* Thanks card styles */
.thanks-card {
    background: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-radius);
    padding: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(167,209,255,0.03);
    position: relative;
}
.thanks-card h2 { margin-top: 0; margin-bottom: 10px; color: var(--header-text-color); }
.thanks-card p { color: #cfe6ff; margin-bottom: 14px; }

/* Thanks list wrapper with gradient fade effect */
.thanks-list-wrapper {
    position: relative;
    overflow: hidden;
}

.thanks-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed state - show only 5 rows (~165px with gap) */
.thanks-card ul.collapsed {
    max-height: 175px;
    overflow: hidden;
}

/* Gradient fade overlay when collapsed */
.thanks-list-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent 0%, var(--card-bg-color) 80%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hide gradient when expanded */
.thanks-card ul:not(.collapsed) ~ .thanks-toggle-btn ~ .thanks-list-wrapper::after,
.thanks-list-wrapper:has(ul:not(.collapsed))::after {
    opacity: 0;
}

.thanks-card li {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    padding: 12px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.thanks-card li::before {
    content: '🔗';
    display: inline-block;
    font-size: 1.05rem;
    opacity: 0.95;
}
.thanks-card li a { color: var(--link-color); text-decoration: none; font-weight: 700; }
.thanks-card li small { color: #9fbddf; margin-left: 6px; }
.thanks-card li:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.16); }

/* Toggle button styles */
.thanks-toggle-btn {
    display: block;
    width: 48px;
    height: 48px;
    margin: 16px auto 0;
    background: rgba(167, 209, 255, 0.08);
    border: 1px solid rgba(167, 209, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.thanks-toggle-btn:hover {
    background: rgba(167, 209, 255, 0.15);
    border-color: rgba(167, 209, 255, 0.25);
    transform: scale(1.05);
}

.thanks-toggle-btn .arrow-icon {
    display: block;
    color: #a7d1ff;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    line-height: 48px;
    text-align: center;
}

/* Rotate arrow when expanded */
.thanks-toggle-btn.expanded .arrow-icon {
    transform: rotate(180deg);
}

@media (max-width: 1024px) {
    .thanks-card ul { grid-template-columns: repeat(2, 1fr); }
    .thanks-card ul.collapsed { max-height: 260px; } /* Adjust for 2 columns */
}

@media (max-width: 480px) {
    .thanks-card ul { grid-template-columns: 1fr; }
    .thanks-card { padding: 16px; }
    .thanks-card li { padding: 10px; }
    .thanks-card ul.collapsed { max-height: 285px; } /* Adjust for 1 column (5 items) */
}

/* Guide Page Plugin Styles */
/* AstrBot Section Styles */
.astrbot-section {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.astrbot-title {
    color: #ffd700 !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.astrbot-desc {
    color: #ffd700;
    font-weight: 500;
}

.plugin-category {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--card-border-color);
}

.plugin-category:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.plugin-category h3 {
    font-size: 1.4rem;
    color: var(--header-text-color);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.plugin-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plugin-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.plugin-item h4 {
    font-size: 1.1rem;
    color: var(--header-text-color);
    margin-bottom: 8px;
    font-weight: 600;
}

.plugin-item code {
    background: rgba(167, 209, 255, 0.15);
    color: #a7d1ff;
    padding: 4px 8px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    margin-right: 8px;
    margin-bottom: 5px;
    display: inline-block;
}

.plugin-item p {
    margin: 8px 0 0 0;
    color: #cfe6ff;
    font-size: 0.95rem;
    line-height: 1.4;
}

.image-link {
    display: inline-block;
    background: linear-gradient(135deg, #8fc8ff, #6faee6);
    color: #08131a;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 8px;
}

.image-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 158, 205, 0.3);
    color: #08131a;
}

/* Responsive adjustments for guide page */
@media (max-width: 768px) {
    .plugin-category h3 {
        font-size: 1.2rem;
    }
    
    .plugin-item {
        padding: 12px;
    }
    
    .plugin-item h4 {
        font-size: 1rem;
    }
    
    .plugin-item code {
        font-size: 0.85rem;
        padding: 3px 6px;
    }
}

/* Added Mobile Navigation Styles */
body.nav-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    header {
        padding: 1.5rem;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
        
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;

        transform: translateY(-100%);
        transition: transform 350ms ease-out;
        z-index: 999;
    }

    .nav-open .nav-links {
        transform: translateY(0);
    }

    .nav-links a {
        font-size: 1.5rem;
    }

    .nav-toggle {
        display: block;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 0.5em;
        z-index: 1001;
    }

    .hamburger {
        display: block;
        position: relative;
        width: 1.5em;
        height: 2px;
        background: white;
        transition: transform 350ms ease-out, background-color 350ms ease-out;
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: white;
        transition: transform 350ms ease-out, top 350ms ease-out;
    }

    .hamburger::before { top: -6px; }
    .hamburger::after { top: 6px; }

    .nav-open .hamburger {
        background-color: transparent;
    }

    .nav-open .hamburger::before {
        top: 0;
        transform: rotate(45deg);
    }

    .nav-open .hamburger::after {
        top: 0;
        transform: rotate(-45deg);
    }

    /* 移动端统计提示框适配 */
    .stats-tooltip {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        min-width: 180px;
    }

    #status-indicator:hover .stats-tooltip {
        transform: translateX(-50%) translateY(0);
    }

    .stats-header {
        font-size: 0.8rem;
        padding: 8px 14px;
    }

    .stats-content {
        padding: 10px 14px;
    }

    .stats-item {
        padding: 6px 0;
    }

    .stats-label {
        font-size: 0.85rem;
    }

    .stats-value {
        font-size: 1rem;
    }
}

/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f1218; /* Dark background matching theme */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-content {
    text-align: center;
    color: #fff;
}

.splash-logo {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: float 2s ease-in-out infinite;
}

.splash-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards 0.3s;
    background: linear-gradient(135deg, #fff 0%, #a7d1ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.splash-subtitle {
    font-size: 1.1rem;
    color: #8fc8ff;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards 0.6s;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll Reveal Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    /* Removed transition from initial state to prevent "float down" glitch on load */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

/* Staggered delay for highlights if needed, though JS observer handles natural scroll timing usually. 
   But if multiple items appear at once, we might want CSS delays. 
   For now, let's stick to simple scroll trigger. */

/* Search Section Styles - 统一毛玻璃风格 */
.search-section {
    margin-bottom: 30px;
}

.search-wrapper {
    position: relative;
    max-width: 700px;
    margin: 20px auto 0;
}

.search-input {
    width: 100%;
    padding: 14px 50px 14px 18px;
    font-size: 1rem;
    font-family: 'Noto Sans SC', sans-serif;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(167, 209, 255, 0.25);
    border-radius: 12px;
    color: var(--text-color);
    outline: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.search-input::placeholder {
    color: rgba(167, 209, 255, 0.45);
}

.search-input:focus {
    border-color: #a7d1ff;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 20px rgba(167, 209, 255, 0.15), 0 2px 12px rgba(0,0,0,0.2);
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(167, 209, 255, 0.1);
    border: none;
    color: #a7d1ff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: none;
    line-height: 1;
}

.search-clear-btn:hover {
    background: rgba(167, 209, 255, 0.2);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.search-stats {
    text-align: center;
    margin-top: 12px;
    font-size: 0.95rem;
    color: #a7d1ff;
    min-height: 20px;
    opacity: 0.9;
}

/* Search Highlight Effect */
.plugin-item.search-highlight {
    border-color: rgba(167, 209, 255, 0.4);
    background: rgba(167, 209, 255, 0.08);
    animation: highlightPulse 1s ease-in-out;
}

@keyframes highlightPulse {
    0%, 100% { 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    }
    50% { 
        box-shadow: 0 4px 20px rgba(167, 209, 255, 0.4), 0 0 30px rgba(167, 209, 255, 0.2); 
    }
}

/* Plugin Header Styles */
.plugin-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.plugin-header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--header-text-color);
    font-weight: 600;
}

.plugin-id {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(167, 209, 255, 0.7);
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 10px;
    border-radius: 5px;
    border: 1px solid rgba(167, 209, 255, 0.2);
}

/* Responsive Search Styles */
@media (max-width: 768px) {
    .search-section {
        padding: 20px 15px;
    }
    
    .search-wrapper {
        max-width: 100%;
        margin: 15px auto 0;
    }
    
    .search-input {
        padding: 12px 45px 12px 15px;
        font-size: 0.95rem;
        border-radius: 10px;
    }
    
    .search-clear-btn {
        right: 10px;
        font-size: 1.1rem;
        padding: 5px 8px;
    }
    
    .search-stats {
        font-size: 0.9rem;
        margin-top: 10px;
    }
    
    .plugin-header {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }
    
    .plugin-header h4 {
        font-size: 1.1rem;
    }
    
    .plugin-id {
        font-size: 0.8rem;
        padding: 2px 8px;
    }
}