/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    /* 🚀 优化：使用静态浅色背景，性能友好且美观 */
    background: #f5f7fa;
    /* 添加微妙的品牌色点缀（静态，不消耗性能） */
    background-image: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, transparent 30%),
        linear-gradient(225deg, rgba(118, 75, 162, 0.02) 0%, transparent 30%);
    background-size: 100% 100%;
    background-attachment: fixed;
    color: #333;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    /* 🚀 默认禁止左右拖动，允许上下滚动 */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html {
    /* 🚀 默认禁止左右拖动，允许上下滚动 */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 🚀 已移除：gradientShift 动画和 body::before 以提升性能 */

/* ========== 🌊 玻璃态海洋蓝绿主题 - 主页登录 ========== */
.landing-layout {
    position: relative;
    display: block;
    min-height: 100vh;
    padding: 0;
    color: #e9f3ff;
    /* 🎨 海洋蓝绿渐变背景 */
    background: linear-gradient(135deg, #0a1628 0%, #0d2137 30%, #0f2a3d 60%, #061520 100%);
    overflow: hidden;
}

.landing-visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    /* 🎨 海洋蓝绿叠加层 */
    background: linear-gradient(180deg, rgba(6, 28, 44, 0.35), rgba(8, 32, 48, 0.65));
}

/* 🌊 海洋光斑装饰效果 */
.landing-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(0, 180, 180, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 75% 70%, rgba(0, 150, 200, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse 50% 30% at 50% 50%, rgba(20, 200, 180, 0.04) 0%, transparent 40%);
    pointer-events: none;
}

.landing-bg {
    position: absolute;
    inset: 0;
    /* 🌤️ 明亮色调叠加 */
    background-image: 
        linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(230, 245, 255, 0.2)),
        url('/static/pic/mainpage.jpg');
    background-size: cover;
    background-position: center;
    /* ☀️ 亮度降低20% (1.15 → 0.92) */
    filter: saturate(1.1) contrast(1.02) brightness(0.92);
    transform-origin: center;
    animation: landingZoom 26s ease-in-out infinite alternate;
}

.landing-overlay {
    position: absolute;
    inset: 0;
    /* 🌤️ 浅色柔和渐变叠加 */
    background: linear-gradient(120deg, 
        rgba(255, 255, 255, 0.15) 10%, 
        rgba(230, 245, 255, 0.1) 55%, 
        rgba(200, 230, 250, 0.2) 95%);
    mix-blend-mode: normal;
}

.hero-highlight {
    position: absolute;
    left: 3vw;
    top: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    max-width: 32rem;
    z-index: 2;
}

/* 🌊 Hero标签 - 海洋蓝绿主题 */
.hero-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    /* 🌤️ 明亮玻璃态背景 */
    background: rgba(0, 120, 180, 0.15);
    border: 1px solid rgba(0, 120, 180, 0.3);
    backdrop-filter: blur(8px);
    color: #0369a1;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* 🔌 Hero标题 - 电路板/数据流科技风格（明亮版） */
.hero-title {
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    position: relative;
    display: inline-block;
    padding: 0.3em 0.5em;
    
    /* 🌤️ 深蓝色渐变文字（明亮背景适配） */
    background: linear-gradient(
        90deg, 
        #0077b6 0%,      /* 深海蓝 */
        #0096c7 25%,     /* 亮蓝 */
        #00b4d8 50%,     /* 天蓝 */
        #7c3aed 75%,     /* 紫色点缀 */
        #0077b6 100%     /* 深海蓝 */
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* ⚡ 电流流动动画 */
    animation: circuit-flow 3s linear infinite;
    
    /* 💡 柔和发光效果（明亮背景适配） */
    filter: drop-shadow(0 2px 4px rgba(0, 119, 182, 0.3))
            drop-shadow(0 4px 12px rgba(0, 150, 199, 0.25));
}

/* 🔌 电路板背景层（明亮版） */
.hero-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    
    /* 🌤️ 明亮背景下的电路板网格纹理 */
    background: 
        /* 水平电路线 */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(0, 119, 182, 0.15) 8px,
            rgba(0, 119, 182, 0.15) 9px
        ),
        /* 垂直电路线 */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 12px,
            rgba(0, 150, 199, 0.12) 12px,
            rgba(0, 150, 199, 0.12) 13px
        ),
        /* 电路节点 */
        radial-gradient(circle at 20% 30%, rgba(0, 119, 182, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(0, 150, 199, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.3) 1px, transparent 1px);
    
    background-size: 100% 100%, 100% 100%, 20px 20px, 15px 15px, 25px 25px;
    border-radius: 4px;
    opacity: 0.9;
}

/* 🚢 船舶形状扫描光效（明亮版优化） */
.hero-title::after {
    content: '';
    position: absolute;
    top: 95%;
    left: -60%;
    width: 45%;
    height: 70%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    
    /* 🚢 高对比度船舶渐变 - 深蓝+金色醒目配色 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(30, 64, 175, 0.4) 5%,
        rgba(30, 64, 175, 0.85) 20%,
        rgba(59, 130, 246, 0.95) 40%,
        rgba(251, 191, 36, 0.9) 55%,
        rgba(59, 130, 246, 0.9) 70%,
        rgba(30, 64, 175, 0.7) 85%,
        transparent 100%
    );
    
    /* 🚢 船舶形状裁剪 - 侧视图轮廓 */
    clip-path: polygon(
        /* 船尾（左侧） */
        0% 35%,           /* 船尾上沿 */
        5% 30%,           /* 船尾甲板 */
        8% 28%,           /* 船尾舱室底部 */
        8% 18%,           /* 船尾舱室顶部 */
        12% 15%,          /* 驾驶舱左侧 */
        18% 12%,          /* 驾驶舱顶部 */
        25% 15%,          /* 驾驶舱右侧 */
        25% 25%,          /* 甲板舱室 */
        35% 25%,          /* 中部甲板 */
        40% 20%,          /* 烟囱底部 */
        42% 8%,           /* 烟囱顶部 */
        45% 8%,           /* 烟囱顶部右 */
        47% 20%,          /* 烟囱底部右 */
        55% 25%,          /* 中后甲板 */
        70% 28%,          /* 前甲板开始 */
        85% 35%,          /* 船首甲板 */
        /* 船首（右侧尖角） */
        100% 50%,         /* 船首尖端 */
        /* 船底（返回） */
        85% 65%,          /* 船首底部 */
        70% 72%,          /* 前底部 */
        50% 75%,          /* 中部底部 */
        30% 75%,          /* 后中底部 */
        15% 72%,          /* 后部底部 */
        5% 68%,           /* 船尾底部 */
        0% 65%            /* 船尾下沿 */
    );
    
    /* 船舶光晕效果 - 增强可见度 */
    filter: blur(1px) drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
    
    /* 航行动画 */
    animation: ship-sail 3s ease-in-out infinite;
}

/* 🌊 船舶航行波纹效果 */
@keyframes ship-sail {
    0% {
        left: -60%;
        opacity: 0;
        transform: translateY(-50%) scaleY(0.9);
    }
    15% {
        opacity: 0.8;
        transform: translateY(-50%) scaleY(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-48%) scaleY(1.02);
    }
    85% {
        opacity: 0.8;
        transform: translateY(-50%) scaleY(1);
    }
    100% {
        left: 160%;
        opacity: 0;
        transform: translateY(-50%) scaleY(0.9);
    }
}

/* ⚡ 电流流动动画 */
@keyframes circuit-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}


/* 💡 LED脉冲呼吸效果 */
@keyframes led-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 245, 212, 0.8))
                drop-shadow(0 0 20px rgba(0, 187, 249, 0.6))
                drop-shadow(0 0 40px rgba(0, 245, 212, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(0, 245, 212, 1))
                drop-shadow(0 0 30px rgba(0, 187, 249, 0.8))
                drop-shadow(0 0 60px rgba(0, 245, 212, 0.6));
    }
}

/* 🎯 悬停增强效果 */
.hero-title:hover {
    animation: circuit-flow 1.5s linear infinite, led-pulse 1s ease-in-out infinite;
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* 🌊 Hero副标题 */
.hero-subtitle {
    font-size: 1.05rem;
    /* 🌤️ 明亮背景下的深色文字 */
    color: rgba(30, 64, 100, 0.9);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.ship-track {
    position: absolute;
    bottom: 18%;
    left: -40%;
    width: 180%;
    height: 32%;
    pointer-events: none;
    z-index: 2;
}

.ship {
    position: absolute;
    left: -18rem;
    bottom: 2.2rem;
    display: flex;
    align-items: flex-end;
    width: 16rem;
    height: 4.5rem;
    padding: 0 0.5rem 0.4rem;
    filter: drop-shadow(0 0.8rem 1.4rem rgba(0, 0, 0, 0.6));
    animation: shipSail 22s cubic-bezier(0.4, 0.13, 0.22, 1) infinite, shipBob 5.5s ease-in-out infinite;
}

.ship-body {
    position: relative;
    width: 100%;
    height: 3.2rem;
    border-radius: 0.4rem 0.4rem 1.4rem 1.4rem;
    background: linear-gradient(180deg, #d5dde8 0%, #9fb5cc 50%, #71849a 100%);
    box-shadow: inset 0 0.12rem 0.35rem rgba(255, 255, 255, 0.65), inset 0 -0.18rem 0.4rem rgba(0, 27, 58, 0.35);
}

.ship-cabin {
    position: absolute;
    top: -1.6rem;
    right: 1.1rem;
    display: block;
    width: 4.6rem;
    height: 1.6rem;
    border-radius: 0.3rem 0.3rem 0.5rem 0.5rem;
    background: linear-gradient(180deg, #eef4ff 0%, #cfd9e7 100%);
    box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.25);
}

.ship-bridge {
    position: absolute;
    top: -2.1rem;
    right: 0.8rem;
    display: block;
    width: 3rem;
    height: 0.9rem;
    border-radius: 0.3rem;
    background: linear-gradient(180deg, #f7fbff 0%, #d6e4f5 100%);
}

/* 🌊 船舶波浪 - 海洋蓝绿色调 */
.ship-wave {
    position: absolute;
    bottom: -0.7rem;
    left: 8%;
    width: 62%;
    height: 1.2rem;
    border-radius: 50%;
    /* 🎨 海洋蓝绿波浪渐变 */
    background: radial-gradient(circle, 
        rgba(129, 230, 217, 0.85) 0%, 
        rgba(79, 209, 197, 0.35) 55%, 
        rgba(56, 178, 172, 0) 75%);
    filter: blur(1.5px);
    opacity: 0.75;
    animation: wavePulse 3.6s ease-in-out infinite;
}

.ship-wave-main {
    left: 12%;
    width: 66%;
}

.ship-wave-trail {
    left: -6%;
    width: 38%;
    opacity: 0.45;
    animation-delay: 0.8s;
}

/* 🌊 船舶灯光 - 海洋蓝绿发光 */
.ship-light {
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #81e6d9;
    box-shadow: 
        0 0 0.6rem rgba(129, 230, 217, 0.9), 
        0 0 1.6rem rgba(79, 209, 197, 0.7),
        0 0 2.5rem rgba(56, 178, 172, 0.4);
}

.ship-light-front {
    left: 1.4rem;
    top: 1.1rem;
}

.ship-light-back {
    right: 1rem;
    top: 1.2rem;
}

/* 🌊 水面波光效果 - 海洋蓝绿主题 */
.water-overlay {
    position: absolute;
    inset: 0;
    /* 🎨 海洋蓝绿底部渐变 */
    background: linear-gradient(0deg, 
        rgba(0, 60, 80, 0.4) 0%, 
        rgba(0, 40, 60, 0.2) 30%,
        rgba(0, 20, 35, 0) 60%);
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: overlayPulse 7s ease-in-out infinite;
}

.auth-panel {
    position: absolute;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    max-width: 26rem;
    width: 32%;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 10;
}

.auth-panel .auth-card {
    pointer-events: auto;
}

.auth-card {
    width: min(32rem, 100%);
    margin-left: auto;
    background: transparent;
    border: none;
    box-shadow: none;
}

.auth-link-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.8rem;
}

.auth-link {
    color: #3498db;
    font-size: 0.9rem;
    text-decoration: none;
}

.auth-button-row {
    display: flex;
    gap: 0.8rem;
}

.email-warning {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.2rem;
    border-radius: 0.8rem;
    border: 0.08rem solid #ffc107;
    background: rgba(255, 243, 205, 0.9);
    color: #856404;
}

.email-warning__title {
    font-weight: 700;
}

.email-warning__text {
    line-height: 1.6;
}

@keyframes landingZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.06);
    }
}

@keyframes shipSail {
    0% {
        transform: translateX(0) translateY(0) rotate(-0.5deg);
    }
    52% {
        transform: translateX(110vw) translateY(-0.4rem) rotate(0.35deg);
    }
    100% {
        transform: translateX(200vw) translateY(0) rotate(-0.1deg);
    }
}

@keyframes shipBob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.35rem);
    }
}

@keyframes wavePulse {
    0%, 100% {
        opacity: 0.65;
        transform: scaleX(1) translateY(0);
    }
    50% {
        opacity: 0.9;
        transform: scaleX(1.12) translateY(0.1rem);
    }
}

@keyframes overlayPulse {
    0%, 100% {
        opacity: 0.88;
    }
    50% {
        opacity: 1;
    }
}

/* 🌊 平板端响应式 - 玻璃态优化 */
@media (max-width: 1080px) {
    .landing-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem 1.4rem;
    }

    .landing-visual {
        position: absolute;
        inset: 0;
    }

    .auth-panel {
        position: relative;
        transform: none;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 28rem;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        pointer-events: auto;
        z-index: 10;
    }

    .hero-highlight {
        left: 1.6rem;
        top: 2vh;
        /* 🌊 平板端Hero区域 */
        opacity: 0.6;
    }

    .auth-card.auth-container {
        width: 100%;
        margin: 0 auto;
        /* 🔮 平板端增强玻璃态可读性 */
        background: rgba(255, 255, 255, 0.1);
    }
}

/* 🌊 手机端响应式 - 玻璃态优化 */
@media (max-width: 680px) {
    .landing-layout {
        padding: 1rem 1rem 1.5rem 1rem;
        min-height: 100vh;
        min-height: 100dvh; /* 动态视口高度，适配手机浏览器 */
    }

    .hero-title {
        font-size: 2rem;
        letter-spacing: 0.05em;
        padding: 0.2em 0.4em;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .hero-highlight {
        /* 🌊 手机端隐藏Hero区域 */
        display: none;
    }

    /* 🚀 手机端隐藏船型动画，避免显示异常 */
    .ship-track {
        display: none;
    }

    .ship {
        width: 12rem;
        height: 3.5rem;
    }

    /* 🔮 手机端玻璃态卡片优化 */
    .auth-card.auth-container {
        padding: 1.8rem 1.4rem;
        border-radius: 1.2rem;
        /* 🎨 手机端稍微增加背景不透明度，提升可读性 */
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(16px) saturate(1.1);
        -webkit-backdrop-filter: blur(16px) saturate(1.1);
    }

    .auth-card h1 {
        font-size: 1.8rem;
        margin-bottom: 1.4rem;
    }

    .auth-card .form-group input,
    .auth-card .form-group select,
    .auth-card .form-group textarea {
        padding: 0.85rem 1rem;
        font-size: 1rem;
    }

    .auth-card .submit-btn {
        padding: 0.85rem 1rem;
        font-size: 1rem;
    }
}

/* 🌊 超小屏幕优化 */
@media (max-width: 380px) {
    .auth-card.auth-container {
        padding: 1.5rem 1.2rem;
    }

    .auth-card h1 {
        font-size: 1.6rem;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px;
    position: relative;
    z-index: 1;
}

/* ========== 🚀 模块选择页面 - 玻璃态海洋蓝绿主题 ========== */

/* 模块选择容器 */
.module-select-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

/* 模块页面头部 */
.module-header {
    text-align: center;
    margin-bottom: 3rem;
    animation: glassCardAppear 0.6s ease-out;
}

.module-title {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #e6fffa 40%, #81e6d9 80%, #4fd1c5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 20px rgba(79, 209, 197, 0.3));
    margin-bottom: 0.8rem;
}

.module-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
}

/* 用户信息区域 */
.module-user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-avatar {
    font-size: 1.2rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.user-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.dashboard-btn {
    padding: 0.4rem 1rem;
    background: rgba(100, 150, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 1rem;
    color: #ffffff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dashboard-btn:hover {
    background: rgba(100, 150, 255, 0.5);
    border-color: rgba(100, 150, 255, 0.6);
    color: #ffffff;
}

.logout-btn {
    padding: 0.4rem 1rem;
    background: rgba(255, 100, 100, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 1rem;
    color: #ffffff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.logout-btn:hover {
    background: rgba(255, 100, 100, 0.5);
    border-color: rgba(255, 100, 100, 0.6);
    color: #ffffff;
}

/* 模块网格布局 */
.module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    width: 100%;
    animation: glassCardAppear 0.8s ease-out 0.2s backwards;
}

/* 🔮 玻璃态模块卡片 */
.module-card {
    position: relative;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.5rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-align: center;
}

/* 卡片悬停发光效果 */
.module-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(79, 209, 197, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.module-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(79, 209, 197, 0.4);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(79, 209, 197, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.module-card:hover::before {
    opacity: 1;
}

.module-card:active {
    transform: translateY(-4px) scale(1);
}

/* 模块图标 */
.module-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
    transition: transform 0.4s ease;
}

.module-card:hover .module-icon {
    transform: scale(1.1);
}

/* 模块名称 */
.module-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

/* 模块描述 */
.module-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* 模块状态标签（开发中） */
.module-status {
    display: inline-block;
    margin-top: 0.8rem;
    padding: 0.25rem 0.8rem;
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 1rem;
    color: #ffc107;
    font-size: 0.75rem;
    font-weight: 600;
}

/* 模块箭头 */
.module-arrow {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    font-size: 1.5rem;
    color: rgba(79, 209, 197, 0.5);
    transition: all 0.3s ease;
}

.module-card:hover .module-arrow {
    color: #4fd1c5;
    transform: translateX(5px);
}

/* 模块页脚 */
.module-footer {
    margin-top: 3rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    animation: glassCardAppear 1s ease-out 0.4s backwards;
}

/* ========== 模块弹窗样式 ========== */
.module-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.module-modal-content {
    background: rgba(15, 35, 50, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(79, 209, 197, 0.3);
    border-radius: 1.5rem;
    max-width: 600px;
    width: 90%;
    overflow: hidden;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(79, 209, 197, 0.1);
    animation: slideInUp 0.4s ease-out;
}

.module-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(79, 209, 197, 0.2);
}

.module-modal-header h2 {
    font-size: 1.4rem;
    color: #81e6d9;
    font-weight: 700;
}

.module-modal-close {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
}

.module-modal-close:hover {
    color: #ff8a8a;
}

.module-modal-body {
    padding: 2rem;
}

/* 子模块网格 */
.sub-module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

/* 4列网格（2x2布局） */
.sub-module-grid-4 {
    grid-template-columns: repeat(2, 1fr);
}

.sub-module-card {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(79, 209, 197, 0.2);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.sub-module-card:hover {
    background: rgba(79, 209, 197, 0.15);
    border-color: rgba(79, 209, 197, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* 绿色卡片 - 门机可吊范围 */
.sub-module-card-green {
    border-color: rgba(76, 175, 80, 0.3);
    background: rgba(76, 175, 80, 0.08);
}

.sub-module-card-green:hover {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.6);
}

/* 蓝色卡片 - 坞操作计算器 */
.sub-module-card-blue {
    border-color: rgba(33, 150, 243, 0.3);
    background: rgba(33, 150, 243, 0.08);
}

.sub-module-card-blue:hover {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.6);
}

.sub-module-icon {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
}

.sub-module-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.sub-module-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* MES开发中弹窗 */
.mes-developing {
    text-align: center;
    padding: 3rem 2rem;
}

.mes-developing-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.mes-developing h2 {
    font-size: 1.8rem;
    color: #ffc107;
    margin-bottom: 1rem;
}

.mes-developing-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.mes-countdown {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
}

.mes-countdown span {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    background: rgba(79, 209, 197, 0.2);
    border: 1px solid rgba(79, 209, 197, 0.4);
    border-radius: 50%;
    color: #4fd1c5;
    font-weight: 700;
    margin: 0 0.3rem;
}

.mes-back-btn {
    padding: 0.8rem 2rem;
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
    border: none;
    border-radius: 0.8rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mes-back-btn:hover {
    background: linear-gradient(135deg, #4fd1c5 0%, #38b2ac 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(56, 178, 172, 0.4);
}

/* ========== 模块选择页面响应式 ========== */
@media (max-width: 900px) {
    .module-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    
    .module-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 600px) {
    .module-select-container {
        padding: 1.5rem 1rem;
    }
    
    .module-title {
        font-size: 1.8rem;
    }
    
    .module-subtitle {
        font-size: 0.95rem;
    }
    
    .module-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .module-card {
        padding: 1.5rem 1rem;
    }
    
    .module-icon {
        font-size: 2.5rem;
    }
    
    .module-name {
        font-size: 1.2rem;
    }
    
    .module-desc {
        font-size: 0.75rem;
    }
    
    .sub-module-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== END 模块选择页面 ========== */

/* 认证页面样式 */
.auth-container {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.2rem;
    border-radius: 1.1rem;
    background: #ffffff;
    box-shadow: 0 0.6rem 2.4rem rgba(0, 0, 0, 0.12), 0 0.16rem 0.6rem rgba(0, 0, 0, 0.08), inset 0 0.06rem 0 rgba(255, 255, 255, 0.9);
    border: 0.08rem solid rgba(102, 126, 234, 0.1);
    animation: slideInUp 0.5s ease-out;
    backdrop-filter: none;
}

/* 🔮 玻璃态登录卡片 - 海洋蓝绿主题 */
.auth-card.auth-container {
    width: 100%;
    margin: 0;
    padding: 2.2rem 2rem;
    border-radius: 1.5rem;
    /* 🎨 玻璃态背景：10%透明度 + 海洋色调 */
    background: rgba(255, 255, 255, 0.08);
    /* 🌊 毛玻璃模糊效果 */
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    /* 🔮 玻璃态边框：微妙的光泽感 */
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* 🌟 多层阴影：深度感 + 发光边缘 */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 60px rgba(0, 180, 180, 0.05);
    color: #e6f8ff;
    /* 🚀 入场动画 */
    animation: glassCardAppear 0.6s ease-out;
}

/* 🌊 玻璃卡片入场动画 */
@keyframes glassCardAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        backdrop-filter: blur(20px);
    }
}

/* 🌊 玻璃态标题 - 海洋蓝绿渐变 */
.auth-card h1 {
    text-align: center;
    margin-bottom: 1.8rem;
    font-size: 2.1rem;
    letter-spacing: -0.02em;
    /* 🎨 海洋蓝绿渐变文字 */
    background: linear-gradient(135deg, #4fd1c5 0%, #38b2ac 30%, #81e6d9 60%, #63b3ed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 🌟 文字发光效果 */
    filter: drop-shadow(0 0 8px rgba(79, 209, 197, 0.3));
}

/* 🔮 玻璃态标签切换器 */
.auth-card .auth-tabs {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.9rem;
    padding: 0.35rem;
    border: 1px solid rgba(79, 209, 197, 0.15);
    backdrop-filter: blur(10px);
}

.auth-card .auth-tab {
    border-radius: 0.6rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
}

.auth-card .auth-tab:hover:not(.active) {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(79, 209, 197, 0.08);
}

/* 🌊 激活状态 - 海洋蓝绿渐变 */
.auth-card .auth-tab.active {
    color: #0a1a20;
    background: linear-gradient(135deg, #4fd1c5 0%, #38b2ac 50%, #81e6d9 100%);
    box-shadow: 
        0 4px 15px rgba(79, 209, 197, 0.35),
        0 0 20px rgba(79, 209, 197, 0.15);
}

.auth-card .form-group {
    margin-bottom: 1rem;
}

/* 🌊 玻璃态表单标签 */
.auth-card .form-group label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* 🔮 玻璃态输入框 */
.auth-card .form-group input,
.auth-card .form-group select,
.auth-card .form-group textarea {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(79, 209, 197, 0.2);
    border-radius: 0.75rem;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #e6f8ff;
}

/* 🌊 输入框悬停效果 */
.auth-card .form-group input:hover,
.auth-card .form-group select:hover,
.auth-card .form-group textarea:hover {
    border-color: rgba(79, 209, 197, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

/* ✨ 输入框聚焦发光效果 */
.auth-card .form-group input:focus,
.auth-card .form-group select:focus,
.auth-card .form-group textarea:focus {
    border-color: rgba(79, 209, 197, 0.6);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 0 0 3px rgba(79, 209, 197, 0.15),
        0 0 20px rgba(79, 209, 197, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    outline: none;
}

/* 🌊 玻璃态输入框占位符 */
.auth-card .form-group input::placeholder,
.auth-card .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.auth-card .form-group select {
    cursor: pointer;
}

.auth-card .form-group select option {
    background: #1a2e3d;
    color: #e6f8ff;
}

/* 🔮 玻璃态自动填充样式 */
.auth-card .form-group input:-webkit-autofill,
.auth-card .form-group input:-webkit-autofill:hover,
.auth-card .form-group input:-webkit-autofill:focus,
.auth-card .form-group input:-webkit-autofill:active,
.auth-card .form-group select:-webkit-autofill,
.auth-card .form-group textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 35, 50, 0.95) inset !important;
    -webkit-text-fill-color: #e6f8ff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    transition: background-color 5000s ease-in-out 0s;
    border-color: rgba(79, 209, 197, 0.3) !important;
}

.auth-card .form-group input:not(:placeholder-shown),
.auth-card .form-group textarea:not(:placeholder-shown) {
    background: rgba(255, 255, 255, 0.08);
}

/* 🌊 玻璃态链接 */
.auth-card .auth-link {
    color: #81e6d9;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}

.auth-card .auth-link:hover {
    color: #4fd1c5;
    text-shadow: 0 0 10px rgba(79, 209, 197, 0.4);
}

/* 🌊 玻璃态提交按钮 - 海洋蓝绿渐变 */
.auth-card .submit-btn {
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 0.8rem;
    /* 🎨 海洋蓝绿渐变 */
    background: linear-gradient(135deg, #38b2ac 0%, #319795 50%, #2c7a7b 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    border: none;
    box-shadow: 
        0 4px 15px rgba(56, 178, 172, 0.35),
        0 0 25px rgba(56, 178, 172, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* ✨ 按钮光泽扫过效果 */
.auth-card .submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

/* 🌊 按钮悬停发光效果 */
.auth-card .submit-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #4fd1c5 0%, #38b2ac 50%, #319795 100%);
    box-shadow: 
        0 8px 25px rgba(56, 178, 172, 0.45),
        0 0 35px rgba(79, 209, 197, 0.25);
}

.auth-card .submit-btn:hover::before {
    left: 100%;
}

.auth-card .submit-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 2px 10px rgba(56, 178, 172, 0.3),
        0 0 15px rgba(56, 178, 172, 0.1);
}

/* 🔮 玻璃态次要按钮 */
.auth-card .btn-secondary {
    border-radius: 0.8rem;
    border: 1px solid rgba(79, 209, 197, 0.3);
    background: rgba(79, 209, 197, 0.08);
    color: #81e6d9;
    font-weight: 700;
    transition: all 0.3s ease;
}

.auth-card .btn-secondary:hover {
    border-color: rgba(79, 209, 197, 0.5);
    background: rgba(79, 209, 197, 0.15);
    box-shadow: 0 0 15px rgba(79, 209, 197, 0.15);
}

/* 🔮 记住登录复选框 */
.auth-card .remember-me label {
    color: rgba(255, 255, 255, 0.75);
}

.auth-card .remember-me input[type="checkbox"] {
    accent-color: #38b2ac;
}

.auth-card .email-warning {
    background: rgba(255, 243, 205, 0.96);
    border: 0.08rem solid #ffc107;
}

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

.auth-container h1 {
    text-align: center;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.auth-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.auth-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.auth-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: linear-gradient(to bottom, rgba(102, 126, 234, 0.1), transparent);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

/* 🚀 注册表单滚动条：限制最大高度，超出时显示垂直滚动条 */
.auth-card.auth-container {
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 🚀 短信验证区域 - 玻璃态统一风格 + 红色边框强调 */
.sms-verify-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(229, 62, 62, 0.5);
    border-radius: 0.75rem;
    padding: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sms-verify-title {
    color: #fc8181;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.sms-verify-input-row {
    display: flex;
    gap: 0.625rem;
    align-items: flex-end;
}

.sms-verify-input-wrapper {
    flex: 1;
}

.sms-verify-input {
    width: 100%;
    font-size: 1rem;
    letter-spacing: 0.125rem;
    text-align: center;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(229, 62, 62, 0.4);
    border-radius: 0.5rem;
    color: #e6f8ff;
    transition: all 0.3s ease;
}

.sms-verify-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.sms-verify-input:focus {
    outline: none;
    border-color: rgba(229, 62, 62, 0.8);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

.sms-send-btn {
    white-space: nowrap;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    width: auto;
}

.sms-verify-note {
    margin-top: 0.5rem;
    color: #fc8181;
    font-size: 0.8rem;
    font-weight: 600;
}

/* 表单样式 */
.form-group {
    margin-bottom: 4px; /* 原来12px，减少70%后约4px */
}

.form-group label {
    display: block;
    margin-bottom: 2px; /* 原来5px，减少70%后约2px */
    font-weight: 600;
    color: #495057;
}

.form-group label.required::after {
    content: " *";
    color: #dc3545;
}

/* 输入框样式优化 - 支持iOS/Edge浏览器 */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
    /* 🚀 移除backdrop-filter以提升性能 */
    backdrop-filter: none;
    /* 优化移动端输入体验 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 优化触摸体验 */
    min-height: 44px;
    touch-action: manipulation;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: rgba(102, 126, 234, 0.4);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

/* 修复iOS输入框样式 */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="number"] {
    /* 确保在iOS上显示正确的键盘类型 */
    border-radius: 8px;
}

/* 修复datetime-local输入框在移动端的显示 */
.form-group input[type="datetime-local"],
#endTime[type="datetime-local"],
#startTime[type="datetime-local"],
.custom-datetime input[type="datetime-local"],
.datetime-row input[type="datetime-local"] {
    /* 🚀 限制高度，只比文字高一点即可 */
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    /* 🚀 调整字体大小，确保日期时间文本能在一行显示 */
    font-size: 14px;
    /* 防止换行 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 🚀 文本居中显示 */
    text-align: center;
    /* 调整内边距，使文字垂直居中 */
    padding: 4px 12px;
    line-height: 20px;
    box-sizing: border-box;
}

/* 🚀 针对原生datetime控件的伪元素样式，确保文本居中 */
.form-group input[type="datetime-local"]::-webkit-datetime-edit,
#endTime[type="datetime-local"]::-webkit-datetime-edit,
#startTime[type="datetime-local"]::-webkit-datetime-edit,
.custom-datetime input[type="datetime-local"]::-webkit-datetime-edit,
.datetime-row input[type="datetime-local"]::-webkit-datetime-edit {
    text-align: center;
    width: 100%;
}

.form-group input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
#endTime[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
#startTime[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
.custom-datetime input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
.datetime-row input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 修复select下拉框样式 */
.form-group select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
}

/* 修复iOS上的select样式 */
.form-group select::-ms-expand {
    display: none;
}

/* 修复移动端输入框焦点状态 */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 4px 12px rgba(102, 126, 234, 0.2);
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

.form-group textarea {
    resize: vertical;
    min-height: 50px; /* 🚀 修改：默认高度50px */
    font-family: inherit;
}

/* 三栏布局 */
.three-column-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

/* 四栏布局 */
/* 🚀 新增：隐藏车辆申请中的车辆类型、车辆规格、数量字段 */
#vehicleApplicationSection .four-column-group > .form-group:nth-child(2),
#vehicleApplicationSection .four-column-group > .form-group:nth-child(3),
#vehicleApplicationSection .four-column-group > .form-group:nth-child(4) {
    display: none !important;
}

/* 🚀 新增：隐藏车辆申请中的单位字段 */
#vehicleApplicationSection .three-column-group > .form-group:nth-child(3) {
    display: none !important;
}

/* 🚀 新增：隐藏单位字段后，调整three-column-group布局为两列 */
#vehicleApplicationSection .three-column-group {
    grid-template-columns: 2fr 1fr !important; /* 运输内容占2份，数量占1份 */
}

/* 🚀 新增：隐藏字段后，调整four-column-group布局，只显示船舶/项目字段 */
#vehicleApplicationSection .four-column-group {
    grid-template-columns: 1fr !important; /* 只显示一列 */
}

.four-column-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 5px; /* 原来15px，减少70%后约5px */
    margin-bottom: 6px; /* 原来20px，减少70%后约6px */
}

/* 时间组 */
.time-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px; /* 原来15px，减少70%后约5px */
    margin-bottom: 5px; /* 原来15px，减少70%后约5px */
}

.custom-datetime {
    position: relative;
}

.datetime-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.datetime-row label {
    white-space: nowrap;
    min-width: fit-content;
}

.datetime-display {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

/* 时长滑块样式优化 */
.duration-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.duration-quick-buttons {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.duration-btn {
    display: block !important;
    padding: 8px 12px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    background: #ffffff;
    /* 🚀 移除backdrop-filter以提升性能 */
    backdrop-filter: none;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
    min-height: 36px;
    text-align: center;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.duration-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.duration-btn:active {
    transform: scale(0.95);
}

.duration-slider-container {
    margin-top: 15px;
    display: block !important;
    visibility: visible !important;
    width: 100%;
}

/* 时间快速按钮样式 */
.time-quick-buttons {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    justify-content: flex-start;
}

.time-btn {
    padding: 4px 6px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 4px;
    background: #ffffff;
    color: #333;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 28px;
    height: 24px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.time-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.time-btn:active {
    transform: scale(0.95);
}

.time-btn-reset {
    background-color: #6c757d;
    color: white;
}

.time-btn-reset:hover {
    background-color: #5a6268;
}

/* 滑块与显示值一体化样式 */
.slider-with-display {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    position: relative;
}

.slider-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.slider-value-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
    pointer-events: none;
    z-index: 2;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    transition: left 0.2s ease; /* 平滑过渡 */
}

/* 调整滑块样式以适应内嵌显示 */
.duration-slider {
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 24px; /* 增加高度以容纳显示文本 */
    border-radius: 12px;
    background: linear-gradient(90deg, #e9ecef 0%, rgba(102, 126, 234, 0.3) 100%);
    outline: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* 调整滑块拇指样式 */
.duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    z-index: 3;
}

.duration-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    z-index: 3;
}

/* 时长标题区域样式 */
.round-btn {
    padding: 4px 8px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 50%;
    background: #ffffff;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.round-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.round-btn:active {
    transform: scale(0.95);
}

/* 联系人组 */
.contact-group {
    display: flex;
    flex-direction: column;
    gap: 5px; /* 原来15px，减少70%后约5px */
}

/* 联系人信息容器 - 支持折叠 */
.contact-container {
    margin-top: 5px;
}

.contact-container.collapsed {
    display: none !important;
}

.contact-container.expanded {
    display: flex !important;
    animation: slideDown 0.3s ease;
}

/* 联系人信息标签 - 可点击折叠 */
.contact-label-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color 0.2s ease;
}

.contact-label-toggle:hover {
    color: #667eea;
}

.contact-toggle-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
    color: #6c757d;
    margin-left: 8px;
}

.contact-label-toggle.collapsed .contact-toggle-icon {
    transform: rotate(-90deg);
}

.contact-label-toggle.expanded .contact-toggle-icon {
    transform: rotate(0deg);
}

/* 姓名和电话同行 */
.name-phone-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.contact-name-field,
.contact-phone-field {
    display: flex;
    flex-direction: column;
}

/* 电话号码 textarea 样式 */
#contactPhone {
    width: 100%;
    padding: 10px;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 40px;
    box-sizing: border-box;
    transition: font-size 0.2s ease;
}

/* 电话号码多行时自动缩小字体 */
#contactPhone.multi-line {
    font-size: 14px;
}

#contactPhone:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* 记住我复选框样式优化 */
.remember-me {
    display: flex;
    align-items: center;
    margin-top: 0;
    white-space: nowrap;
    padding-top: 10px;
}

.remember-me input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 9px;
    height: 9px;
    border: 2px solid #ddd;
    border-radius: 3px;
    background: white;
    position: relative;
    cursor: pointer;
    margin-right: 8px;
}

.remember-me input[type="checkbox"]:checked {
    background: #3498db;
    border-color: #3498db;
}

.remember-me input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 7px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.remember-me label {
    margin: 0;
    font-weight: normal;
}

/* 自动清空功能样式 */
.auto-cleanup-section {
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.auto-cleanup-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
}

.auto-cleanup-label input[type="checkbox"] {
    width: 8px;
    height: 8px;
    margin: 0;
}

.auto-cleanup-info {
    margin-top: 5px;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

/* 安全要求 - 水平排列 */
.safety-requirements {
    display: flex;
    flex-direction: column;
    gap: 2px; /* 电脑端：最小行距 */
    margin-top: 5px;
    margin-bottom: 5px;
}

.safety-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3px;
}

.safety-item {
    display: flex;
    align-items: center;
}

/* 安全要求复选框样式优化 */
.safety-item input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 4.5px;
    height: 4.5px;
    border: 2px solid #ddd;
    border-radius: 2px;
    background: white;
    position: relative;
    cursor: pointer;
    margin-right: 8px;
}

.safety-item input[type="checkbox"]:checked {
    background: #3498db;
    border-color: #3498db;
}

.safety-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 4px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.safety-item label {
    margin: 0;
    font-weight: normal;
    font-size: 14px;
    white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .safety-requirements {
        grid-template-columns: repeat(2, 1fr);
        gap: 1px; /* 手机端：最小行距 */
    }

    /* 移动端时间按钮优化 */
    .datetime-row {
        flex-wrap: wrap;
        gap: 4px;
    }

    .time-quick-buttons {
        gap: 2px;
    }

    .time-btn {
        padding: 3px 4px;
        font-size: 10px;
        min-width: 24px;
        height: 20px;
    }

    .duration-header {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .duration-display {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .safety-requirements {
        grid-template-columns: 1fr;
    }
}

/* 表单说明 */
.form-note {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
    font-style: italic;
}

/* 🚀 新增：用户名提示特殊样式（红色加粗，非斜体） */
.form-note.username-hint {
    color: #dc3545;
    font-weight: bold;
    font-style: normal;
}

/* 🚀 新增：邮箱提示特殊样式（红色加粗，非斜体） */
.form-note.email-hint {
    color: #dc3545;
    font-weight: bold;
    font-style: normal;
}

/* 按钮组 */
.button-group {
    display: flex;
    gap: 7px; /* 原来10px，减少70%后约7px */
    margin-top: 5px; /* 原来15px，减少70%后约5px */
}

/* 修复iOS上的按钮样式 */
.submit-btn,
.reset-btn,
.secondary-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 44px; /* 触摸友好 */
    touch-action: manipulation;
}

.submit-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}

/* 🚀 新增：次要按钮样式（用于邮箱验证等场景） */
.btn-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    flex: 1;
    min-height: 44px;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-secondary:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.reset-btn {
    background-color: #6c757d;
    color: white;
}

.reset-btn:hover {
    background-color: #5a6268;
}

.secondary-btn {
    background: #ffffff;
    color: #495057;
    border: 1px solid rgba(102, 126, 234, 0.3);
    /* 🚀 移除backdrop-filter以提升性能 */
    backdrop-filter: none;
}

.secondary-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

/* 🚀 修改：申请页面头部 - 三列布局（左：申请ID，中：按钮居中，右：用户信息） */
.application-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -2px;
    padding: 2px 20px;
    background: #ffffff;
    border-radius: 16px;
    border-left: 4px solid #667eea;
    /* 精致的阴影 */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.04);
    animation: slideInDown 0.5s ease-out;
    /* 🚀 移除backdrop-filter以提升性能 */
    backdrop-filter: none;
    min-height: 10px;
    box-sizing: border-box;
    gap: 10px; /* 列之间的间距 */
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.application-id {
    font-size: 10px;
    font-weight: bold;
    color: #e74c3c;
    text-align: left;
    line-height: 1;
    flex-shrink: 0; /* 防止收缩 */
}

/* 新增：待生成ID的浅绿色样式 */
#applicationId.pending-id {
    color: #90EE90; /* 浅绿色 */
    font-size: 10px;
    line-height: 1;
}

.user-info {
    text-align: right;
    color: #6c757d;
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0; /* 防止收缩 */
}

.user-info .secondary-btn {
    padding: 0 8px;
    font-size: 10px;
    line-height: 1;
    height: 3px;
    margin-left: 5px;
}

/* 申请记录区域 */
.applications-section {
    margin-top: 40px;
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    /* 精致的阴影 */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(102, 126, 234, 0.08);
    animation: fadeIn 0.6s ease-out;
    /* 🚀 移除backdrop-filter以提升性能 */
    backdrop-filter: none;
}

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

.applications-section h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
    text-align: center;
}

/* 🚀 新增：申请记录管理工具栏 */
.applications-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.toolbar-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.auto-clear-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auto-clear-checkbox input {
    margin: 0;
}

.auto-clear-checkbox label {
    margin: 0;
    font-size: 14px;
    color: #495057;
}

.toolbar-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end; /* 按钮组靠右对齐 */
}

.clear-old-btn,
.keep-recent-btn,
.clear-today-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1; /* 按钮等宽 */
    min-width: 0; /* 允许flex收缩 */
}

.clear-today-btn {
    background-color: #ff6b6b;
    color: white;
}

.clear-today-btn:hover {
    background-color: #ff5252;
}
.clear-old-btn {
    background-color: #dc3545;
    color: white;
}

.clear-old-btn:hover {
    background-color: #c82333;
}

.keep-recent-btn {
    background-color: #28a745;
    color: white;
}

.keep-recent-btn:hover {
    background-color: #218838;
}

/* 申请记录表格样式 */
.applications-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    table-layout: auto; /* 使用自动布局，让列宽根据内容自适应 */
    font-size: 11px; /* 电脑端字体大小 */
}

.applications-table th,
.applications-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
    vertical-align: middle; /* 垂直居中 */
    font-weight: normal; /* 不使用粗体 */
}

.applications-table th {
    background-color: #f8f9fa;
    font-weight: normal; /* 表头也不使用粗体 */
    color: #495057;
    position: sticky;
    top: 0;
}

.applications-table tr:hover {
    background-color: #f8f9fa;
}

.applications-table .actions-cell {
    white-space: nowrap;
    text-align: right;
    padding: 8px 15px;
}

/* 🚀 新增：桌面端隐藏操作单元格中的优先级（手机端显示） */
.priority-in-actions.mobile-only {
    display: none;
}

/* 🚀 新增：桌面端操作单元格内容布局 */
.actions-cell-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.applications-table .actions-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center; /* 垂直居中对齐 */
    gap: 6px;
    flex-wrap: nowrap;
}

/* 🚀 修改：车辆申请表格文本处理 - 列宽自动分配 */
/* 运输路线 货物信息列：允许多行显示 */
/* 注意：此样式仅适用于车辆申请表格（在userVehicleApplicationsList容器中） */
#userVehicleApplicationsList .applications-table th:nth-child(3),
#userVehicleApplicationsList .applications-table td:nth-child(3) {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 🚀 修改：门机列样式 - 表头保持水平显示，数据单元格允许换行 */
/* 门机列是第2列（申请ID、门机、申请类型、排程时间、状态、需求描述） */
.applications-table th:nth-child(2) {
    white-space: nowrap !important; /* 表头：确保"门机"水平显示 */
}

.applications-table td:nth-child(2) {
    white-space: normal !important; /* 数据单元格：允许内容换行 */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 🚀 新增：门机申请表格门机列样式 - 确保表头水平显示 */
/* 注意：此样式仅适用于门机申请表格（在userApplicationsList容器中） */
#userApplicationsList .applications-table th:nth-child(2) {
    white-space: nowrap !important; /* 表头：确保"门机"水平显示 */
}

/* 门机申请表格：申请类型列允许换行 */
#userApplicationsList .applications-table th:nth-child(3),
#userApplicationsList .applications-table td:nth-child(3) {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 90px !important; /* 🚀 修复：设置最小宽度，避免文字竖排 */
}

/* 🚀 新增：门机申请表格需求描述列样式 - 支持自动换行 */
/* 需求描述列是第6列（申请ID、门机、申请类型、排程时间、状态、需求描述） */
#userApplicationsList .applications-table th:nth-child(6),
#userApplicationsList .applications-table td:nth-child(6) {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.6 !important;
    vertical-align: top !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-width: 100px !important; /* 🚀 修复：设置最小宽度，避免文字竖排 */
}

/* 🚀 新增：需求描述单元格样式 */
.requirement-description-cell {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.6 !important;
}

/* 🚀 新增：手机端需求描述单元格垂直居中 */
@media (max-width: 768px) {
    td.requirement-description-cell {
        vertical-align: middle !important;
    }
}

/* 🚀 新增：排程时间红色显示 */
.scheduled-time-red {
    color: #dc3545 !important;
    font-weight: 600;
}

/* 未排程样式 */
.unscheduled-time {
    color: #6c757d !important;
    font-style: italic;
    background-color: #e9ecef;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block; /* 内容区域使用inline-block */
    border: 1px dashed #adb5bd;
    vertical-align: middle; /* 在单元格内垂直居中 */
    line-height: normal; /* 重置行高 */
}

/* 响应式：小屏幕下隐藏优先级列 */
@media (max-width: 768px) {
    /* 🚀 新增：手机端隐藏优先级列 */
    .applications-table th.priority-column,
    .applications-table td.priority-column {
        display: none !important;
    }
    
    /* 🚀 新增：手机端显示操作单元格中的优先级 */
    .priority-in-actions.mobile-only {
        display: inline-block !important;
        margin-right: 8px;
        vertical-align: middle;
    }
    
    /* 🚀 新增：手机端操作单元格内容布局 - 优先级在左，操作按钮在右 */
    .actions-cell-content {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .actions-cell-content .priority-in-actions {
        flex-shrink: 0;
    }
    
    .actions-cell-content .actions-buttons {
        flex: 1;
        min-width: 0;
    }
    
    /* 🚀 新增：手机端操作列表头显示"优先级/操作" */
    .applications-table th.actions-header::before {
        content: '优先级/';
    }
    
    .applications-table {
        font-size: 10px; /* 手机端字体大小 */
    }
    
    .applications-table th,
    .applications-table td {
        padding: 8px 10px;
        vertical-align: middle !important; /* 确保手机端也垂直居中 */
        font-weight: normal !important; /* 不使用粗体 */
    }
    
    .applications-table .actions-buttons {
        flex-wrap: wrap;
        align-items: center; /* 垂直居中对齐 */
        gap: 4px;
    }
    
    .applications-table .table-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    /* 手机端：申请类型列文本处理 */
    #userApplicationsList .applications-table th:nth-child(3),
    #userApplicationsList .applications-table td:nth-child(3) {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: keep-all !important; /* 避免中文字符被强制换行 */
        min-width: 55px !important; /* 🚀 修复：设置最小宽度，避免文字竖排 */
    }
    
    /* 🚀 新增：手机端需求描述列样式 - 支持自动换行 */
    #userApplicationsList .applications-table th:nth-child(6),
    #userApplicationsList .applications-table td:nth-child(6) {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: keep-all !important; /* 避免中文字符被强制换行 */
        line-height: 1.6 !important;
        min-width: 75px !important; /* 🚀 修复：设置最小宽度，避免文字竖排 */
        vertical-align: middle !important; /* 🚀 新增：垂直居中显示 */
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        text-align: left !important; /* 确保左对齐 */
    }
    
    /* 🚀 新增：手机端需求描述单元格样式 - 确保文字水平显示 */
    #userApplicationsList .applications-table .requirement-description-cell,
    #userApplicationsList .applications-table td.requirement-description-cell {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: keep-all !important; /* 避免中文字符被强制换行 */
        line-height: 1.6 !important;
        writing-mode: horizontal-tb !important; /* 强制水平书写模式 */
        text-orientation: mixed !important; /* 确保文字方向正常 */
        direction: ltr !important; /* 确保从左到右的文本方向 */
        vertical-align: middle !important; /* 🚀 修复：垂直居中显示 */
    }
    
    /* 🚀 新增：手机端表格布局调整 - 允许需求描述列自适应宽度 */
    #userApplicationsList .applications-table {
        table-layout: auto !important; /* 允许表格自动调整列宽 */
    }
    
    /* 手机端：确保未排程单元格垂直居中 */
    .applications-table td.unscheduled-time {
        vertical-align: middle !important;
    }
}

/* 申请记录项 */
.application-record {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.application-record:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.record-id {
    font-weight: bold;
    color: #e74c3c;
    font-size: 16px;
}

.record-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-deepseek_scheduled {
    background-color: #fff3cd;
    color: #004085;
}

.status-scheduled {
    background-color: #d1ecf1;
    color: #0c5460;
}

.status-assigned {
    background-color: #d1ecf1;
    color: #0c5460;
}

.status-accepted {
    background-color: #cce5ff;
    color: #004085;
}

.status-in_progress {
    background-color: #cce5ff;
    color: #004085;
}

.status-completed {
    background-color: #d4edda;
    color: #155724;
}

.status-rejected {
    background-color: #f8d7da;
    color: #721c24;
}

.status-cancelled {
    background-color: #f5f5f5;
    color: #6c757d;
}

.record-details {
    margin-bottom: 15px;
}

.detail-row {
    display: flex;
    margin-bottom: 8px;
}

.detail-label {
    font-weight: 600;
    color: #495057;
    min-width: 100px;
    margin-right: 15px;
}

.detail-value {
    color: #6c757d;
    flex: 1;
}

.scheduled-time {
    color: #28a745 !important;
    font-weight: 600;
}

.record-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modify-btn,
.cancel-btn,
.delete-btn,
.reuse-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modify-btn {
    background-color: #3498db;
    color: white;
}

.modify-btn:hover {
    background-color: #2980b9;
}

.cancel-btn {
    background-color: #ffc107;
    color: #212529;
}

.cancel-btn:hover {
    background-color: #e0a800;
}

.delete-btn {
    background-color: #dc3545;
    color: white;
}

.delete-btn:hover {
    background-color: #c82333;
}

.reuse-btn {
    background-color: #28a745;
    color: white;
}

.reuse-btn:hover {
    background-color: #218838;
}

/* 无数据提示 */
.no-data {
    text-align: center;
    color: #6c757d;
    padding: 40px 20px;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

/* 吊数输入框样式优化 */
.lift-count-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lift-count-input {
    flex: 1;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 44px;
}

.lift-count-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.lift-count-buttons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.lift-count-btn {
    padding: 4px 8px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 4px;
    background: #ffffff;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.lift-count-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.lift-count-btn:active {
    transform: scale(0.95);
}

/* 需求描述文本区域样式优化 */
.auto-resize-textarea {
    min-height: 24px; /* 🚀 修改：1行文字高度 */
    max-height: 220px;
    resize: vertical !important; /* 🚀 修复：强制启用resize */
    overflow: auto !important; /* 🚀 修复：使用overflow而非overflow-y */
    width: 100%;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background-color: #fff;
    font-family: inherit;
    /* 🚀 移除：appearance: none 会影响resize手柄显示 */
    line-height: 1.5;
    /* 🚀 移除：固定height会阻止resize，使用min-height代替 */
}

/* 🚀 移除：清理冲突的样式规则 */

.auto-resize-textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* 🚀 新增：数量文本框宽度设置 */
#cargoQuantity {
    width: 3ch !important;
    min-width: 50px !important;
    max-width: 80px;
}

/* 🚀 修改：车辆申请表单所有输入框总高度设置为24px（包括padding） */
/* 排除特定字段，让它们使用通用样式（与#shipName一致） */
#vehicleApplicationSection .form-group input:not(#vehicleShipName),
#vehicleApplicationSection .form-group textarea:not(#startLocation):not(#destination):not(#cargoContent):not(#vehicleRemark),
#vehicleApplicationSection .form-group select {
    height: 24px !important;
    min-height: 24px !important;
    padding: 1px 12px !important; /* 上下各1px，左右保持12px */
    line-height: 22px !important; /* 确保文字垂直居中 */
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* 🚀 修改：车辆申请表单textarea自动调整高度 - 最小24px，最大220px */
/* 排除特定textarea，让它们使用44px高度 */
#vehicleApplicationSection .auto-resize-textarea:not(#startLocation):not(#destination):not(#cargoContent):not(#vehicleRemark) {
    min-height: 24px !important;
    max-height: 220px !important;
    height: 24px !important; /* 默认高度24px */
    padding: 1px 12px !important;
    line-height: 22px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* 🚀 修改：特定输入框使用与#shipName相同的通用样式（44px高度） */
#vehicleShipName {
    height: 44px !important; /* 与#shipName的min-height一致 */
    min-height: 44px !important;
    padding: 12px 15px !important; /* 与#shipName的padding一致 */
    line-height: normal !important; /* 使用默认行高 */
    font-size: 16px !important; /* 与#shipName的font-size一致 */
    box-sizing: border-box !important;
}

/* 🚀 新增：车辆申请专用textarea样式 - 解决resize冲突 */
.vehicle-textarea-resizable {
    display: block;
    width: 100%;
    min-height: 44px !important;
    max-height: none !important;
    /* 关键：绝对不能设置 height: auto !important，否则无法手动拖拽 */
    height: auto; 
    padding: 8px 15px !important; /* 🚀 修改：减小padding以匹配44px高度 (24px文字 + 16px padding + 4px border = 44px) */
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    resize: vertical !important; /* 强制启用垂直拖拽 */
    overflow: auto !important; /* 确保出现滚动条 */
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
}

.vehicle-textarea-resizable:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 🚀 新增：Flex行布局（用于运输内容与数量） */
.flex-row-group {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start; /* 顶部对齐，防止高度拉伸 */
}

.flex-row-group .flex-grow {
    flex: 1;
    min-width: 0; /* 允许缩小 */
}

.flex-row-group .flex-fixed {
    flex: 0 0 auto;
    width: auto;
}

.flex-row-group .form-group {
    margin-bottom: 0; /* 移除底部边距 */
}

/* 确保在grid布局中父容器不限制resize */
.two-column-group .form-group,
.three-column-group .form-group,
.flex-row-group .form-group {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}


/* 新增：修改 index.html 页面所有文本框、文本域、选择框的 placeholder 字体大小为 10px */

/* 所有 input 元素的 placeholder */
input::placeholder {
    font-size: 10px;
}

input::-webkit-input-placeholder {
    font-size: 10px;
}

input::-moz-placeholder {
    font-size: 10px;
    opacity: 1;
}

input:-ms-input-placeholder {
    font-size: 10px;
}

/* 所有 textarea 元素的 placeholder */
textarea::placeholder {
    font-size: 10px;
}

textarea::-webkit-input-placeholder {
    font-size: 10px;
}

textarea::-moz-placeholder {
    font-size: 10px;
    opacity: 1;
}

textarea:-ms-input-placeholder {
    font-size: 10px;
}

/* 选择框的第一个 option（作为提示文本）的字体大小 */
select option[value=""] {
    font-size: 10px;
}

/* 修复表格中的按钮样式 */
.table-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 2px;
    min-height: 28px; /* 触摸友好 */
    min-width: 50px; /* 统一最小宽度 */
    text-align: center; /* 文字居中 */
}

.table-btn-primary {
    background-color: #3498db;
    color: white;
}

.table-btn-warning {
    background-color: #ffc107;
    color: #212529;
}

.table-btn-success {
    background-color: #28a745;
    color: white;
}

.table-btn-danger {
    background-color: #dc3545;
    color: white;
}

.table-btn:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

/* 优化移动端输入框的字体大小 */
@media (max-width: 768px) {
    .container {
        padding: 4px !important; /* 原来8px，进一步减少 */
    }

    .auth-container {
        padding: 1.25rem !important;
    }

    .auth-container h1 {
        margin-bottom: 1rem !important;
        font-size: 1.6rem !important;
    }

    .form-group {
        margin-bottom: 1px !important; /* 原来2px，进一步减少到1px */
    }

    .form-group label {
        margin-bottom: 1px !important; /* 原来2px，进一步减少到1px */
        font-size: 14px !important; /* 稍微减小字体 */
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 15px !important; /* 原来16px，稍微减小 */
    }

    /* 🚀 移动端datetime-local输入框字体大小调整，确保单行显示 */
    .form-group input[type="datetime-local"],
    #endTime[type="datetime-local"],
    #startTime[type="datetime-local"],
    .custom-datetime input[type="datetime-local"],
    .datetime-row input[type="datetime-local"] {
        font-size: 12px !important; /* 更小的字体，确保"2025年11月30日03:14"能在一行显示 */
        /* 🚀 限制高度，只比文字高一点即可 */
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        /* 🚀 文本居中显示 */
        text-align: center !important;
        line-height: 18px !important; /* 与高度匹配 */
        padding: 4px 10px !important; /* 调整内边距 */
        box-sizing: border-box !important;
    }
    
    /* 🚀 针对移动端原生datetime控件的伪元素样式，确保文本居中 */
    .form-group input[type="datetime-local"]::-webkit-datetime-edit,
    #endTime[type="datetime-local"]::-webkit-datetime-edit,
    #startTime[type="datetime-local"]::-webkit-datetime-edit,
    .custom-datetime input[type="datetime-local"]::-webkit-datetime-edit,
    .datetime-row input[type="datetime-local"]::-webkit-datetime-edit {
        text-align: center !important;
        width: 100% !important;
    }
    
    .form-group input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
    #endTime[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
    #startTime[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
    .custom-datetime input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
    .datetime-row input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 修复iOS上的输入框内边距 */
    .form-group input[type="text"],
    .form-group input[type="password"],
    .form-group input[type="tel"],
    .form-group input[type="number"] {
        padding: 6px 8px !important; /* 原来10px 12px，进一步减少 */
    }

    /* 选择框进一步优化 */
    .form-group select {
        min-height: 36px !important; /* 从44px减少到36px */
        height: 36px !important;
        padding: 6px 8px !important; /* 相应减少padding */
        box-sizing: border-box !important;
    }

    /* 复选框设为30%高度，进一步缩小 */
    .form-group input[type="checkbox"] {
        transform: scale(0.3) !important; /* 从0.4改为0.3，进一步缩小 */
        transform-origin: center !important;
    }

    .form-title {
        margin-bottom: 8px !important; /* 原来15px，进一步减少 */
        font-size: 1.5rem !important; /* 原来1.8rem，进一步减少 */
    }

    /* 修复移动端表格操作按钮 */
    .table-btn {
        padding: 4px 8px !important; /* 原来6px 10px，进一步减少 */
        font-size: 10px !important; /* 原来11px，进一步减少 */
        min-height: 28px !important; /* 原来32px，进一步减少 */
        min-width: 48px !important; /* 移动端统一最小宽度 */
        margin: 1px !important;
    }

    .applications-table .actions-cell {
        white-space: nowrap;
        text-align: center;
        min-width: 100px !important; /* 原来120px，稍微减少 */
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 4px !important; /* 原来8px，进一步减少 */
    }

    .three-column-group {
        grid-template-columns: 1fr;
        gap: 2px !important; /* 原来6px，进一步减少 */
    }
    
    /* 🚀 新增：隐藏车辆类型、车辆规格、数量字段 */
    #vehicleApplicationSection .four-column-group > .form-group:nth-child(2),
    #vehicleApplicationSection .four-column-group > .form-group:nth-child(3),
    #vehicleApplicationSection .four-column-group > .form-group:nth-child(4) {
        display: none !important;
    }
    
    /* 车辆申请：数量和单位在手机端保持同一行 */
    #vehicleApplicationSection .three-column-group {
        grid-template-columns: 2fr 1fr 1fr !important;
    }
    
    /* 确保数量和单位在同一行 */
    #vehicleApplicationSection .three-column-group > .form-group:nth-child(2),
    #vehicleApplicationSection .three-column-group > .form-group:nth-child(3) {
        display: flex;
        flex-direction: column;
    }

    .four-column-group {
        /* 强制双列布局，船舶名称和使用门机并排，申请类型和吊数并排 */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1px !important; /* 原来2px，进一步减少到1px */
    }

    .time-group {
        /* 强制保持双列，开始和结束时间在同一行 */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1px !important; /* 原来2px，进一步减少到1px */
    }

    /* 🚀 移动端datetime-local输入框字体大小调整，确保单行显示 */
    .form-group input[type="datetime-local"],
    #endTime[type="datetime-local"],
    #startTime[type="datetime-local"],
    .datetime-row input[type="datetime-local"],
    .custom-datetime input[type="datetime-local"] {
        font-size: 12px !important; /* 更小的字体，确保"2025年11月30日03:14"能在一行显示 */
        /* 🚀 限制高度，只比文字高一点即可 */
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        /* 🚀 文本居中显示 */
        text-align: center !important;
        line-height: 18px !important; /* 与高度匹配 */
        padding: 4px 10px !important; /* 调整内边距 */
        box-sizing: border-box !important;
    }
    
    /* 🚀 针对移动端原生datetime控件的伪元素样式，确保文本居中 */
    .form-group input[type="datetime-local"]::-webkit-datetime-edit,
    #endTime[type="datetime-local"]::-webkit-datetime-edit,
    #startTime[type="datetime-local"]::-webkit-datetime-edit,
    .datetime-row input[type="datetime-local"]::-webkit-datetime-edit,
    .custom-datetime input[type="datetime-local"]::-webkit-datetime-edit {
        text-align: center !important;
        width: 100% !important;
    }
    
    .form-group input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
    #endTime[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
    #startTime[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
    .datetime-row input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
    .custom-datetime input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 确保表单组不换行，强制并排显示 */
    .form-group {
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }

    .contact-group {
        gap: 1px !important; /* 原来2px，进一步减少到1px */
    }

    /* 🚀 移动端联系人信息默认折叠 */
    #contactContainer.collapsed {
        display: none !important;
    }
    
    .contact-label-toggle {
        cursor: pointer !important;
    }
    
    .contact-label-toggle .contact-toggle-icon {
        transform: rotate(-90deg) !important; /* 默认折叠状态，图标向右 */
    }

    .name-phone-row {
        gap: 2px !important; /* 移动端姓名电话间距 */
    }

    .safety-requirements {
        /* 移动端保持2排布局 */
        gap: 1px !important;
    }

    .safety-row {
        gap: 2px !important;
    }

    /* 移动端安全要求字体缩小40% */
    .safety-item {
        font-size: 7px !important; /* 12px * 0.6 = 7.2px */
    }

    .safety-item label {
        font-size: 7px !important;
    }

    .button-group {
        flex-direction: column;
        margin-top: 2px !important; /* 原来3px，进一步减少到2px */
        gap: 2px !important; /* 原来4px，进一步减少到2px */
    }

    .record-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px !important; /* 原来10px，减少 */
    }

    .record-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .detail-row {
        flex-direction: column;
        gap: 2px !important; /* 原来5px，减少 */
    }

    .detail-label {
        min-width: auto;
        margin-right: 0;
    }

    .applications-table {
        font-size: 10px !important; /* 手机端字体大小 */
    }

    .applications-table th,
    .applications-table td {
        padding: 4px 6px !important; /* 原来8px 10px，减少 */
        font-weight: normal !important; /* 不使用粗体 */
    }
    
    .record-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .detail-row {
        flex-direction: column;
        gap: 5px;
    }
    
    .detail-label {
        min-width: auto;
        margin-right: 0;
    }
    
    .applications-table {
        font-size: 10px; /* 手机端字体大小 */
    }
    
    .applications-table th,
    .applications-table td {
        padding: 8px 10px;
        font-weight: normal; /* 不使用粗体 */
    }
    
    /* 🚀 修改：移动端申请头部布局 - 保持三列布局 */
    .application-header {
        /* 保持水平排列，三列布局 */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 5px; /* 移动端减少间距 */
        padding: 2px 10px; /* 移动端减少内边距 */
    }

    .application-id {
        text-align: left;
    }

    .user-info {
        text-align: right;
        /* 不设置width: 100%，保持原有宽度 */
    }
    
    /* 🚀 修改：移动端工具栏布局 */
    .applications-toolbar {
        flex-direction: column;
        gap: 15px;
    }
    
    .toolbar-controls {
        justify-content: space-between;
        width: 100%;
    }
    
    .toolbar-buttons {
        width: 100%;
        justify-content: flex-end; /* 手机端也靠右对齐 */
    }
    
    .clear-old-btn,
    .keep-recent-btn,
    .clear-today-btn {
        flex: 1; /* 手机端按钮等宽 */
        text-align: center;
    }
}

/* 优化移动端表单布局 */
@media (max-width: 480px) {
    .three-column-group,
    .four-column-group {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    /* 车辆申请：数量和单位在手机端保持同一行 */
    #vehicleApplicationSection .three-column-group {
        grid-template-columns: 2fr 1fr 1fr !important;
        gap: 5px !important;
    }
    
    .time-group {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .contact-group {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* 防止iOS缩放 */
        min-height: 44px;
    }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-container,
.application-record {
    animation: fadeIn 0.5s ease-out;
}

/* 加载状态 */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

.loading::after {
    content: " 加载中...";
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 优先级样式 */
.application-priority {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    min-width: 50px; /* 统一最小宽度 */
    text-align: center; /* 文字居中 */
}

.application-priority:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.priority-high {
    background-color: #dc3545;
    color: white;
}

.priority-normal {
    background-color: #28a745;
    color: white;
}

.priority-low {
    background-color: #6c757d;
    color: white;
}

.priority-postponable {
    background-color: #ffc107;
    color: #212529;
}

/* 联系人信息小字体 */
.contact-info-small {
    font-size: 8px;
    line-height: 1.2;
}

/* 运输路线显示 */
.transport-info {
    white-space: nowrap;
}

.transport-info .transport-arrow {
    margin: 0 5px;
    color: #28a745;
    font-weight: bold;
}

.transport-route {
    max-width: 200px;
    white-space: normal;
    word-break: break-all;
}

/* 司机信息 */
.driver-info {
    font-size: 13px;
    line-height: 1.4;
}

/* 未分配状态 */
.not-assigned {
    color: #999;
    font-style: italic;
    font-size: 12px;
}

/* 折叠图标 */
.collapse-icon {
    font-size: 12px;
    margin-left: 8px;
    color: #666;
    transition: transform 0.2s ease;
}

/* 司机与车辆管理折叠样式 */
#vehicleResourcesSection .section-header {
    cursor: pointer;
}

#vehicleResourcesSection .section-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

#vehicleResourcesSection.collapsed .section-content {
    display: none;
}

/* 车辆编号列 */
.vehicle-code {
    white-space: nowrap;
    font-family: monospace;
    font-size: 13px;
}

/* 🚀 起点→终点 和 运输内容 列文本处理 */
/* 位置：style.css 第 2280-2295 行 */
.col-route {
    word-break: break-all;
    white-space: normal;
}

.col-cargo {
    word-break: break-all;
    white-space: normal;
}

/* 🚀 申请时间/排程时间 列文本处理 */
/* 位置：style.css 第 2300-2310 行 */
.col-time {
    white-space: nowrap;
}

/* 🚀 司机列文本处理 */
/* 位置：style.css 第 2312-2320 行 */
.col-driver {
    white-space: normal;
}

/* 🚀 待分配任务表格列宽控制 */
/* 位置：style.css 第 2322-2400 行 */
/* 🚀 重要：这些样式只影响门机排班区域（#craneScheduleSection），不影响车辆排班区域（#vehicleScheduleSection） */

/* 待分配任务表格 - 自动布局，紧凑显示 - 仅针对门机排班 */
#craneScheduleSection .pending-table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* 减少单元格内边距，让列更紧凑 - 仅针对门机排班 */
#craneScheduleSection .pending-table th,
#craneScheduleSection .pending-table td {
    padding: 8px 4px !important;
}

/* 列宽由 vehicle_schedule.css 中的百分比定义控制，这里只保留文本处理属性 - 仅针对门机排班 */
#craneScheduleSection .pending-table .col-id {
    white-space: nowrap;
}

#craneScheduleSection .pending-table .col-time {
    white-space: nowrap;
}

#craneScheduleSection .pending-table .col-priority {
    text-align: center;
    white-space: nowrap;
    padding: 8px 2px !important;
}

#craneScheduleSection .pending-table .col-contact {
    white-space: nowrap;
    padding: 8px 3px !important;
}

#craneScheduleSection .pending-table .col-action {
    text-align: center;
    white-space: nowrap;
    padding: 8px 2px !important;
}

/* 自适应宽度列 - 超长自动折行 - 仅针对门机排班 */
#craneScheduleSection .pending-table .col-route,
#craneScheduleSection .pending-table .col-cargo {
    word-break: break-all;
    white-space: normal;
    padding: 8px 6px !important;
}

/* transport-info 和 transport-route 的文本处理 - 仅针对门机排班 */
#craneScheduleSection .pending-table .transport-info,
#craneScheduleSection .pending-table .transport-route {
    /* 宽度由 vehicle_schedule.css 控制 */
    display: block;
}

/* 🚀 快速时间按钮样式 */
/* 位置：style.css 第 2322-2370 行 */
.quick-time-buttons {
    margin-top: 8px;
}

.quick-time-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.quick-time-btn {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid #ddd;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 36px;
    text-align: center;
}

.quick-time-btn:hover {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.quick-time-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.quick-time-undo {
    background: linear-gradient(135deg, #fff3cd 0%, #ffc107 100%);
    border-color: #ffc107;
    color: #856404;
}

.quick-time-undo:hover {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #fff;
    border-color: #e0a800;
}

.contact-name {
    font-weight: 600;
    color: #495057;
}

.contact-phone {
    color: #6c757d;
}

/* 表单标题居中 */
.form-title {
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: -10px;
    margin-bottom: 25px;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    padding: 10px;
    position: relative;
}

.form-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    border-radius: 2px;
}

/* 申请类型和吊数组合 */
.application-type-group {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
}

/* 安全要求容器 */
.safety-container {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* 安全要求标签 - 可点击折叠 */
.safety-label-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color 0.2s ease;
}

.safety-label-toggle:hover {
    color: #667eea;
}

.safety-toggle-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
    color: #6c757d;
    margin-left: 8px;
}

.safety-container.collapsed {
    display: none;
}

.safety-container.expanded {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

.safety-label-toggle.collapsed .safety-toggle-icon {
    transform: rotate(-90deg);
}

.safety-label-toggle.expanded .safety-toggle-icon {
    transform: rotate(0deg);
}

/* 其他安全要求输入框 */
.other-safety-input {
    margin-top: 10px;
    width: 100%;
}

/* 表格中的状态标签 */
.table-status {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    min-width: 70px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.table-status:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* 取消申请模态框 */
.cancel-modal {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: 50px auto;
}

.cancel-modal h3 {
    margin-bottom: 15px;
    color: #dc3545;
}

.cancel-modal textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    resize: vertical;
    min-height: 80px;
}

.cancel-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* 🚀 新增：驳回详情模态框 */
.rejection-modal {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    margin: 10% auto;
}

.rejection-modal h3 {
    margin-bottom: 20px;
    color: #dc3545;
    text-align: center;
}

.rejection-details {
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #dc3545;
}

.rejection-reason {
    font-size: 16px;
    color: #495057;
    margin-bottom: 15px;
    line-height: 1.5;
}

.application-info {
    font-size: 14px;
    color: #6c757d;
}

.rejection-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* 🚀 新增：驳回弹窗删除按钮样式 */
.rejection-center-btn-danger {
    background-color: #dc3545;
    color: white;
}

.rejection-center-btn-danger:hover {
    background-color: #c82333;
}

/* 🚀 新增：驳回详情居中弹窗样式 */
.rejection-center-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
}

.rejection-center-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: slideInUp 0.3s ease-out;
}

.rejection-center-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e74c3c;
}

.rejection-center-title {
    color: #e74c3c;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
}

.rejection-center-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rejection-center-close:hover {
    color: #495057;
}

.rejection-center-body {
    margin-bottom: 15px;
}

.rejection-center-reason {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #e74c3c;
    margin-bottom: 20px;
}

.rejection-center-reason h4 {
    color: #e74c3c;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.rejection-center-reason p {
    color: #495057;
    line-height: 1.5;
    margin: 0;
}

.rejection-center-info {
    background: #e8f4fd;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.rejection-center-info h4 {
    color: #3498db;
    margin-bottom: 10px;
    font-size: 1rem;
}

.rejection-center-info .info-item {
    display: flex;
    margin-bottom: 5px;
    font-size: 14px;
}

.rejection-center-info .info-label {
    font-weight: 600;
    color: #495057;
    min-width: 80px;
    margin-right: 10px;
}

.rejection-center-info .info-value {
    color: #6c757d;
    flex: 1;
}

.rejection-center-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.rejection-center-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.rejection-center-btn-primary {
    background-color: #3498db;
    color: white;
}

.rejection-center-btn-primary:hover {
    background-color: #2980b9;
}

.rejection-center-btn-secondary {
    background-color: #6c757d;
    color: white;
}

.rejection-center-btn-secondary:hover {
    background-color: #5a6268;
}

/* 🚀 新增：驳回弹窗危险按钮样式 */
.rejection-center-btn-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

.rejection-center-btn-danger:hover {
    background-color: #c82333 !important;
}

.rejection-center-btn-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.rejection-center-btn-warning:hover {
    background-color: #e0a800 !important;
}

/* 动画效果 */
@keyframes slideInUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 🚀 新增：编辑模式通知样式 */
.edit-mode-notification {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(238, 90, 36, 0.3);
    margin-bottom: 20px;
    border: 2px solid #ff9f43;
    position: relative;
    animation: pulseEdit 2s infinite;
}

.edit-mode-content {
    padding: 20px;
    position: relative;
}

.edit-mode-content h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-mode-content p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.4;
}

.edit-mode-content strong {
    color: #ffeaa7;
}

/* 🚀 新增：iOS横屏适配 */
@media screen and (orientation: landscape) and (max-width: 1024px) {
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    
    .container {
        padding: 15px;
        max-width: 100%;
    }
    
    .four-column-group {
        /* 强制双列布局，船舶名称和使用门机并排，申请类型和吊数并排 */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px !important; /* 原来8px，减少70%后约2px */
    }

    .time-group {
        /* 强制保持双列，开始和结束时间在同一行 */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px !important; /* 原来6px，减少70%后约2px */
    }

    /* 确保表单组不换行，强制并排显示 */
    .form-group {
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }
    
    .duration-quick-buttons {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .duration-btn {
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* iOS Safari Edge浏览器横屏优化 */
@supports (-webkit-touch-callout: none) {
    @media screen and (orientation: landscape) {
        body {
            -webkit-overflow-scrolling: touch;
        }
        
        input, select, textarea, button {
            font-size: 16px; /* 防止iOS自动缩放 */
        }
    }
}

.edit-mode-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.edit-mode-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

@keyframes pulseEdit {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(238, 90, 36, 0.3);
    }
    50% {
        box-shadow: 0 8px 30px rgba(238, 90, 36, 0.5);
    }
}

/* 通用模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease-out;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px 12px 0 0;
}

.modal-header h2 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-header .close {
    color: #999;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-header .close:hover {
    color: #666;
}

.modal-body {
    padding: 25px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 🚀 新增：手机端滑动指示 */
.swipe-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: none; /* 默认隐藏 */
    pointer-events: none;
    animation: swipePulse 2s ease-in-out infinite;
}

.swipe-indicator.show {
    display: block;
}

.swipe-indicator-content {
    background: rgba(102, 126, 234, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.swipe-arrow {
    font-size: 20px;
    font-weight: bold;
    animation: swipeArrow 1.5s ease-in-out infinite;
}

.swipe-text {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

@keyframes swipePulse {
    0%, 100% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes swipeArrow {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8px);
    }
}

/* 桌面端隐藏滑动指示 */
@media (min-width: 769px) {
    .swipe-indicator {
        display: none !important;
    }
}

/* ========== index.html 语音输入相关样式 ========== */
.voice-input-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
    padding: 4.5px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    color: white;
}

.voice-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}

.voice-btn {
    display: flex;
    align-items: center;
    gap: 2.4px;
    padding: 3.6px 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.voice-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.voice-btn:active {
    transform: translateY(0);
}

.voice-btn.listening {
    background: rgba(255, 0, 0, 0.3);
    border-color: rgba(255, 0, 0, 0.5);
    animation: voicePulse 1.5s infinite;
}

.voice-status {
    font-size: 10px;
    font-weight: 500;
    padding: 2.4px 4.8px;
    border-radius: 6px;
    animation: voicePulse 2s infinite;
    line-height: 1.2;
}

.voice-status.warning {
    color: #ffcc00;
}

.voice-status.error {
    color: #ff6b6b;
}

.voice-status.success {
    color: #51cf66;
}

.voice-status.listening {
    color: #ff6b6b;
    font-weight: bold;
}

.voice-status.status-listening {
    background: rgba(255, 255, 255, 0.9);
    color: #e74c3c;
}

.voice-status.status-processing {
    background: rgba(255, 255, 255, 0.9);
    color: #f39c12;
}

.voice-status.status-success {
    background: rgba(255, 255, 255, 0.9);
    color: #27ae60;
}

.voice-status.status-error {
    background: rgba(255, 255, 255, 0.9);
    color: #e74c3c;
}

/* 统一的pulse动画（用于语音功能） */
@keyframes voicePulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* 语音提示区域样式 */
.voice-prompt-section {
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.voice-prompt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.voice-prompt-icon {
    font-size: 24px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

.voice-prompt-title {
    font-size: 18px;
    font-weight: 600;
    color: #495057;
}

.voice-prompt-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.voice-prompt-text {
    font-size: 16px;
    line-height: 1.6;
    color: #212529;
    background: white;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.voice-prompt-text.highlighted {
    background: #e3f2fd;
    border-left-color: #2196f3;
    transform: scale(1.02);
}

.voice-prompt-progress {
    display: flex;
    align-items: center;
    gap: 15px;
}

.voice-prompt-progress-bar {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.voice-prompt-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.voice-prompt-progress .progress-text {
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    min-width: 40px;
    text-align: center;
}

.voice-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.voice-help-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.voice-tip-text {
    color: white;
    font-size: 10px;
    font-weight: 500;
    margin-left: 3px;
    opacity: 0.9;
    white-space: nowrap;
    line-height: 1.2;
}

/* ========== 排程数据查看版块样式 ========== */
.schedule-view-section {
    margin-bottom: 20px;
}

.schedule-view-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.schedule-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.schedule-view-btn:active {
    transform: translateY(0);
}

/* 三个按钮并排显示样式 */
.three-buttons-row {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    width: 100%;
    justify-content: space-between;
}

.three-buttons-row button {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 0;
}

/* 重置按钮 - 灰色系 */
.btn-reset {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.btn-reset:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.btn-reset:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3);
}

/* 排班表按钮 - 紫色系 */
.btn-schedule {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-schedule:hover {
    background: linear-gradient(135deg, #5568d3 0%, #65438f 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-schedule:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

/* 提交按钮 - 绿色系 */
.btn-submit {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.btn-submit:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

/* 响应式设计 - 手机端也并排显示 */
@media (max-width: 768px) {
    .three-buttons-row {
        gap: 8px;
    }
    
    .three-buttons-row button {
        padding: 12px 10px;
        font-size: 14px;
    }
}

/* 排程数据查看模态框样式 */
.schedule-view-modal {
    z-index: 10000;
}

.schedule-modal-content {
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}

.schedule-modal-header {
    padding-top: 20px;
    padding-bottom: 0px;
    padding-left: 25px;
    padding-right: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: 1px solid rgba(0, 0, 0, 1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.schedule-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.schedule-icon {
    font-size: 24px;
}

.readonly-badge {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
}

.schedule-modal-header .close {
    color: white;
    font-size: 16px;
    font-weight: 300;
    opacity: 0.9;
    transition: opacity 0.2s;
    height: 30px;
    margin-right: 0px;
}

.schedule-modal-header .close:hover {
    opacity: 1;
}

.schedule-modal-body {
    flex: 1;
    overflow-y: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 4px;
    background: #f8f9fa;
}

.schedule-data-container {
    min-height: 200px;
}

.schedule-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.schedule-loading .loading-spinner {
    margin: 0 auto 15px;
}

/* PC端表格样式 */
.schedule-table-desktop {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.schedule-table-desktop thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.schedule-table-desktop th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.schedule-table-desktop td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 14px;
    color: #333;
}

.schedule-table-desktop tbody tr {
    transition: background 0.2s;
}

.schedule-table-desktop tbody tr:hover {
    background: #f8f9fa;
}

.schedule-table-desktop tbody tr:last-child td {
    border-bottom: none;
}

/* 表格中的状态样式 */
.schedule-table-desktop .schedule-card-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

/* 手机端卡片样式 */
.schedule-cards-mobile {
    display: none;
}

.schedule-card {
    background: white;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid #667eea;
}

.schedule-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.schedule-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.schedule-card-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.schedule-card-status.pending {
    background: #fff3cd;
    color: #856404;
}

.schedule-card-status.deepseek_scheduled,
.schedule-table-desktop .schedule-card-status.deepseek_scheduled {
    background: #fff3cd !important;
    color: #004085 !important;
    font-weight: bold !important;
}

/* 确保AI排程样式优先级最高 */
span.schedule-card-status.deepseek_scheduled {
    background: #fff3cd !important;
    color: #004085 !important;
    font-weight: bold !important;
}

.schedule-card-status.scheduled {
    background: #d1ecf1;
    color: #0c5460;
}

.schedule-card-status.in_progress {
    background: #d4edda;
    color: #155724;
}

.schedule-card-status.completed {
    background: #d1ecf1;
    color: #0c5460;
}

.schedule-card-status.cancelled {
    background: #f8d7da;
    color: #721c24;
}

.schedule-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.schedule-card-item {
    display: flex;
    flex-direction: column;
}

.schedule-card-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.schedule-card-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.schedule-card-item.full-width {
    grid-column: 1 / -1;
}

.schedule-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.schedule-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.schedule-empty-text {
    font-size: 16px;
}

.schedule-modal-actions {
    padding: 15px 25px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 页眉和页脚联系人样式 */
.schedule-contacts-header,
.schedule-contacts-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    margin-top: 8px;
}

.schedule-contacts-footer {
    margin-top: 0;
}

.schedule-contacts-header .contact-item,
.schedule-contacts-footer .contact-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    white-space: nowrap;
}

.schedule-contacts-footer .contact-item {
    background: rgba(0, 0, 0, 0.05);
}

.schedule-contacts-header .contact-item .crane-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.schedule-contacts-footer .contact-item .crane-label {
    color: #333;
}

.schedule-contacts-header .contact-item .contact-info {
    color: rgba(255, 255, 255, 0.85);
}

.schedule-contacts-footer .contact-item .contact-info {
    color: #666;
}

.schedule-contacts-header .contact-item .contact-separator,
.schedule-contacts-footer .contact-item .contact-separator {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 2px;
}

.schedule-contacts-footer .contact-item .contact-separator {
    color: #999;
}

.schedule-close-btn {
    padding: 4px 4px;
    font-size: 16px;
    border-radius: 6px;
}

/* 排程模态框响应式设计 */
@media (max-width: 768px) {
    .schedule-modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100vh;
    }
    
    .schedule-modal-header {
        padding: 15px 20px;
    }
    
    .schedule-modal-header h2 {
        font-size: 18px;
    }
    
    .schedule-icon {
        font-size: 20px;
    }
    
    .readonly-badge {
        font-size: 11px;
        padding: 3px 8px;
    }
    
    .schedule-contacts-header,
    .schedule-contacts-footer {
        font-size: 11px;
        gap: 6px;
    }
    
    .schedule-contacts-header .contact-item,
    .schedule-contacts-footer .contact-item {
        padding: 3px 6px;
    }
    
    .schedule-modal-body {
        padding: 15px;
    }
    
    .schedule-table-desktop {
        display: none;
    }
    
    .schedule-cards-mobile {
        display: block;
    }
    
    .schedule-card-body {
        grid-template-columns: 1fr;
    }
    
    .schedule-card-item.full-width {
        grid-column: 1;
    }
}

@media (min-width: 769px) {
    .schedule-cards-mobile {
        display: none;
    }
    
    .schedule-table-desktop {
        display: table;
    }
    
    /* 🚀 PC端也隐藏分组显示 */
    .schedule-groups-mobile {
        display: none;
    }
}

/* ========== 🚀 日期导航样式 ========== */
.schedule-title-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    vertical-align: bottom;
    text-align: left;
}

.schedule-date-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.date-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-nav-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.date-nav-btn:active {
    transform: scale(0.95);
}

.date-display {
    font-size: 10px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1px;
    padding-right: 1px;
    height: 30px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    transition: background 0.2s;
}

.date-display:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* 🚀 展开/折叠切换按钮（日期导航右侧） */
.toggle-all-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0;
}

.toggle-all-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.toggle-all-btn:active {
    transform: scale(0.95);
}

/* ========== 🚀 分组折叠式排班表样式 ========== */
.schedule-groups-mobile {
    display: block;
}

.schedule-groups-actions {
    display: none; /* 已移至日期导航右侧 */
}

.btn-expand-all,
.btn-collapse-all {
    display: none; /* 已合并为单个按钮 */
    padding: 8px 16px;
    font-size: 13px;
    border: 1px solid #667eea;
    background: white;
    color: #667eea;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-expand-all:hover,
.btn-collapse-all:hover {
    background: #667eea;
    color: white;
}

/* 门机分组样式 */
.crane-group {
    background: white;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.crane-group-header {
    padding: 14px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    user-select: none;
    transition: filter 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}

.crane-group-header:hover {
    filter: brightness(1.05);
}

.crane-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 🚀 班长电话区域（显示在标题栏右边，白色文字，换行显示） */
.leader-phone-area {
    display: inline-block;
    margin-left: auto;
    font-size: clamp(11px, 2.5vw, 14px);
    font-weight: 600;
    color: #ffffff;
    text-align: right;
    vertical-align: middle;
}

.leader-phone-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leader-line {
    white-space: nowrap;
}

.leader-phone-area a {
    color: #ffffff;
    text-decoration: none;
}

.leader-phone-area a:active {
    opacity: 0.7;
}

/* 🚀 门机标题行右侧起重指挥电话容器 */
.crane-header-phones {
    margin-left: auto;
    flex-shrink: 1;
    min-width: 0;
    text-align: right;
}

/* 🚀 门机标题行右侧起重指挥电话区域（白班1/白班2/夜班1/夜班2）字体缩小30% */
.header-phone-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    font-size: clamp(7px, 1.75vw, 8.4px);
}

/* 每行电话（白班1+夜班1 或 白班2+夜班2） */
.header-phone-row {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* 班次项（白班1:电话）- 黄色文字 */
.header-shift-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #f1c40f;
}

.header-shift-item a {
    color: #f1c40f;
    text-decoration: none;
    font-weight: 500;
}

.header-shift-item a:active {
    opacity: 0.7;
}

.header-shift-label {
    color: #f1c40f;
    font-size: inherit;
    font-weight: 500;
    white-space: nowrap;
}

.header-phone-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: inherit;
    white-space: nowrap;
}

.header-phone-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: inherit;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.header-phone-btn:active {
    transform: scale(0.95);
}

.header-phone-btn.short {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #333;
}

.header-phone-btn.long {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

/* 响应式：窄屏时进一步缩小 */
@media (max-width: 380px) {
    .header-phone-area {
        font-size: 9px;
    }
    .header-phone-btn {
        padding: 2px 4px;
        border-radius: 8px;
    }
    .crane-group-header {
        padding: 12px 10px;
    }
}

.crane-toggle-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.crane-number {
    font-weight: 600;
    font-size: 16px;
}

.crane-task-count {
    font-size: 13px;
    opacity: 0.85;
}

.crane-group-content {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.crane-group.collapsed .crane-group-content {
    max-height: 0;
}

/* 门机任务项样式 */
.crane-task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    transition: background 0.2s;
}

.crane-task-item:last-child {
    border-bottom: none;
}

.crane-task-item:hover {
    background: #f8f9ff;
}

.crane-task-item .task-time {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    color: #667eea;
    font-weight: 600;
    font-size: 12px;
    min-width: 90px;
    flex-shrink: 0;
}

.crane-task-item .task-ship {
    flex: 1;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crane-task-item .task-type {
    color: #666;
    font-size: 12px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crane-task-item .task-status-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* 状态颜色 */
.crane-task-item.status-pending {
    border-left: 3px solid #ffc107;
}

.crane-task-item.status-scheduled,
.crane-task-item.status-deepseek_scheduled {
    border-left: 3px solid #17a2b8;
}

.crane-task-item.status-in_progress {
    border-left: 3px solid #28a745;
}

.crane-task-item.status-completed {
    border-left: 3px solid #6c757d;
    opacity: 0.7;
}

.crane-task-item.status-cancelled {
    border-left: 3px solid #dc3545;
    opacity: 0.5;
    text-decoration: line-through;
}

/* 🚀 任务项可点击样式 */
.crane-task-item {
    cursor: pointer;
    position: relative;
}

.crane-task-item:active {
    background: #e8ecff;
}

.crane-task-item.expanded {
    background: #f0f4ff;
    border-bottom: none;
}

/* 🚀 门机任务详情行（点击展开） */
.crane-task-detail {
    display: none;
    padding: 10px 16px 10px 26px;
    background: #f8faff;
    border-bottom: 1px solid #e8ecef;
    font-size: 13px;
    line-height: 1.8;
    animation: slideDown 0.2s ease;
}

.crane-task-detail.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 🚀 紧凑一行电话显示样式 */
.phone-compact-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.phone-compact-row:last-child {
    border-bottom: none;
}

.phone-label-inline {
    font-weight: 600;
    color: #555;
    font-size: 13px;
    white-space: nowrap;
}

/* 紧凑拨打按钮 */
.phone-btn-inline {
    display: inline-flex;
    align-items: center;
    color: white;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.phone-btn-inline:active {
    transform: scale(0.96);
}

/* 短号按钮 - 橙色 */
.phone-btn-inline.short {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #333;
}

.phone-btn-inline.short:hover {
    box-shadow: 0 3px 8px rgba(247, 151, 30, 0.4);
}

/* 长号按钮 - 绿色 */
.phone-btn-inline.long {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.phone-btn-inline.long:hover {
    box-shadow: 0 3px 8px rgba(17, 153, 142, 0.4);
}

/* 车辆版本 */
.phone-compact-row.vehicle .phone-label-inline {
    color: #17a2b8;
}

/* 保留旧样式供兼容 */
.phone-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 4px 0;
    border-bottom: 1px dashed #e0e4f0;
}

.phone-label {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.phone-display {
    color: #333;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.phone-dial-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-left: 10px;
}

.phone-dial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.phone-dial-btn:active {
    transform: scale(0.96);
}

.phone-dial-btn.short {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #333;
}

.phone-dial-btn.short:hover {
    box-shadow: 0 4px 12px rgba(247, 151, 30, 0.4);
}

.phone-dial-btn.long {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.phone-dial-btn.long:hover {
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.phone-dial-btn.single {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 100%;
    max-width: 250px;
}

.phone-dial-btn.single:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.phone-dial-btn.vehicle-single {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
}

.phone-dial-btn.vehicle-single:hover {
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.4);
}

/* 🚀 迷你版拨号按钮容器（用于详情行） */
.phone-dial-options.mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    padding-left: 0;
}

/* 🚀 迷你版拨号按钮（用于详情行） */
.phone-dial-btn.mini {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 旧的电话链接样式（保留兼容） */
.task-phone-link {
    display: inline-block;
    color: #667eea;
    text-decoration: none;
    padding: 4px 10px;
    background: white;
    border-radius: 16px;
    border: 1px solid #e0e4f0;
    margin: 2px 0;
    transition: all 0.2s;
}

.task-phone-link:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.task-phone-link:active {
    transform: scale(0.98);
}

.no-phone {
    color: #999;
    font-style: italic;
}

/* ========== 🚀 车辆排班表样式 ========== */
.vehicle-schedule-header {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
}

.vehicle-schedule-groups {
    display: block;
}

/* 车间分组样式 */
.department-group {
    background: white;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.dept-group-header {
    padding: 14px 16px;
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
    color: white;
    cursor: pointer;
    user-select: none;
    transition: filter 0.2s;
}

.dept-group-header:hover {
    filter: brightness(1.05);
}

.dept-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dept-toggle-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.dept-name {
    font-weight: 600;
    font-size: 16px;
}

.dept-task-count {
    font-size: 13px;
    opacity: 0.85;
}

.dept-group-content {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.department-group.collapsed .dept-group-content {
    max-height: 0;
}

/* 车辆任务项样式 */
.vehicle-task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    transition: background 0.2s;
}

.vehicle-task-item:last-child {
    border-bottom: none;
}

.vehicle-task-item:hover {
    background: #f0fff8;
}

.vehicle-task-item .task-time {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    color: #20c997;
    font-weight: 600;
    font-size: 12px;
    min-width: 80px;
    flex-shrink: 0;
}

.vehicle-task-item .task-ship {
    flex: 1;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-task-item .task-vehicle {
    color: #17a2b8;
    font-size: 12px;
    font-weight: 500;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-task-item .task-driver {
    color: #666;
    font-size: 12px;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-task-item .task-status-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* 申请人姓名样式 */
.vehicle-task-item .task-contact {
    color: #333;
    font-size: 12px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 申请人姓名可点击样式 */
.vehicle-task-item .task-contact.clickable {
    color: #667eea;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}

.vehicle-task-item .task-contact.clickable:hover {
    color: #5a67d8;
}

.vehicle-task-item .task-contact.clickable:active {
    color: #4c51bf;
}

/* 司机信息行样式（详情行内） */
.driver-info-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.driver-name-label {
    color: #333;
    font-size: 13px;
    font-weight: 500;
}

/* 车辆状态颜色 */
.vehicle-task-item.status-pending {
    border-left: 3px solid #ffc107;
}

.vehicle-task-item.status-scheduled,
.vehicle-task-item.status-assigned {
    border-left: 3px solid #17a2b8;
}

.vehicle-task-item.status-in_progress {
    border-left: 3px solid #28a745;
}

.vehicle-task-item.status-completed {
    border-left: 3px solid #6c757d;
    opacity: 0.7;
}

.vehicle-task-item.status-cancelled {
    border-left: 3px solid #dc3545;
    opacity: 0.5;
    text-decoration: line-through;
}

/* 🚀 车辆任务项可点击样式 */
.vehicle-task-item {
    cursor: pointer;
    position: relative;
}

.vehicle-task-item:active {
    background: #e0fff5;
}

.vehicle-task-item.expanded {
    background: #e8fff8;
    border-bottom: none;
}

/* 🚀 车辆任务详情行（点击展开） */
.vehicle-task-detail {
    display: none;
    padding: 10px 16px 10px 26px;
    background: #f0fff8;
    border-bottom: 1px solid #d0f0e8;
    font-size: 13px;
    line-height: 1.8;
    animation: slideDown 0.2s ease;
}

.vehicle-task-detail.show {
    display: block;
}

/* 司机电话链接特殊样式 */
.driver-phone {
    display: block;
    color: #20c997;
    border-color: #b8e8d8;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.driver-phone:hover {
    background: #20c997;
    color: white;
    border-color: #20c997;
}

.call-hint {
    font-size: 12px;
    font-weight: normal;
    color: #888;
    margin-left: 8px;
}

.driver-phone:hover .call-hint {
    color: rgba(255,255,255,0.8);
}

/* 🚀 手机端分组显示优先 */
@media (max-width: 768px) {
    .schedule-groups-mobile {
        display: block;
    }
    
    .schedule-table-desktop {
        display: none;
    }
    
    .schedule-cards-mobile {
        display: none;
    }
    
    .crane-task-item .task-time {
        min-width: 75px;
        font-size: 11px;
    }
    
    .crane-task-item .task-type {
        max-width: 60px;
        font-size: 11px;
    }
    
    .vehicle-task-item .task-time {
        min-width: 70px;
        font-size: 11px;
    }
    
    .vehicle-task-item .task-vehicle {
        max-width: 50px;
        font-size: 11px;
    }
    
    .vehicle-task-item .task-driver {
        max-width: 40px;
        font-size: 11px;
    }
    
    .date-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .date-display {
        font-size: 13px;
        padding: 5px 12px;
    }
    
    .schedule-date-nav {
        gap: 8px;
    }
}

/* ========== Toast 提示系统 ========== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease-out;
    max-width: 400px;
    min-width: 280px;
}

.toast.hiding {
    animation: toastSlideOut 0.3s ease-in forwards;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.toast-message {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.toast-close:hover {
    color: #333;
}

/* Toast 类型样式 */
.toast.success {
    border-left: 4px solid #28a745;
}

.toast.success .toast-icon {
    color: #28a745;
}

.toast.error {
    border-left: 4px solid #dc3545;
}

.toast.error .toast-icon {
    color: #dc3545;
}

.toast.warning {
    border-left: 4px solid #ffc107;
}

.toast.warning .toast-icon {
    color: #ffc107;
}

.toast.info {
    border-left: 4px solid #17a2b8;
}

.toast.info .toast-icon {
    color: #17a2b8;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* 移动端Toast适配 */
@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 20px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        max-width: none;
        min-width: auto;
    }
}

/* ========== 申请列表加载状态 ========== */
.applications-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #666;
}

.applications-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e9ecef;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.applications-loading-text {
    font-size: 14px;
    color: #666;
}

/* ========== 网络状态提示 ========== */
.network-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    z-index: 99998;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.network-status-bar.show {
    transform: translateY(0);
}

.network-status-bar.offline {
    background: #dc3545;
    color: white;
}

.network-status-bar.online {
    background: #28a745;
    color: white;
}

/* ========== 表单字数限制提示 ========== */
.char-counter {
    font-size: 11px;
    color: #999;
    text-align: right;
    margin-top: 4px;
}

.char-counter.warning {
    color: #ffc107;
}

.char-counter.error {
    color: #dc3545;
}

/* 🚀 隐藏船舶名称和需求描述的字数限制提示 */
#shipName + .char-counter,
#requirementDescription + .char-counter {
    display: none !important;
}

/* ========== 语音波形可视化 ========== */
.voice-waveform-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 24px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-left: 8px;
}

.voice-waveform-bar {
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    transition: height 0.1s ease;
}

.voice-waveform-container.active .voice-waveform-bar {
    animation: waveformPulse 0.5s ease-in-out infinite;
}

.voice-waveform-container.active .voice-waveform-bar:nth-child(1) { animation-delay: 0s; }
.voice-waveform-container.active .voice-waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.voice-waveform-container.active .voice-waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.voice-waveform-container.active .voice-waveform-bar:nth-child(4) { animation-delay: 0.3s; }
.voice-waveform-container.active .voice-waveform-bar:nth-child(5) { animation-delay: 0.4s; }
.voice-waveform-container.active .voice-waveform-bar:nth-child(6) { animation-delay: 0.15s; }
.voice-waveform-container.active .voice-waveform-bar:nth-child(7) { animation-delay: 0.25s; }
.voice-waveform-container.active .voice-waveform-bar:nth-child(8) { animation-delay: 0.35s; }

@keyframes waveformPulse {
    0%, 100% {
        height: 6px;
        opacity: 0.6;
    }
    50% {
        height: 20px;
        opacity: 1;
    }
}

/* 语音暂停按钮 */
.voice-pause-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 6px;
}

.voice-pause-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.voice-pause-btn.active {
    display: flex;
}

.voice-pause-btn.paused {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.5);
}

/* 语音控制区域优化 */
.voice-controls-extended {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* 浏览器兼容性提示 */
.voice-browser-warning {
    display: none;
    padding: 8px 12px;
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 6px;
    color: #856404;
    font-size: 12px;
    margin-top: 8px;
}

.voice-browser-warning.show {
    display: block;
}

/* 语音服务状态指示器 */
.voice-service-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
}

.voice-service-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28a745;
}

.voice-service-dot.offline {
    background: #dc3545;
}

.voice-service-dot.connecting {
    background: #ffc107;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ========== 船名自定义下拉列表样式 ========== */
.ship-name-wrapper {
    position: relative;
}

.ship-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.ship-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.ship-dropdown-item:last-child {
    border-bottom: none;
}

.ship-dropdown-item:hover {
    background-color: #f5f7fa;
}

.ship-dropdown-item .ship-name {
    flex: 1;
    cursor: pointer;
    padding-right: 10px;
    color: #333;
    font-size: 14px;
}

.ship-dropdown-item .ship-name:hover {
    color: #667eea;
}

.ship-delete-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: #ff6b6b;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ship-delete-btn:hover {
    background: #ee5a5a;
    transform: scale(1.1);
}

.ship-delete-btn:active {
    transform: scale(0.95);
}

.ship-dropdown-empty {
    padding: 15px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .ship-dropdown {
        max-height: 200px;
    }
    
    .ship-dropdown-item {
        padding: 8px 12px;  /* 🚀 修改：行距调整为8px */
    }
    
    .ship-dropdown-item .ship-name {
        font-size: 15px;
    }
    
    .ship-delete-btn {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}

/* ========== 🚀 新增：通用自定义下拉框样式（门机、类型等） ========== */
.custom-dropdown-wrapper {
    position: relative;
}

.custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #333;
    font-size: 14px;
}

.custom-dropdown-item:last-child {
    border-bottom: none;
}

.custom-dropdown-item:hover {
    background-color: #f5f7fa;
    color: #667eea;
}

/* 🚀 新增：维护中的门机选项样式 */
.custom-dropdown-item.disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: #f9f9f9;
}

.custom-dropdown-item.disabled:hover {
    background-color: #f9f9f9;
    color: #333;
}

.custom-dropdown-item.disabled .maintenance-label {
    color: #ff6b6b;
    font-size: 12px;
    margin-left: 4px;
}

.custom-dropdown-empty {
    padding: 15px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* 门机下拉框输入框只读样式 */
.custom-dropdown-wrapper input[readonly] {
    cursor: pointer;
    background-color: #fff;
}

.custom-dropdown-wrapper input[readonly]:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ========== 🚀 新增：门机分组样式（海洋主题） ========== */
/* 分组标题通用样式 */
.crane-group-header {
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    cursor: default;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.8);
}

.crane-group-header::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* 西码头 - 清新海蓝 */
.crane-group-header.crane-group-west {
    background: linear-gradient(90deg, #1565c0 0%, #1565c0 4px, #e3f2fd 4px, #e3f2fd 100%);
    color: #0d47a1;
    padding-left: 16px;
}

.crane-group-header.crane-group-west::before {
    display: none;
}

.custom-dropdown-item.crane-item-west {
    background-color: #f5faff;
    padding-left: 24px;
    border-left: 3px solid #1565c0;
}

.custom-dropdown-item.crane-item-west:hover {
    background-color: #e3f2fd;
    color: #1565c0;
}

/* 1&2号坞 - 湖水青绿 */
.crane-group-header.crane-group-dock {
    background: linear-gradient(90deg, #00695c 0%, #00695c 4px, #e0f7fa 4px, #e0f7fa 100%);
    color: #004d40;
    padding-left: 16px;
}

.crane-group-header.crane-group-dock::before {
    display: none;
}

.custom-dropdown-item.crane-item-dock {
    background-color: #f5fcfd;
    padding-left: 24px;
    border-left: 3px solid #00838f;
}

.custom-dropdown-item.crane-item-dock:hover {
    background-color: #e0f7fa;
    color: #00838f;
}

/* 东码头 - 稳重靛蓝 */
.crane-group-header.crane-group-east {
    background: linear-gradient(90deg, #283593 0%, #283593 4px, #e8eaf6 4px, #e8eaf6 100%);
    color: #1a237e;
    padding-left: 16px;
}

.crane-group-header.crane-group-east::before {
    display: none;
}

.custom-dropdown-item.crane-item-east {
    background-color: #f8f9ff;
    padding-left: 24px;
    border-left: 3px solid #3949ab;
}

.custom-dropdown-item.crane-item-east:hover {
    background-color: #e8eaf6;
    color: #3949ab;
}

/* 不限选项 - 默认灰色 */
.custom-dropdown-item.crane-item-default {
    background-color: #fafafa;
    padding-left: 12px;
    border-top: 1px solid #e0e0e0;
    color: #666;
    font-style: italic;
}

.custom-dropdown-item.crane-item-default:hover {
    background-color: #f0f0f0;
    color: #333;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .custom-dropdown {
        max-height: 200px;
    }
    
    .custom-dropdown-item {
        padding: 8px 12px;  /* 🚀 修改：行距调整为8px */
        font-size: 15px;
    }
    
    /* 🚀 新增：移动端滑块小球扩大触摸区域，视觉大小保持不变 */
    .duration-slider::-webkit-slider-thumb {
        width: 32px;  /* 扩大触摸区域到32px */
        height: 32px;
        /* 通过增大 border 宽度，让内部可见区域保持约20px，视觉大小不变 */
        border: 6px solid white;  /* 从2px增加到6px，内部可见区域约20px */
        /* 保持原有的阴影效果 */
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
        /* 优化触摸体验 */
        touch-action: manipulation;
    }
    
    .duration-slider::-moz-range-thumb {
        width: 32px;  /* 扩大触摸区域到32px */
        height: 32px;
        /* 通过增大 border 宽度，让内部可见区域保持约20px，视觉大小不变 */
        border: 6px solid white;  /* 从2px增加到6px，内部可见区域约20px */
        /* 保持原有的阴影效果 */
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
        /* 优化触摸体验 */
        touch-action: manipulation;
    }
    
    /* 增大滑块轨道高度，为更大的小球提供空间 */
    .duration-slider {
        height: 32px;
    }
}

/* ========== 分页切换样式（门机/车辆申请切换） ========== */
.page-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 1; /* 中间区域占据剩余空间 */
    margin: 0; /* 移除原来的margin-bottom */
    padding: 0; /* 移除原来的padding */
    background: transparent; /* 移除背景，使用header的背景 */
    border-radius: 0; /* 移除圆角 */
    box-shadow: none; /* 移除阴影，使用header的阴影 */
}

.page-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #666;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-tab-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.page-tab-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.page-tab-btn .tab-icon {
    font-size: 18px;
}

.page-tab-btn .tab-text {
    font-size: 14px;
}

/* 申请区域容器 */
.application-section {
    animation: fadeIn 0.3s ease;
}

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

/* ========== 车辆申请表单样式 ========== */
.two-column-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

/* 🚀 修复：确保grid布局中的textarea可以resize */
.two-column-group .form-group,
.three-column-group .form-group {
    overflow: visible !important;
}

.two-column-group textarea,
.three-column-group textarea {
    resize: vertical !important;
    overflow: auto !important;
}

.three-column-group {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .page-tabs {
        gap: 8px;
        padding: 0; /* 保持padding为0，因为已经在header中 */
    }
    
    .page-tab-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .page-tab-btn .tab-icon {
        font-size: 16px;
    }
    
    /* 🚀 新增：手机端标签文本简化 - 门机申请 -> 门机，车辆申请 -> 车辆 */
    /* 隐藏原文本，使用伪元素显示简短文本 */
    .page-tab-btn .tab-text {
        position: relative;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    
    /* 门机申请按钮：显示"门机" */
    #craneTabBtn .tab-text::before {
        content: '门机';
        font-size: 14px;
        line-height: normal;
        display: inline-block;
        position: relative;
    }
    
    /* 车辆申请按钮：显示"车辆" */
    #vehicleTabBtn .tab-text::before {
        content: '车辆';
        font-size: 14px;
        line-height: normal;
        display: inline-block;
        position: relative;
    }
    
    .two-column-group,
    .three-column-group {
        grid-template-columns: 1fr;
    }
}

/* 🚀 新增：超小屏幕（≤480px）- 只显示图标，隐藏文字 */
@media (max-width: 480px) {
    /* 隐藏文字（包括伪元素） */
    .page-tab-btn .tab-text {
        display: none !important;
    }
    
    .page-tab-btn .tab-text::before {
        display: none !important;
    }
    
    /* 调整按钮 padding，使图标按钮更紧凑 */
    .page-tab-btn {
        padding: 10px 12px !important;
        min-width: 44px; /* 确保触摸区域足够大 */
    }
    
    /* 可适当调整图标大小 */
    .page-tab-btn .tab-icon {
        font-size: 18px !important;
    }
    
    /* 调整标签容器间距 */
    .page-tabs {
        gap: 6px !important;
        padding: 0 !important; /* 保持padding为0，因为已经在header中 */
    }
}

/* ========== 车辆申请记录样式 ========== */
.application-item {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 4px solid #e9ecef;
    transition: all 0.3s ease;
}

.application-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.application-item.status-pending {
    border-left-color: #ffc107;
}

.application-item.status-assigned {
    border-left-color: #17a2b8;
}

.application-item.status-accepted {
    border-left-color: #007bff;
}

.application-item.status-progress {
    border-left-color: #007bff;
}

.application-item.status-completed {
    border-left-color: #28a745;
}

.application-item.status-cancelled,
.application-item.status-rejected {
    border-left-color: #dc3545;
    opacity: 0.7;
}

.application-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.application-item-header .application-id {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.application-item-header .application-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.application-status.status-pending {
    background: #fff3cd;
    color: #856404;
}

.application-status.status-assigned {
    background: #d1ecf1;
    color: #0c5460;
}

.application-status.status-accepted {
    background: #cce5ff;
    color: #004085;
}

.application-status.status-in_progress {
    background: #cce5ff;
    color: #004085;
}

.application-status.status-completed {
    background: #d4edda;
    color: #155724;
}

.application-status.status-cancelled,
.application-status.status-rejected {
    background: #f8d7da;
    color: #721c24;
}

.application-item-body {
    font-size: 13px;
}

.application-info-row {
    display: flex;
    margin-bottom: 6px;
}

.application-info-row .label {
    color: #888;
    min-width: 80px;
    flex-shrink: 0;
}

.application-info-row .value {
    color: #333;
    flex: 1;
}

.application-info-row.reject-reason {
    background: #fff3cd;
    padding: 8px;
    border-radius: 6px;
    margin-top: 8px;
}

.application-item-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 10px;
}

.application-item-actions .btn-cancel {
    padding: 6px 16px;
    border: 1px solid #dc3545;
    background: white;
    color: #dc3545;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.application-item-actions .btn-cancel:hover {
    background: #dc3545;
    color: white;
}

.no-applications {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

/* ========== 无权限弹窗样式 ========== */
.no-permission-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.no-permission-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 40px 50px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideInUp 0.3s ease;
}

.no-permission-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.no-permission-content h3 {
    color: #dc3545;
    font-size: 24px;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.no-permission-content p {
    color: #333;
    font-size: 16px;
    margin: 0 0 10px 0;
}

.no-permission-content .permission-hint {
    color: #666;
    font-size: 14px;
    margin-top: 15px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    line-height: 1.6;
}

.no-permission-btn {
    margin-top: 25px;
    padding: 12px 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.no-permission-btn:hover {
    transform: translateY(-2px);
}

/* ========== 🚀 新增：门机任务执行状态按钮和标签样式 ========== */

/* 执行状态按钮容器 */
.execution-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* 执行状态按钮通用样式 */
.execution-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.execution-btn:active {
    transform: scale(0.95);
}

/* 开始按钮 - 绿色 */
.execution-btn-start {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.execution-btn-start:hover {
    background: linear-gradient(135deg, #218838, #1ba87e);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* 继续按钮 - 绿色 */
.execution-btn-continue {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.execution-btn-continue:hover {
    background: linear-gradient(135deg, #218838, #1ba87e);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* 暂停按钮 - 橙色/黄色 */
.execution-btn-pause {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #333;
}

.execution-btn-pause:hover {
    background: linear-gradient(135deg, #e0a800, #e96b0a);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

/* 结束按钮 - 红色 */
.execution-btn-end {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

.execution-btn-end:hover {
    background: linear-gradient(135deg, #c82333, #bd2130);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* 执行状态标签（用于任务行显示） */
.execution-status-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.execution-status-tag.status-in-progress {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.execution-status-tag.status-paused {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.execution-status-tag.status-completed {
    background: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .execution-buttons {
        gap: 6px;
    }
    
    .execution-btn {
        padding: 10px 14px;
        font-size: 13px;
        flex: 1;
        justify-content: center;
        min-width: 80px;
    }
    
    .execution-status-tag {
        padding: 3px 6px;
        font-size: 10px;
    }
}

/* ========== 开始时间验证错误样式 ========== */
/* 时间输入框错误样式 - 用于申请页面开始时间验证 */
.time-input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.time-input-error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* ========== 邮箱验证区域样式优化 ========== */
/* 🚀 修复：注册时邮箱验证弹窗的验证码输入框看不清问题 */
#emailVerificationGroup > div {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 2px solid #0d9488 !important;
    box-shadow: 0 8px 32px rgba(13, 148, 136, 0.15);
}

#emailVerificationGroup > div > div:first-child {
    color: #0d9488 !important;
    font-size: 18px !important;
}

#emailVerificationGroup > div > div:nth-child(2) {
    color: #374151 !important;
}

/* 验证码输入框样式 - 深色文字和占位符 */
#emailVerificationGroup #verificationCode,
#emailVerificationGroup input[type="text"] {
    background: #ffffff !important;
    border: 2px solid #d1d5db !important;
    color: #1f2937 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 8px !important;
    text-align: center !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

#emailVerificationGroup #verificationCode:focus,
#emailVerificationGroup input[type="text"]:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15) !important;
    outline: none !important;
}

/* 验证码输入框占位符 - 深色可见 */
#emailVerificationGroup #verificationCode::placeholder,
#emailVerificationGroup input[type="text"]::placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}

#emailVerificationGroup #verificationCode::-webkit-input-placeholder,
#emailVerificationGroup input[type="text"]::-webkit-input-placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}

#emailVerificationGroup #verificationCode::-moz-placeholder,
#emailVerificationGroup input[type="text"]::-moz-placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    opacity: 1;
}

/* 验证码提示文字 */
#emailVerificationGroup .form-note {
    color: #6b7280 !important;
    font-size: 13px !important;
    margin-top: 8px !important;
}

/* 验证邮箱按钮 - 主要按钮 */
#emailVerificationGroup .submit-btn {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
    transition: all 0.3s ease !important;
}

#emailVerificationGroup .submit-btn:hover {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.4) !important;
}

/* 重新发送按钮 - 次要按钮 */
#emailVerificationGroup .btn-secondary {
    background: #ffffff !important;
    color: #0d9488 !important;
    border: 2px solid #0d9488 !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

#emailVerificationGroup .btn-secondary:hover {
    background: #f0fdfa !important;
    border-color: #0f766e !important;
    color: #0f766e !important;
}

/* 标签样式 */
#emailVerificationGroup label {
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

#emailVerificationGroup label.required::after {
    color: #ef4444 !important;
}

/* ========== 登录页邮箱验证提示区域样式优化 ========== */
/* 🚀 修复：登录页邮箱验证区域的验证码输入框看不清问题 */
#emailVerificationPrompt .email-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
}

/* 登录页验证码输入框样式 */
#loginVerificationCode {
    background: #ffffff !important;
    border: 2px solid #d1d5db !important;
    color: #1f2937 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 8px !important;
    text-align: center !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

#loginVerificationCode:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15) !important;
    outline: none !important;
}

/* 登录页验证码输入框占位符 */
#loginVerificationCode::placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}

#loginVerificationCode::-webkit-input-placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}

#loginVerificationCode::-moz-placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    opacity: 1;
}

/* 登录页验证区域的提示文字 */
#emailVerificationPrompt .form-note {
    color: #6b7280 !important;
    font-size: 13px !important;
}

/* 登录页验证区域的标签 */
#emailVerificationPrompt label {
    color: #374151 !important;
    font-weight: 600 !important;
}

/* 登录页验证邮箱按钮 */
#emailVerificationPrompt .submit-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

#emailVerificationPrompt .submit-btn:hover {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    transform: translateY(-2px) !important;
}

/* 登录页重新发送按钮 */
#emailVerificationPrompt .btn-secondary {
    background: #ffffff !important;
    color: #f59e0b !important;
    border: 2px solid #f59e0b !important;
    font-weight: 600 !important;
}

#emailVerificationPrompt .btn-secondary:hover {
    background: #fffbeb !important;
}