* {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 3px;
}
a {
    text-decoration: none; /* 取消下划线 */
}
h1, h2 {
    text-align: center;
}

/*
 * 独字不成行规则
 * 多语言切换器样式
 */
.language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 8px;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid transparent;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    font-size: 14px;
    min-width: 60px;
    text-align: center;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.lang-btn.active {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* RTL语言支持 */
[dir="rtl"] .container {
    direction: rtl;
}

[dir="rtl"] .content {
    text-align: right;
}

[dir="rtl"] .box:hover .content {
    left: auto;
    right: -25px;
}

/* 语言特定的字体调整 */
.lang-zh {
    font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
    /* 中文排版优化 */
    line-break: strict;
    word-break: break-all;
}

.lang-en {
    font-family: 'Segoe UI', Arial, sans-serif;
    /* 英文排版优化 */
    word-break: break-word;
    hyphens: auto;
}

.lang-ja {
    font-family: 'MS Gothic', 'Hiragino Sans', sans-serif;
    /* 日文排版优化 */
    line-break: strict;
    word-break: break-all;
}

/* 独字不成行 - 防止单个字符/单词出现在行首或行尾 */
.orphan-control {
    /* 防止标点符号出现在行首 */
    line-break: strict;
    word-break: break-word;
}

/* 中文特定排版规则 */
.lang-zh .content p,
.lang-zh .content h2 {
    /* 防止标点符号出现在行首 */
    line-break: strict;
    word-break: break-all;
    /* 优化中文排版 */
    text-spacing: auto;
}

/* 英文特定排版规则 */
.lang-en .content p,
.lang-en .content h2 {
    /* 英文连字符支持 */
    hyphens: auto;
    /* 防止单词断开不美观 */
    word-break: break-word;
    /* 优化单词间距 */
    word-spacing: 0.05em;
}

/* 日文特定排版规则 */
.lang-ja .content p,
.lang-ja .content h2 {
    /* 日文排版规则 */
    line-break: strict;
    word-break: break-all;
    /* 防止标点出现在行首 */
    hanging-punctuation: none;
}

/* 通用段落排版优化 */
.content p {
    /* 防止孤行 - 至少保留两行在一起 */
    orphans: 2;
    /* 防止寡行 - 至少保留两行在一起 */
    widows: 2;
    /* 文本对齐 */
    text-align: justify;
    /* 优化行高 */
    line-height: 1.6;
    /* 字间距优化 */
    letter-spacing: 0.02em;
}

/* 标题排版优化 */
.content h2 {
    /* 防止标题单独一行 */
    line-break: auto;
    /* 优化标题间距 */
    margin-bottom: 0.8em;
    /* 标题字重 */
    font-weight: 700;
}

/* 按钮文本优化 */
.content a {
    /* 按钮文本不断行 */
    white-space: nowrap;
    /* 防止按钮文本断开 */
    word-break: keep-all;
}

/* 卡片内容区域特殊处理 */
.content {
    /* 确保文本容器有合适的内边距 */
    padding: 20px 30px;
    /* 优化文本渲染 */
    text-rendering: optimizeLegibility;
    /* 字体平滑 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 响应式文字大小调整，确保在不同屏幕下都有良好的排版 */
.content p {
    font-size: clamp(0.9em, 2.5vw, 1.1em);
}

.content h2 {
    font-size: clamp(1.5em, 4vw, 2em);
}

/* 移动端排版优化 */
@media (max-width: 768px) {
    .language-switcher {
        top: 15px;
        right: 15px;
        flex-direction: column;
        gap: 5px;
    }
    
    .lang-btn {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 50px;
    }
    
    /* 移动端段落优化 */
    .content p {
        /* 移动端减少 orphans/widows 要求 */
        orphans: 1;
        widows: 1;
        /* 移动端行高稍小 */
        line-height: 1.5;
        /* 移动端字间距调整 */
        letter-spacing: 0.01em;
    }
    
    /* 移动端标题优化 */
    .content h2 {
        line-height: 1.3;
        margin-bottom: 0.6em;
    }
}

@media (max-width: 480px) {
    .language-switcher {
        top: 60px;
        right: 10px;
    }
    
    /* 小屏幕进一步优化 */
    .content p {
        text-align: left; /* 小屏幕取消两端对齐 */
        line-height: 1.4;
    }
    
    .lang-zh .content p {
        word-break: break-word; /* 中文在小屏幕使用更温和的断词 */
    }
}

/* 大屏幕排版优化 */
@media (min-width: 1200px) {
    .content p {
        /* 大屏幕增加行高 */
        line-height: 1.7;
        /* 大屏幕可以更严格地控制孤行 */
        orphans: 3;
        widows: 3;
    }
}

/* 特殊语言组合优化 */
/* 中英文混合文本 */
.lang-zh .content p:lang(en),
.lang-en .content p:lang(zh) {
    word-break: normal;
    line-break: normal;
}

/* 防止特定情况下的不良断行 */
.no-break {
    white-space: nowrap;
}

.break-avoid {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* 数字和单位不分开 */
.number-unit {
    white-space: nowrap;
}

/* 链接文本优化 */
.content a {
    /* 确保链接文本完整显示 */
    word-break: keep-all;
    white-space: nowrap;
}

/* 针对长单词的断词优化 */
.content p {
    /* 允许在任意字母间断词 */
    word-break: break-word;
    /* 对于支持的语言使用连字符 */
    hyphens: auto;
}

/* 中文标点符号优化 */
.lang-zh .content p {
    /* 优化中文标点挤压 */
    text-spacing: trim-start allow-end;
    /* 防止标点悬挂 */
    hanging-punctuation: none;
}

/* 英文连字符优化 */
.lang-en .content p {
    /* 优化英文连字符 */
    hyphens: auto;
    hyphenate-limit-chars: 6 3 2;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
}

/* 打印样式优化 */
@media print {
    .content p {
        /* 打印时更严格地控制孤行 */
        orphans: 3;
        widows: 3;
        /* 打印时优化断行 */
        line-break: strict;
    }
    
    .break-avoid {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .content p {
        letter-spacing: 0.03em;
        word-spacing: 0.1em;
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
    .content p,
    .content h2 {
        /* 在减少动画模式下优化阅读体验 */
        line-height: 1.8;
    }
}

/* 文本方向检测和优化 */
[dir="ltr"] .content p {
    text-align: left;
}

[dir="rtl"] .content p {
    text-align: right;
}

/* 确保所有文本元素都应用排版优化 */
.content * {
    box-sizing: border-box;
}

/* 为动态加载的内容添加排版类 */
.text-content {
    composes: orphan-control;
    line-height: 1.6;
    text-align: justify;
}

/* 响应式文字大小和行高的关系优化 */
.content p {
    /* 根据字体大小动态调整行高 */
    line-height: calc(1.5em + 0.2vw);
}

/* 确保按钮中的文本不会因为语言切换而破坏布局 */
.lang-btn {
    /* 按钮文本不换行 */
    white-space: nowrap;
    /* 确保按钮有最小宽度 */
    min-width: max-content;
}

/* 登录状态区域的文本优化 */
.login-status * {
    word-break: keep-all;
    white-space: nowrap;
}
