/* 全局样式重置 - 替代 Tailwind CSS 的基础样式 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

canvas {
    will-change: transform;
    transform: translateZ(0);
}

/* 默认项目图标，隐藏右上角的删除按钮 */
#defaultIconRemovePreviewBtn {
    display: none !important;
}

/* 背景图片预览样式表 */
.image-preview[src=""] {
    display: none !important;
}

.image-preview:not([src=""]) {
    display: block !important;
}

/* 确保内容在背景之上 */
.container {
    position: relative;
    z-index: 1;
}

/* html动画输入框的显示控制 */
#bgWebpageUrlInput {
    display: none;
}

/* 基础样式与背景效果 */
/* 注意：body 的背景和颜色样式已在 main.css 中定义，使用 CSS 变量以支持主题切换 */
html {
    margin: 0;
    padding: 0;
    height: auto;
}

body {
    /* background-color 和 color 已在 main.css 中使用 CSS 变量定义 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Inter', sans-serif;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    display: block;
}

/* 导出模式下隐藏所有编辑元素 */
body.export-mode .edit-btn,
body.export-mode .admin-edit-btn,
body.export-mode .edit-contact-btn,
body.export-mode .edit-scroll-btn,
body.export-mode .edit-copyright-btn,
body.export-mode .section-edit-btn,
body.export-mode .add-section-btn,
body.export-mode .add-card-btn,
body.export-mode .edit-default-icon-btn,
body.export-mode .edit-logo-btn {
    display: none !important;
}

/* 导出模式下隐藏"添加项目"文字 */
body.export-mode .nav-card-container:has(.add-card-btn) .nav-card-text {
    display: none !important;
}

/* 未登录状态下隐藏所有编辑元素（但保留登录按钮和主题切换按钮） */
body.not-logged-in .admin-edit-btn,
body.not-logged-in .edit-contact-btn,
body.not-logged-in .edit-scroll-btn,
body.not-logged-in .edit-copyright-btn,
body.not-logged-in .section-edit-btn,
body.not-logged-in .add-section-btn,
body.not-logged-in .add-card-btn,
body.not-logged-in .edit-default-icon-btn,
body.not-logged-in .edit-logo-btn {
    display: none !important;
}

/* 未登录状态下隐藏"添加项目"文字 */
body.not-logged-in .nav-card-container:has(.add-card-btn) .nav-card-text {
    display: none !important;
}

/* 未登录状态下确保登录按钮和主题切换按钮显示 */
body.not-logged-in .auth-btn,
body.not-logged-in .theme-toggle-btn {
    display: flex !important;
}

/* 主容器样式 */
.container {
    min-height: 0;
    margin: 0 auto;
    padding-top: 1.75rem;
    padding-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 1280px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 确保与原文件Tailwind的py-8 px-4一致 */
/* 微调padding-top以匹配原文件的视觉效果 */

/* 响应式 max-width - 模拟 Tailwind container 的行为 */
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* 文字大小控制容器 */
.text-size-container {
    margin-top: 15px;
}

.text-size-value {
    color: white;
    text-align: center;
    margin-top: 5px;
    font-size: 0.85rem;
}

/* 移动端触摸优化 */
.nav-button,
.scroll-container,
.contact-link {
    touch-action: manipulation;
}

/* 减少重绘区域 */
.nav-card-container {
    contain: layout paint;
}