/**
 * ============================================================================
 * Safari Normalize - 强制对齐 Safari 渲染标准
 * ============================================================================
 * 让 Chrome/Edge/Firefox 等浏览器的渲染效果与 Safari 保持一致
 * 基于 WebKit 渲染引擎特性，覆盖 Blink/Gecko 差异
 * ============================================================================
 */

/* ===== 1. 基础重置 - 强制 WebKit 盒模型行为 ===== */
*,
*::before,
*::after {
    /* 统一盒模型 */
    box-sizing: border-box;
    
    /* 禁止浏览器自动调整文字大小（Safari 移动端特性） */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
    /* 统一 tap 高亮行为 */
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    
    /* 统一触摸行为 */
    touch-action: manipulation;
}

/* ===== 2. 字体渲染统一（强制 Safari 风格） ===== */
html {
    /* 核心：强制 WebKit 字体平滑（Safari 默认） */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    
    /* 字体连字行为 */
    font-variant-ligatures: common-ligatures;
    
    /* 字距调整 */
    text-rendering: optimizeLegibility;
    
    /* Safari 特有的文本渲染优化 */
    -webkit-text-rendering: optimizeLegibility;
}

body {
    /* 强制 Safari 默认行高 */
    line-height: 1.47059;
    
    /* 字重标准化（防止 Chrome 过粗） */
    font-weight: 400;
    
    /* 字间距 Safari 风格 */
    letter-spacing: -0.022em;
}

/* 标题字重统一（Safari 标题偏细） */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.021em;
    line-height: 1.125;
}

h1 { font-weight: 700; letter-spacing: -0.024em; }
h2 { font-weight: 700; letter-spacing: -0.023em; }

/* ===== 3. 表单元素 - 强制 Safari 原生样式 ===== */

/* 输入框：移除 Chrome 自带样式，模拟 Safari */
input,
textarea,
select,
button {
    /* 强制标准外观（Safari 原生） */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* 统一边框 */
    border: 1px solid #ccc;
    border-radius: 4px;
    
    /* 统一内阴影（Safari 风格） */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    
    /* 字体继承 */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    
    /* 移除聚焦轮廓 */
    outline: none;
}

/* 特殊：保持搜索框的清除按钮（Safari 风格） */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* 统一搜索框的清除按钮样式 */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    appearance: searchfield-cancel-button;
    cursor: pointer;
}

/* 数字输入框的上下箭头（Safari 隐藏） */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* 日期选择器统一 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: none;
    appearance: none;
}

/* 复选框和单选按钮 - 强制 Safari 风格 */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #999;
    background: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin: 0 4px 0 0;
}

input[type="checkbox"] {
    border-radius: 3px;
}

input[type="radio"] {
    border-radius: 50%;
}

/* 选中状态 - Safari 蓝色风格 */
input[type="checkbox"]:checked {
    background: #007aff;
    border-color: #007aff;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="radio"]:checked {
    border-color: #007aff;
    border-width: 5px;
}

/* 按钮 - 强制 Safari 扁平风格 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 500;
    box-shadow: none;
    transition: opacity 0.2s;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    opacity: 0.8;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
    opacity: 0.6;
}

/* 禁用状态统一 */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== 4. 滚动条 - 强制 Safari 细线风格 ===== */

/* WebKit 滚动条（Chrome/Edge/Safari） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox 滚动条 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* ===== 5. 图片与媒体 - Safari 风格渲染 ===== */
img,
video,
canvas,
svg {
    /* 防止图片底部间隙 */
    vertical-align: middle;
    
    /* Safari 风格的图像渲染 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

/* 图片加载占位 - Safari 灰色 */
img {
    background-color: #f2f2f2;
}

/* ===== 6. 链接与交互元素 ===== */
a {
    /* 移除 Chrome 点击时的虚线框 */
    outline: none;
    
    /* 统一颜色继承 */
    color: inherit;
    
    /* 移除 IE 遗留的边框 */
    border: none;
}

a:focus-visible {
    /* 仅键盘聚焦时显示轮廓 */
    outline: 2px solid #007aff;
    outline-offset: 2px;
}

/* ===== 7. 列表样式统一（Safari 偏简洁） ===== */
ul, ol {
    padding-left: 1.5em;
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: 0.25em;
}

/* ===== 8. 表格 - Safari 简洁风格 ===== */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

th, td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
}

th {
    font-weight: 600;
    color: #333;
}

/* ===== 9. 强制 Safari 布局行为 ===== */

/* Flexbox 统一 */
.flex-safari {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

/* Grid 统一 */
.grid-safari {
    display: -ms-grid;
    display: grid;
}

/* 行高截断处理 - Safari 默认 */
.line-clamp-safari {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== 10. 移动端特定修复 ===== */

@media (pointer: coarse) {
    /* 触摸设备：增大点击区域 */
    button,
    input,
    select,
    textarea,
    a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 移动端：禁用悬停效果（Safari iOS 行为） */
    *:hover {
        text-decoration: none !important;
    }
}

/* ===== 11. 高分辨率屏幕优化（Retina）===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===== 12. 打印样式（Safari 风格）===== */
@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
}

/* ===== 13. 动画与过渡 - Safari 硬件加速风格 ===== */

/* 强制 GPU 加速（Safari 默认行为） */
.gpu-accelerated {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 统一动画属性顺序 */
.animated {
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 14. 深色模式支持（跟随系统）===== */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.4);
    }
    
    * {
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }
}

/* ===== 15. 辅助功能 - 减少动画 ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}