/* ============ 手机端适配 ============ */

/* 手机宽度下统一调整 */
@media screen and (max-width: 900px) {

    /* 登录页：手机竖屏也能用 */
    .login-wrap {
        padding: 10px !important;
    }
    .login-card {
        width: 100% !important;
        max-width: 420px !important;
        padding: 30px 22px !important;
    }
    .login-title { font-size: 22px !important; }
    .login-sub { font-size: 13px !important; }
    .field input {
        font-size: 16px !important; /* iOS 防止自动缩放 */
        padding: 14px 0 !important;
    }
    .btn-primary {
        font-size: 16px !important;
        padding: 16px !important;
    }

    /* 时间线页顶部栏：缩小 */
    .top-bar {
        gap: 10px !important;
        padding: 10px 12px !important;
        min-width: 240px !important;
    }
    .top-bar-content {
        width: 180px !important;
        max-width: 180px !important;
    }
    .top-bar-row1 .user-name {
        font-size: 15px !important;
        max-width: 180px !important;
    }
    .signature-track {
        font-size: 12px !important;
    }
    .top-bar-handle-wrap,
    .top-bar-handle {
        width: 48px !important;
        height: 48px !important;
    }
    .top-bar-handle { font-size: 22px !important; }

    /* 左上角悬浮窗：贴边更紧 */
    .top-bar {
        transform: translateX(calc(-100% + 64px)) !important;
    }
    .top-bar.collapsed {
        transform: translateX(calc(-100% + 64px)) !important;
    }

    /* 左下角悬浮窗：按钮更大 */
    .float-toggle {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }
    .float-menu {
        min-width: 220px !important;
    }
    .float-item {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }

    /* 音乐播放器：按钮更大 */
    .music-in-float .mf-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .music-in-float .mf-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    .music-in-float .mf-title {
        font-size: 13px !important;
    }

    /* 时间线卡片：手机稍小 */
    .event-card {
        width: 240px !important;
        padding: 14px 16px !important;
    }
    .event-date { font-size: 11px !important; }
    .event-title { font-size: 15px !important; }
    .event-desc { font-size: 12px !important; }

    /* 事件列表面板 */
    .timeline-track {
        padding: 0 100px !important;
    }
    .timeline-event {
        flex: 0 0 280px !important;
    }

    /* 弹窗 */
    .detail-box {
        padding: 22px 18px !important;
        border-radius: 18px !important;
    }
    .detail-title { font-size: 20px !important; }
    .detail-desc { font-size: 14px !important; }
    .detail-close {
        width: 36px !important;
        height: 36px !important;
    }

    /* 后台容器：手机全宽 */
    .admin-container {
        padding: 14px !important;
    }
    .admin-header {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px !important;
    }
    .admin-header h1 { font-size: 18px !important; }
    .form-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .form-card h3 { font-size: 15px !important; }

    /* 后台表单：加大输入框 */
    .form-card input[type="text"],
    .form-card input[type="password"],
    .form-card input[type="date"],
    .form-card input[type="number"],
    .form-card textarea,
    .name-form input {
        font-size: 16px !important; /* iOS 防止自动缩放 */
        padding: 14px 16px !important;
    }

    /* 上传按钮：加大触摸区域 */
    .form-card input[type="file"] {
        font-size: 14px !important;
        padding: 16px 12px !important;
        border-radius: 12px !important;
    }

    /* 上传按钮（提交按钮） */
    .btn-primary.btn-small {
        padding: 14px 28px !important;
        font-size: 15px !important;
        min-height: 48px;
    }

    /* 事件列表：手机上更紧凑 */
    .event-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .event-row .row-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* 折叠块：加大标题点击区域 */
    details.year-group > summary.year-header,
    details.month-group > summary.month-header {
        padding: 16px 14px !important;
        min-height: 52px;
    }

    /* 模式行：竖排 */
    .mode-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* 颜色行：允许换行 */
    .color-row {
        gap: 8px !important;
    }
    .color-item input[type="color"] {
        width: 48px !important;
        height: 44px !important;
    }
}

/* ============ 极窄屏幕（手机竖屏） ============ */
@media screen and (max-width: 500px) {
    .event-card {
        width: 200px !important;
    }
    .timeline-track {
        padding: 0 60px !important;
    }
    .timeline-event {
        flex: 0 0 240px !important;
    }
    .top-bar-content {
        width: 150px !important;
        max-width: 150px !important;
    }
    .top-bar-row1 .user-name {
        max-width: 150px !important;
    }
}

/* ============ 横屏提示（仅时间线页用） ============ */
.rotate-tip {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #ffdde1, #ee9ca7, #ffc0cb);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    text-align: center;
}
.rotate-tip.show {
    display: flex;
}
.rotate-tip .rotate-icon {
    font-size: 72px;
    animation: rotateAnim 2s ease-in-out infinite;
}
@keyframes rotateAnim {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}
.rotate-tip .rotate-text {
    font-size: 18px;
    font-weight: 700;
    color: #4a2c2a;
    line-height: 1.6;
}
.rotate-tip .rotate-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.rotate-btn {
    padding: 14px 26px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #ff758c, #ffb7c5);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 117, 140, 0.4);
    min-height: 48px;
}
.rotate-btn.secondary {
    background: rgba(255, 255, 255, 0.9);
    color: #4a2c2a;
    box-shadow: 0 4px 12px rgba(255, 117, 140, 0.2);
}

/* ============ 横竖屏切换按钮（仅触摸设备显示） ============ */
.float-item.orientation-btn {
    display: none;  /* 默认隐藏（电脑端） */
}
body.is-touch-device .float-item.orientation-btn {
    display: block;  /* 手机/平板显示 */
}