/**
 * Polish Optimizations - 精细化打磨优化
 * 分离好的设计和卓越的设计的细节处理
 */

/* ============================================
   一、基础优化 - Base Polish
   ============================================ */

/* 1.1 改进的字体渲染 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 1.2 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}

/* 1.3 文本选择样式 */
::selection {
    background: rgba(16, 185, 129, 0.3);
    color: #ffffff;
}
::-moz-selection {
    background: rgba(16, 185, 129, 0.3);
    color: #ffffff;
}

/* ============================================
   二、交互状态 - Interaction States
   ============================================ */

/* 2.1 按钮完整状态 */
.btn-complete {
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-complete::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}
.btn-complete:hover::before {
    left: 100%;
}
.btn-complete:active {
    transform: scale(0.97);
}
.btn-complete:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 0 1px rgba(16, 185, 129, 0.4);
}
.btn-complete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 2.2 链接完整状态 */
.link-polished {
    position: relative;
    transition: color 0.2s ease;
}
.link-polished::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #10b981;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.link-polished:hover::after,
.link-polished:focus-visible::after {
    width: 100%;
}

/* 2.3 卡片悬停效果 */
.card-polished {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-polished:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(16, 185, 129, 0.1);
}
.card-polished:focus-within {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* ============================================
   三、表单优化 - Form Polish
   ============================================ */

/* 3.1 输入框完整状态 */
.input-polished {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.input-polished:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1), 0 0 20px rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}
.input-polished:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.input-polished::placeholder {
    color: #52525b;
    opacity: 1;
}
.input-polished:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #18181b;
}
.input-polished:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}
.input-polished:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

/* 3.2 标签优化 */
.label-polished {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #a1a1aa;
    transition: color 0.2s ease;
}
.input-polished:focus + .label-polished,
.input-polished:focus-visible + .label-polished {
    color: #10b981;
}

/* ============================================
   四、状态指示 - Status Indicators
   ============================================ */

/* 4.1 成功状态 */
.status-success {
    color: #34d399;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-success::before {
    content: '✓ ';
    font-weight: bold;
}

/* 4.2 错误状态 */
.status-error {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.status-error::before {
    content: '✕ ';
    font-weight: bold;
}

/* 4.3 警告状态 */
.status-warning {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}
.status-warning::before {
    content: '⚠ ';
    font-weight: bold;
}

/* 4.4 信息状态 */
.status-info {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.status-info::before {
    content: 'ℹ ';
    font-weight: bold;
}

/* ============================================
   五、加载状态 - Loading States
   ============================================ */

/* 5.1 骨架屏动画 */
.skeleton {
    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 5.2 加载中指示器 */
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #27272a;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 5.3 按钮加载状态 */
.btn-loading {
    pointer-events: none;
    position: relative;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.btn-loading span {
    visibility: hidden;
}

/* ============================================
   六、空状态 - Empty States
   ============================================ */

/* 6.1 空状态容器 */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #71717a;
}
.empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    opacity: 0.5;
}
.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #a1a1aa;
    margin-bottom: 0.5rem;
}
.empty-state-description {
    font-size: 0.875rem;
    color: #71717a;
    margin-bottom: 1.5rem;
}

/* ============================================
   七、动画优化 - Animation Polish
   ============================================ */

/* 7.1 页面进入动画 */
.page-enter {
    animation: page-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes page-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 7.2 淡入淡出 */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-out {
    animation: fadeOut 0.3s ease-in forwards;
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 7.3 缩放进入 */
.scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 7.4 滑动进入 */
.slide-up {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   八、无障碍优化 - Accessibility
   ============================================ */

/* 8.1 焦点可见性 */
.focus-visible-only:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* 8.2 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skeleton {
        animation: none;
    }
}

/* 8.3 高对比度模式 */
@media (prefers-contrast: high) {
    * {
        border-width: 1px !important;
    }
}

/* ============================================
   九、打印优化 - Print Styles
   ============================================ */

@media print {
    .no-print {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
    a {
        color: #0000ee !important;
        text-decoration: underline !important;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 80%;
        color: #666;
    }
}

/* ============================================
   十、细节优化 - Micro Polish
   ============================================ */

/* 10.1 图片懒加载占位 */
img[loading="lazy"] {
    background: #18181b;
}

/* 10.2 防止图片拖拽 */
img {
    user-select: none;
    -webkit-user-drag: none;
}

/* 10.3 数字等宽显示 */
.font-tabular {
    font-variant-numeric: tabular-nums;
}

/* 10.4 防止换行 */
.no-wrap {
    white-space: nowrap;
}

/* 10.5 截断文本 */
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 10.6 点击区域扩大 */
.touch-target {
    position: relative;
}
.touch-target::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

/* 10.7 视觉隐藏但可访问 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   十一、响应式微调 - Responsive Polish
   ============================================ */

/* 11.1 移动端优化 */
@media (max-width: 640px) {
    .mobile-stack {
        flex-direction: column !important;
    }
    .mobile-full {
        width: 100% !important;
    }
    .mobile-text-center {
        text-align: center !important;
    }
}

/* 11.2 平板优化 */
@media (min-width: 641px) and (max-width: 1024px) {
    .tablet-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 11.3 桌面优化 */
@media (min-width: 1025px) {
    .desktop-hover-only:hover {
        opacity: 1 !important;
    }
}

/* ============================================
   十二、健壮性优化 - Hardening
   ============================================ */

/* 12.1 文本溢出处理 */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wrap-break {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 12.2 Flex/Grid 溢出防止 */
.flex-no-overflow {
    min-width: 0;
    overflow: hidden;
}

.grid-no-overflow {
    min-width: 0;
    min-height: 0;
}

/* 12.3 响应式流体字体 */
.font-fluid {
    font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);
}

.font-fluid-sm {
    font-size: clamp(0.875rem, 0.75rem + 1vw, 1rem);
}

.font-fluid-lg {
    font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem);
}

/* 12.4 最小可读尺寸 */
.text-min-readable {
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .text-min-readable {
        font-size: 1rem;
    }
}

/* 12.5 触摸目标最小尺寸 */
.touch-min {
    min-width: 44px;
    min-height: 44px;
}

/* 12.6 长文本容器 */
.text-container {
    max-width: 100%;
    overflow-x: auto;
}

.text-container pre,
.text-container code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 12.7 图片边界处理 */
.img-contain {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

.img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 12.8 表单边界处理 */
.input-boundary {
    max-width: 100%;
    box-sizing: border-box;
}

.textarea-boundary {
    max-width: 100%;
    min-height: 100px;
    max-height: 400px;
    resize: vertical;
    box-sizing: border-box;
}

/* 12.9 数字格式化 */
.font-mono-numbers {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 12.10 防止布局跳动 */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-ratio-square {
    aspect-ratio: 1 / 1;
}

/* 12.11 高对比度模式支持 */
@media (prefers-contrast: high) {
    .border-contrast {
        border-width: 2px !important;
    }
    .text-contrast {
        color: #000 !important;
        background: #fff !important;
    }
}

/* 12.12 减少透明度模式 */
@media (prefers-reduced-transparency: reduce) {
    .no-transparency {
        opacity: 1 !important;
        backdrop-filter: none !important;
    }
}

/* 12.13 数据表格响应式 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 600px;
}

/* 12.14 长列表优化 */
.list-virtual {
    contain: strict;
    content-visibility: auto;
}

/* 12.15 错误状态边界 */
.error-boundary {
    padding: 1.5rem;
    border: 1px dashed #ef4444;
    border-radius: 0.5rem;
    background: rgba(239, 68, 68, 0.05);
}

/* 12.16 加载状态边界 */
.loading-boundary {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 12.17 空状态边界 */
.empty-boundary {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 12.18 安全区域适配 */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left, 0);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right, 0);
}

/* 12.19 滚动捕获 */
.scroll-snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.scroll-snap-y {
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

.scroll-snap-child {
    scroll-snap-align: start;
}

/* 12.20 焦点管理 */
.focus-manage:focus:not(:focus-visible) {
    outline: none;
}

.focus-manage:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}