/* ================================================================
   祥升电竞·闲鱼托管 — Components Polish v5.0
   第三阶段：组件打磨 + 第四阶段：交互优化
   加载顺序：app.css → theme.css → [admin.css] → panel.css → components.css
   ================================================================ */

/* ================================================================
   1. 按钮系统完善
   ================================================================ */

/* Warning 变体（缺失补齐） */
.btn-warning,.panel-btn-warning{
    background:var(--c-warning);color:#fff;
    box-shadow:0 1px 3px rgba(217,119,6,.2);
}
.btn-warning:hover,.panel-btn-warning:hover{
    background:#b45309;
    box-shadow:0 4px 12px rgba(217,119,6,.25);
    transform:translateY(-1px);
}
.btn-warning:active,.panel-btn-warning:active{
    background:#92400e;transform:scale(.97);
}

/* 按钮尺寸体系完善：md 为默认（已有），补充明确标注 */
.btn-md,.panel-btn-md{
    padding:var(--space-2) var(--space-4);
    font-size:var(--fs-sm);
}

/* 按钮组 */
.btn-group{
    display:inline-flex;gap:0;
}
.btn-group .btn,.btn-group .panel-btn{
    border-radius:0;
    margin-left:-1px;
}
.btn-group .btn:first-child,.btn-group .panel-btn:first-child{
    border-radius:var(--r-md) 0 0 var(--r-md);
    margin-left:0;
}
.btn-group .btn:last-child,.btn-group .panel-btn:last-child{
    border-radius:0 var(--r-md) var(--r-md) 0;
}
.btn-group .btn:only-child,.btn-group .panel-btn:only-child{
    border-radius:var(--r-md);
}

/* 按钮加载态增强 — 保持宽度不跳动 */
.btn-loading,.panel-btn-loading{
    position:relative;color:transparent!important;
    pointer-events:none;min-width:60px;
}
.btn-loading::after,.panel-btn-loading::after{
    content:"";position:absolute;
    width:16px;height:16px;
    border:2px solid transparent;
    border-top-color:#fff;border-right-color:#fff;
    border-radius:50%;
    animation:spin .5s linear infinite;
    left:50%;top:50%;margin:-8px 0 0 -8px;
}
.btn-outline.btn-loading::after,.panel-btn-outline.btn-loading::after,
.btn-ghost.btn-loading::after,.panel-btn-ghost.btn-loading::after{
    border-top-color:var(--c-accent);border-right-color:var(--c-accent);
}

/* 按钮禁用态 */
.btn:disabled,.panel-btn:disabled{
    opacity:.4;cursor:not-allowed;pointer-events:none;
    transform:none!important;box-shadow:none!important;
}

/* 按钮聚焦环（可访问性） */
.btn:focus-visible,.panel-btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px var(--c-accent-glow),0 0 0 1px var(--c-accent);
}

/* ================================================================
   2. 卡片系统完善
   ================================================================ */

/* 卡片 hover 效果统一 — 微妙上浮 + 阴影加深 */
.card,.panel-card{
    transition:box-shadow var(--dur-base) var(--ease),
               border-color var(--dur-base) var(--ease),
               transform var(--dur-base) var(--ease);
}
.card:hover,.panel-card:hover{
    box-shadow:var(--shadow-md);
    border-color:var(--c-border-hover);
}

/* 可点击卡片 */
.card-clickable{
    cursor:pointer;
}
.card-clickable:hover{
    border-color:var(--c-accent);
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg),0 0 0 1px var(--c-accent-glow);
}
.card-clickable:active{
    transform:translateY(0) scale(.99);
    box-shadow:var(--shadow-sm);
}

/* 卡片头部图标统一样式 */
.card-header .card-icon,.panel-card-header .card-icon{
    width:20px;height:20px;color:var(--c-accent);flex-shrink:0;
}

/* 卡片操作区 */
.card-actions{
    display:flex;gap:var(--space-2);align-items:center;
}

/* 卡片加载态 */
.card-loading{
    position:relative;pointer-events:none;
}
.card-loading::after{
    content:"";position:absolute;inset:0;
    background:var(--c-surface);opacity:.7;
    display:flex;align-items:center;justify-content:center;
    z-index:2;border-radius:inherit;
}
.card-loading::before{
    content:"";position:absolute;top:50%;left:50%;
    width:24px;height:24px;margin:-12px 0 0 -12px;
    border:2.5px solid var(--c-border);
    border-top-color:var(--c-accent);
    border-radius:50%;
    animation:spin .6s linear infinite;
    z-index:3;
}

/* ================================================================
   3. 表单系统完善
   ================================================================ */

/* 表单组统一样式 */
.form-group,.panel-form-group{
    margin-bottom:var(--space-4);
    position:relative;
}

/* 表单标签 — 必填标记 */
.form-label.required::after,.panel-form-group label.required::after{
    content:" *";color:var(--c-danger);font-weight:var(--fw-normal);
}

/* 输入框 Focus 状态增强 */
.form-input:focus,.form-select:focus,.form-textarea:focus,
.panel-input:focus,.panel-select:focus,.panel-textarea:focus{
    border-color:var(--c-accent);
    box-shadow:0 0 0 3px var(--c-accent-glow);
    background:var(--c-surface);
}

/* 输入框错误状态 */
.form-input.error,.panel-input.error,
.form-select.error,.panel-select.error,
.form-textarea.error,.panel-textarea.error{
    border-color:var(--c-danger);
    box-shadow:0 0 0 3px var(--c-danger-bg);
}
.form-input.error:focus,.panel-input.error:focus{
    border-color:var(--c-danger);
    box-shadow:0 0 0 3px var(--c-danger-bg);
}

/* 输入框成功状态 */
.form-input.success,.panel-input.success{
    border-color:var(--c-success);
}
.form-input.success:focus,.panel-input.success:focus{
    border-color:var(--c-success);
    box-shadow:0 0 0 3px var(--c-success-bg);
}

/* 错误提示 — 统一位于输入框下方 */
.form-error,.panel-form-error{
    font-size:var(--fs-xs);color:var(--c-danger);
    margin-top:var(--space-1);
    display:flex;align-items:center;gap:var(--space-1);
    animation:slideDown var(--dur-base) var(--ease);
}
.form-error:empty,.panel-form-error:empty{display:none}

/* 成功提示 */
.form-success-msg{
    font-size:var(--fs-xs);color:var(--c-success);
    margin-top:var(--space-1);
    display:flex;align-items:center;gap:var(--space-1);
}

/* 提示文字 */
.form-hint,.panel-form-hint{
    font-size:var(--fs-xs);color:var(--c-text-3);
    margin-top:var(--space-1);line-height:var(--lh-relaxed);
}

/* 输入框图标 */
.form-input-icon{
    position:relative;
}
.form-input-icon .form-input,.form-input-icon .panel-input{
    padding-left:2.5rem;
}
.form-input-icon .input-icon{
    position:absolute;left:var(--space-3);top:50%;
    transform:translateY(-50%);
    color:var(--c-text-3);pointer-events:none;
    display:flex;align-items:center;
}

/* 表单行内验证图标 */
.form-group .validation-icon{
    position:absolute;right:var(--space-3);top:50%;
    transform:translateY(-50%);
    display:flex;align-items:center;
    pointer-events:none;
}
.form-group .validation-icon.success{color:var(--c-success)}
.form-group .validation-icon.error{color:var(--c-danger)}

/* ================================================================
   4. 表格系统完善
   ================================================================ */

/* 表头样式增强 */
.table-wrap,.panel-table-wrap{
    overflow-x:auto;
    border-radius:var(--r-md);
    -webkit-overflow-scrolling:touch;
}

/* 表头排序指示 */
th.sortable{
    cursor:pointer;user-select:none;
    position:relative;
}
th.sortable:hover{
    color:var(--c-text);
    background:var(--c-surface-3);
}
th.sortable::after{
    content:"⇅";margin-left:var(--space-1);
    opacity:.3;font-size:.65rem;
}
th.sortable.sort-asc::after{content:"↑";opacity:1;color:var(--c-accent)}
th.sortable.sort-desc::after{content:"↓";opacity:1;color:var(--c-accent)}

/* 表格行选中 */
tbody tr.selected,.panel-table tbody tr.selected{
    background:var(--c-accent-light);
}
tbody tr.selected:hover,.panel-table tbody tr.selected:hover{
    background:var(--c-accent-light);
}

/* 表格操作列 */
.table-actions{
    display:flex;gap:var(--space-1);align-items:center;
    flex-wrap:nowrap;
}

/* 表格内嵌按钮尺寸 */
.panel-table .btn,.panel-table .panel-btn{
    padding:var(--space-1) var(--space-2);
    font-size:var(--fs-xs);
    min-height:28px;
}

/* 表格加载态 */
.table-loading{
    position:relative;min-height:200px;
}
.table-loading::after{
    content:"";position:absolute;inset:0;
    background:var(--c-surface);opacity:.8;
    z-index:2;
}
.table-loading::before{
    content:"";position:absolute;top:50%;left:50%;
    width:28px;height:28px;margin:-14px 0 0 -14px;
    border:3px solid var(--c-border);
    border-top-color:var(--c-accent);
    border-radius:50%;
    animation:spin .6s linear infinite;
    z-index:3;
}

/* ================================================================
   5. 空状态统一
   ================================================================ */

/* 统一空状态组件 — 图标+标题+描述+按钮 */
.empty-state{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:var(--space-16) var(--space-4);
    text-align:center;
    animation:contentIn var(--dur-base) var(--ease) both;
}
.empty-state-icon{
    width:64px;height:64px;margin-bottom:var(--space-4);
    border-radius:var(--r-xl);
    background:var(--c-surface-2);
    display:flex;align-items:center;justify-content:center;
    color:var(--c-text-3);opacity:.6;
    font-size:1.75rem;
}
.empty-state-title{
    font-size:var(--fs-lg);font-weight:var(--fw-semibold);
    color:var(--c-text-2);margin-bottom:var(--space-2);
}
.empty-state-desc{
    font-size:var(--fs-sm);color:var(--c-text-3);
    max-width:360px;line-height:var(--lh-relaxed);
    margin-bottom:var(--space-4);
}
.empty-state-action{
    margin-top:var(--space-2);
}

/* 小型空状态（表格内/卡片内） */
.empty-state-sm{
    padding:var(--space-8) var(--space-4);
}
.empty-state-sm .empty-state-icon{
    width:48px;height:48px;font-size:1.25rem;
    margin-bottom:var(--space-3);
}
.empty-state-sm .empty-state-title{
    font-size:var(--fs-md);
}
.empty-state-sm .empty-state-desc{
    font-size:var(--fs-xs);
    margin-bottom:var(--space-3);
}

/* panel-empty 兼容映射到统一 empty-state */
.panel-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:var(--space-12) var(--space-4);
    text-align:center;
    animation:contentIn var(--dur-base) var(--ease) both;
}
.panel-empty .panel-empty-icon{
    width:56px;height:56px;margin:0 auto var(--space-3);
    border-radius:var(--r-lg);
    background:var(--c-surface-2);
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;color:var(--c-text-3);
}
.panel-empty .panel-empty-title{
    font-size:var(--fs-md);font-weight:var(--fw-semibold);
    color:var(--c-text-2);margin-bottom:var(--space-1);
}
.panel-empty .panel-empty-desc{
    font-size:var(--fs-sm);color:var(--c-text-3);
    max-width:320px;line-height:var(--lh-relaxed);
}

/* ================================================================
   6. 骨架屏系统
   ================================================================ */

/* 基础骨架屏 */
.skeleton{
    background:linear-gradient(90deg,
        var(--c-surface-2) 25%,
        var(--c-surface-3) 50%,
        var(--c-surface-2) 75%
    );
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
    border-radius:var(--r-sm);
    color:transparent;
    user-select:none;
    pointer-events:none;
}
.skeleton *{visibility:hidden}

/* 骨架屏变体 */
.skeleton-text{
    height:1em;
    margin-bottom:var(--space-2);
    border-radius:var(--r-xs);
}
.skeleton-text:last-child{width:60%}
.skeleton-title{
    height:1.5em;width:40%;
    margin-bottom:var(--space-3);
    border-radius:var(--r-sm);
}
.skeleton-avatar{
    width:40px;height:40px;
    border-radius:50%;flex-shrink:0;
}
.skeleton-btn{
    height:34px;width:80px;
    border-radius:var(--r-md);
    display:inline-block;
}
.skeleton-card{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-lg);
    padding:var(--space-5);
    overflow:hidden;
}
.skeleton-card .skeleton-title{margin-bottom:var(--space-4)}
.skeleton-card .skeleton-text{margin-bottom:var(--space-2)}

/* 骨架屏表格行 */
.skeleton-table-row{
    display:flex;gap:var(--space-4);
    padding:var(--space-3) var(--space-4);
    border-bottom:1px solid var(--c-border-light);
}
.skeleton-table-row .skeleton{
    height:1em;flex:1;
}
.skeleton-table-row .skeleton:first-child{max-width:60px}
.skeleton-table-row .skeleton:last-child{max-width:100px}

/* 骨架屏统计卡片 */
.skeleton-stat{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-lg);
    padding:var(--space-5);
}
.skeleton-stat .skeleton-icon{
    width:36px;height:36px;
    border-radius:var(--r-md);
    margin-bottom:var(--space-3);
}
.skeleton-stat .skeleton-value{
    height:1.75em;width:60%;
    margin-bottom:var(--space-1);
    border-radius:var(--r-xs);
}
.skeleton-stat .skeleton-label{
    height:.8em;width:40%;
    border-radius:var(--r-xs);
}

/* 骨架屏聊天消息 */
.skeleton-message{
    display:flex;gap:var(--space-3);
    padding:var(--space-3);
    align-items:flex-start;
}
.skeleton-message .skeleton-avatar{width:36px;height:36px}
.skeleton-message .skeleton-body{flex:1}
.skeleton-message .skeleton-text{max-width:70%}

/* 骨架屏页面级 */
.skeleton-page{
    padding:var(--space-6);
    animation:contentIn var(--dur-base) var(--ease) both;
}

/* 骨架屏列表项 */
.skeleton-list-item{
    display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    border-bottom:1px solid var(--c-border-light);
}
.skeleton-list-item .skeleton-content{flex:1}
.skeleton-list-item .skeleton-text{max-width:80%}

/* ================================================================
   7. 交互反馈增强
   ================================================================ */

/* 全局点击涟漪效果容器 */
.ripple-container{
    position:relative;overflow:hidden;
}
.ripple{
    position:absolute;border-radius:50%;
    background:currentColor;opacity:.15;
    transform:scale(0);
    animation:rippleEffect .5s var(--ease) forwards;
    pointer-events:none;
}
@keyframes rippleEffect{
    to{transform:scale(4);opacity:0}
}

/* 页面加载进度条增强 */
.pjax-progress{
    position:fixed;top:0;left:0;height:2.5px;
    background:var(--c-accent);
    z-index:99999;
    transition:width .3s var(--ease),opacity .3s var(--ease);
    border-radius:0 2px 2px 0;
    box-shadow:0 0 8px var(--c-accent-glow);
}

/* 数字滚动动画 */
@keyframes countUp{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}
.count-up{
    animation:countUp .5s var(--ease-spring) both;
    font-variant-numeric:tabular-nums;
}

/* 淡入动画工具类 */
.fade-in{animation:fadeIn var(--dur-slow) var(--ease) both}
.fade-in-fast{animation:fadeIn var(--dur-base) var(--ease) both}

/* ================================================================
   8. 移动端触摸优化
   ================================================================ */

@media(max-width:768px){
    /* 全局触摸目标最小44px */
    .btn,.panel-btn,
    a[role="button"],
    .tab,.panel-tab,
    .sidebar-link,
    .admin-nav-link,
    .chat-item,
    .form-toggle,
    .panel-checkbox{
        min-height:44px;
    }

    /* 小按钮例外（表格操作列等紧凑场景） */
    .btn-sm,.panel-btn-sm,
    .panel-table .btn,.panel-table .panel-btn,
    .table-actions .btn,.table-actions .panel-btn{
        min-height:36px;
    }

    /* 图标按钮 */
    .btn-icon{
        min-width:44px;min-height:44px;
        display:inline-flex;align-items:center;justify-content:center;
    }

    /* 表单元素 */
    .form-input,.form-select,.form-textarea,
    .panel-input,.panel-select,.panel-textarea{
        min-height:44px;
        font-size:16px; /* iOS 防缩放 */
    }

    /* 下拉选择 */
    .form-select,.panel-select{
        padding-right:2.5rem;
    }

    /* 骨架屏移动端适配 */
    .skeleton-card{padding:var(--space-4)}
    .skeleton-page{padding:var(--space-4)}

    /* 空状态移动端 */
    .empty-state{padding:var(--space-10) var(--space-4)}
    .empty-state-icon{width:48px;height:48px;font-size:1.25rem}

    /* 按钮组移动端堆叠 */
    .btn-group{
        flex-direction:column;width:100%;
    }
    .btn-group .btn,.btn-group .panel-btn{
        border-radius:var(--r-md)!important;
        margin-left:0;margin-bottom:var(--space-2);
        width:100%;
    }
}

/* ================================================================
   8.5 全局 Loading 遮罩
   ================================================================ */

.app-loading-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.35);
    z-index:99998;
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(3px);
    animation:fadeIn var(--dur-base) var(--ease);
}
.app-loading-card{
    background:var(--c-surface);
    border-radius:var(--r-xl);
    padding:var(--space-6) var(--space-8);
    display:flex;align-items:center;gap:var(--space-3);
    box-shadow:var(--shadow-xl);
    animation:scaleIn var(--dur-base) var(--ease-spring);
}
.app-loading-spinner{
    width:22px;height:22px;
    border:2.5px solid var(--c-border);
    border-top-color:var(--c-accent);
    border-radius:50%;
    animation:spin .6s linear infinite;
}
.app-loading-text{
    font-size:var(--fs-sm);font-weight:var(--fw-semibold);
    color:var(--c-text);
}
[data-theme="dark"] .app-loading-overlay{
    background:rgba(0,0,0,.5);
}

/* ================================================================
   9. 暗色主题适配
   ================================================================ */

[data-theme="dark"] .skeleton{
    background:linear-gradient(90deg,
        var(--c-surface-2) 25%,
        var(--c-surface-3) 50%,
        var(--c-surface-2) 75%
    );
    background-size:200% 100%;
}
[data-theme="dark"] .empty-state-icon{
    background:var(--c-surface-3);
}
[data-theme="dark"] .card-loading::after{
    background:var(--c-surface);
}

/* ================================================================
   10. 微交互动画
   ================================================================ */

/* 状态变化过渡 */
.badge,.panel-badge,.status{
    transition:all var(--dur-base) var(--ease);
}

/* 进度条动画 */
.progress-bar{
    position:relative;overflow:hidden;
}
.progress-bar::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    animation:progressShine 2s infinite;
}
@keyframes progressShine{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
}

/* 开关切换动画增强 */
.form-toggle .track{
    transition:background var(--dur-base) var(--ease);
}
.form-toggle .track::after{
    transition:transform var(--dur-base) var(--ease-spring),
               box-shadow var(--dur-base) var(--ease);
}
.form-toggle:active .track::after{
    width:20px;
}

/* 下拉菜单动画 */
.topbar-dropdown-menu{
    transform-origin:top right;
    animation:scaleIn var(--dur-base) var(--ease-spring);
}

/* 侧边栏链接滑动指示 */
.sidebar-link,.admin-nav-link{
    position:relative;
}
.sidebar-link.active,.admin-nav-link.active{
    position:relative;
}

/* Toast 进入动画增强 */
.toast{
    animation:toastIn .4s var(--ease-spring) both;
    backdrop-filter:blur(8px);
}

/* Modal 底部弹出（移动端） */
@media(max-width:768px){
    .modal-overlay{
        align-items:flex-end;padding:0;
    }
    .modal{
        max-width:100%;max-height:92vh;
        border-radius:var(--r-xl) var(--r-xl) 0 0;
        animation:slideUp .35s var(--ease) both;
    }
    .modal-header{
        position:sticky;top:0;
        background:var(--c-surface);z-index:1;
        padding:var(--space-4) var(--space-5);
    }
    .modal-footer{
        position:sticky;bottom:0;
        background:var(--c-surface-2);
        padding:var(--space-3) var(--space-5);
    }
    .modal-footer .btn,.modal-footer .panel-btn{
        flex:1;min-height:44px;
    }
}

/* ================================================================
   11. 打印样式
   ================================================================ */
@media print{
    .skeleton,.empty-state-icon,.btn,.panel-btn,
    .feedback-fab,.mobile-tabbar{
        display:none!important;
    }
    .card,.panel-card{
        border:1px solid #ccc;
        box-shadow:none;
        break-inside:avoid;
    }
}