/**
 * 全站统一导航与交互样式
 * .app-header / .app-back-btn / .app-close-btn / .app-page-title
 * 点击反馈 / 页面切换动画 / safe-area适配
 */

/* ========== 顶部导航栏 ========== */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0);
    background: #ffffff;
    border-bottom: 1px solid #f0f1f5;
    box-sizing: border-box;
}

.app-header-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header-side {
    display: flex;
    align-items: center;
    min-width: 44px;
}

.app-header-side.right {
    justify-content: flex-end;
}

/* ========== 返回按钮 ========== */
.app-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: #1a1a1a;
    cursor: pointer;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease, transform 0.1s ease;
}

.app-back-btn:active {
    background: #f0f1f5;
    transform: scale(0.96);
}

.app-back-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ========== 关闭按钮（modal/浮层） ========== */
.app-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: rgba(0,0,0,0.04);
    color: #6b7280;
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease, transform 0.1s ease, color 0.12s ease;
}

.app-close-btn:active {
    background: rgba(0,0,0,0.08);
    transform: scale(0.94);
    color: #1a1a1a;
}

.app-close-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

/* ========== 通用点击反馈 ========== */
.app-tap {
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, opacity 0.12s ease;
}

.app-tap:active {
    transform: scale(0.98);
    opacity: 0.85;
}

/* ========== 页面进入动画 ========== */
.app-page-enter {
    animation: appPageFadeIn 0.16s ease-out;
}

@keyframes appPageFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== modal淡入 ========== */
.app-modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.app-modal.open {
    opacity: 1;
    visibility: visible;
}

.app-modal-panel {
    transform: scale(0.96) translateY(8px);
    transition: transform 0.18s ease;
}

.app-modal.open .app-modal-panel {
    transform: scale(1) translateY(0);
}

/* ========== 减少动画偏好 ========== */
@media (prefers-reduced-motion: reduce) {
    .app-page-enter,
    .app-modal,
    .app-modal-panel,
    .app-back-btn,
    .app-close-btn,
    .app-tap {
        animation: none !important;
        transition: none !important;
    }
}

/* ========== 底部安全区 ========== */
.app-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ========== Toast统一 ========== */
.app-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 56px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: 85vw;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,0.82);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.app-toast.success { background: rgba(34,197,94,0.92); }
.app-toast.warning { background: rgba(245,158,11,0.92); }
.app-toast.error { background: rgba(239,68,68,0.92); }