/* 个人信息展示组件 - 补充样式 */
/* 主要样式已内联在 render.php 中，此处仅保留响应式和扩展样式 */

/* 响应式适配 */
@media (max-width: 640px) {
    .webmaster-info-card {
        padding: 24px 20px;
        margin: 0 16px;
        max-width: none;
    }

    .webmaster-name {
        font-size: 20px;
    }

    .webmaster-bio {
        font-size: 13px;
    }

    .social-link {
        width: 32px;
        height: 32px;
    }

    .social-link svg {
        width: 16px;
        height: 16px;
    }

    .popup-image,
    .popup-qr {
        width: 120px;
        height: 120px;
    }

    .webmaster-social {
        gap: 14px;
    }
}

/* 深色模式适配 - 使用主题 CSS 变量 */
/* 当主题切换到深色模式时，CSS 变量会自动更新值 */
html[data-theme="dark"] .webmaster-info-card {
    background: var(--bg-card, #2a2a2a);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .webmaster-info-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .webmaster-header {
    border-bottom-color: var(--border-secondary, #3a3a3a);
}

html[data-theme="dark"] .webmaster-name {
    color: var(--text-primary, #e8e8e8);
}

html[data-theme="dark"] .webmaster-bio {
    color: var(--text-secondary, #b0b0b0);
}

html[data-theme="dark"] .hover-popup {
    background: var(--bg-card, #2a2a2a);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .hover-popup::after {
    border-top-color: var(--bg-card, #2a2a2a);
}

html[data-theme="dark"] .popup-content {
    color: var(--text-primary, #e8e8e8);
}

html[data-theme="dark"] .popup-hint {
    color: var(--text-tertiary, #888888);
}

/* 打印样式 */
@media print {
    .webmaster-info-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .social-link:hover {
        transform: none;
        box-shadow: none;
    }

    .hover-popup {
        display: none;
    }
}