*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f0f2f5}

/* ===== 登录页 ===== */
.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#0a1628 0%,#0d1f3c 100%)}
.login-card{background:rgba(255,255,255,0.95);border-radius:24px;padding:40px;width:420px;max-width:90%;text-align:center}
.login-card h2{font-size:24px;margin-bottom:8px;color:#1a2a4a}
.login-card .sub{color:#7f8c8d;margin-bottom:32px;font-size:13px}
.login-form .form-group{margin-bottom:20px;text-align:left}
.login-form label{display:block;margin-bottom:8px;font-weight:500;color:#2c3e50}
.login-form input{width:100%;padding:12px 16px;border:1px solid #dce4ec;border-radius:12px;font-size:14px}
.login-btn{width:100%;padding:12px;background:linear-gradient(135deg,#1a2a4a 0%,#0f3460 100%);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer}
.login-btn:hover{opacity:.9}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.error-msg{color:#e74c3c;font-size:13px;margin-top:12px;min-height:20px}
.wecom-tip{margin-top:20px;padding-top:15px;border-top:1px solid #eee;font-size:12px;color:#999}

/* ===== 加载页 ===== */
.loading-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#0a1628 0%,#0d1f3c 100%);color:#fff;flex-direction:column;gap:20px}
.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 主应用布局 ===== */
.app-container{display:none;height:100vh;flex-direction:column;overflow:hidden}
.header{background:linear-gradient(135deg,#0a1628 0%,#0d1f3c 100%);color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0}
.header h1{font-size:16px;font-weight:600}
.user-info{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.role-badge{background:rgba(255,255,255,0.2);padding:4px 8px;border-radius:20px;font-size:11px}
.user-info button{background:rgba(255,255,255,0.15);padding:5px 10px;border-radius:20px;cursor:pointer;font-size:11px;border:none;color:#fff}
.user-info button:hover{background:rgba(255,255,255,0.25)}
.main-content{flex:1;overflow:hidden;min-height:0}
.container{height:100%;padding:12px;overflow:hidden}
.main-layout{display:flex;gap:12px;height:100%;min-height:0}

/* ===== 侧边栏 ===== */
.sidebar{
    width:280px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:12px;
    height:100%;
    overflow:hidden;
    min-height:0
}
.sidebar .card{
    background:#fff;
    border-radius:16px;
    padding:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    overflow:hidden
}
.sidebar .card:first-child{
    flex-shrink:0;
    max-height:240px
}
.sidebar .card:first-child .card-body{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;
    min-height:0;
    padding-right:4px
}
.sidebar .card:last-child{
    flex:1;
    min-height:120px;
    display:flex;
    flex-direction:column
}
.sidebar .card:last-child .card-body{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    min-height:0;
    padding-right:4px
}

/* ===== 内容区 ===== */
.content{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;min-height:0}
.card{background:#fff;border-radius:16px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.card-title{font-size:15px;font-weight:600;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #eef2f6;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0}
.card-body{flex:1;overflow:hidden;min-height:0}

/* ===== 项目列表 ===== */
#projectList{
    height:100%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:2px 0
}
.project-item{
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    background:#f8f9fa;
    border:1px solid #e9ecef;
    transition:all .2s;
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:6px
}
.project-item:hover{background:#eef2f6}
.project-item.active{background:linear-gradient(135deg,#1a2a4a 0%,#0f3460 100%);color:#fff;border-color:transparent}
.project-item .name{font-weight:600;font-size:13px}
.project-item .stats{font-size:10px;color:#7f8c8d}
.project-item.active .stats{color:rgba(255,255,255,0.8)}

/* ===== 菜单项 ===== */
.menu-item{
    padding:10px 12px;
    margin-bottom:6px;
    border-radius:12px;
    cursor:pointer;
    background:#f8f9fa;
    border:1px solid #e9ecef;
    transition:all .2s;
    font-weight:500;
    font-size:13px
}
.menu-item:hover{background:#eef2f6}
.menu-item.active{background:linear-gradient(135deg,#1a2a4a 0%,#0f3460 100%);color:#fff;border-color:transparent}

/* ===== 任务表格 ===== */
.task-table-container{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;min-height:0}
.task-table{width:100%;border-collapse:collapse;font-size:12px;min-width:1100px}
.task-table th,.task-table td{padding:6px 6px;text-align:left;border-bottom:1px solid #eef2f6;vertical-align:middle}
.task-table th{background:#f8f9fa;font-weight:600;position:sticky;top:0;z-index:10}
.task-row-pending{background:#fef3c7}

/* ===== 状态徽章 ===== */
.status-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap}
.status-pending{background:#f59e0b;color:#fff}
.status-progress{background:#3498db;color:#fff}
.status-done{background:#27ae60;color:#fff}
.status-overdue-done{background:#e74c3c;color:#fff}
.status-frozen{background:#95a5a6;color:#fff}

/* ===== 时间显示 ===== */
.time-remaining{font-weight:600;font-size:12px;white-space:nowrap}
.time-normal{color:#27ae60}
.time-urgent{color:#e67e22}
.time-overdue{color:#e74c3c}

/* ===== 按钮 ===== */
.btn-sm{padding:4px 12px;border-radius:15px;border:none;cursor:pointer;font-size:11px;background:#3498db;color:#fff}
.btn-sm:hover{opacity:.85}
.btn-danger{background:#e74c3c;color:#fff}
.btn-success{background:#27ae60;color:#fff}
.btn-warning{background:#f39c12;color:#fff}
.btn-primary{background:#3498db;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

/* ===== 弹窗 ===== */
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1001;align-items:center;justify-content:center}
.modal-content{background:#fff;border-radius:20px;padding:20px;width:500px;max-width:92%;max-height:90%;overflow-y:auto}
.modal-footer{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}

/* ===== 表单 ===== */
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:500;color:#2c3e50;font-size:13px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 12px;border:1px solid #dce4ec;border-radius:8px;font-size:14px}
.required{color:#e74c3c;margin-left:4px}
.date-range{display:flex;gap:12px;flex-wrap:wrap}
.owner-tag{display:inline-block;background:#e8f4fd;color:#3498db;padding:2px 8px;border-radius:12px;font-size:11px;margin:2px}
.drag-handle{cursor:grab;text-align:center}
.empty-state{text-align:center;padding:40px;color:#95a5a6}
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#1a2a4a;color:#fff;padding:8px 16px;border-radius:40px;font-size:12px;z-index:1000;display:none}

/* ===== 项目类型 ===== */
.project-type-group{background:#f8f9fa;border-radius:12px;padding:12px;margin-bottom:16px}
.project-type-item{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.project-type-item label{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:400}
.project-type-item input[type=checkbox]{width:18px;height:18px;margin:0}
.project-type-item input[type=number]{width:80px;padding:6px 8px;margin-left:10px}

/* ===== 移动端任务卡片列表 ===== */
.task-card-list{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0;min-height:0}
.task-card-item{background:#fff;border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08);border-left:4px solid #3498db}
.task-card-item .task-title{font-weight:600;font-size:14px;margin-bottom:6px}
.task-card-item .task-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:12px;color:#555;margin-top:4px}
.task-card-item .task-meta span{display:flex;align-items:center;gap:4px}
.task-card-item .task-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.task-card-item .task-actions .btn-sm{font-size:11px;padding:4px 12px}
.task-card-item .status-badge{font-size:11px;padding:2px 10px}

/* ===== 拖拽样式 ===== */
.task-row-dragging{opacity:0.5;background:#e8f4fd !important}
.task-row-drag-over{border-bottom:3px solid #3498db !important}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:#c1c7cd;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}


/* ============================================================
   移动端适配 - 顶部栏缩小 + 导航菜单/项目列表放大
   ============================================================ */
@media(max-width:768px){
    /* 🔥 顶部栏极简缩小 */
    .header{
        padding:2px 8px;
        gap:2px;
        min-height:32px
    }
    .header h1{
        font-size:12px;
        font-weight:600
    }
    .header-left h1{
        font-size:12px
    }
    .user-info{
        gap:2px
    }
    .user-info button{
        padding:2px 6px;
        font-size:9px;
        border-radius:10px;
        min-height:20px
    }
    .role-badge{
        font-size:8px;
        padding:1px 4px;
        display:none  /* 手机端隐藏角色徽章，腾空间 */
    }
    .user-info span{
        font-size:10px
    }
    .user-info #currentUsername{
        font-size:10px
    }
    
    /* 🔥 侧边栏放大 - 导航菜单和项目列表更大 */
    .sidebar{
        width:100%;
        max-height:340px;  /* 增大 */
        flex-shrink:0;
        overflow:visible;
        gap:4px
    }
    .sidebar .card{
        padding:8px 10px
    }
    .sidebar .card:first-child{
        max-height:140px;
        flex-shrink:0
    }
    .sidebar .card:first-child .card-body{
        max-height:110px;
        overflow-y:auto
    }
    .sidebar .card:last-child{
        flex:1;
        max-height:190px;
        min-height:100px;
        overflow:hidden
    }
    .sidebar .card:last-child .card-body{
        overflow-y:auto;
        max-height:160px
    }
    
    /* 侧边栏标题缩小，内容变大 */
    .sidebar .card .card-title{
        font-size:12px;
        margin-bottom:3px;
        padding-bottom:3px
    }
    .sidebar .card .btn-sm{
        font-size:10px;
        padding:2px 10px;
        min-height:24px
    }
    
    /* 🔥 菜单项和项目列表变大 - 容易点击 */
    .menu-item{
        padding:10px 14px;
        font-size:14px;
        font-weight:500;
        margin-bottom:5px;
        border-radius:10px
    }
    .project-item{
        padding:10px 14px;
        font-size:14px;
        margin-bottom:5px;
        border-radius:10px
    }
    .project-item .name{
        font-size:14px;
        font-weight:600
    }
    .project-item .stats{
        font-size:11px
    }
    
    /* 布局 */
    .main-layout{
        flex-direction:column;
        height:100%;
        min-height:0;
        gap:4px;
        overflow:hidden
    }
    .container{
        padding:4px 6px
    }
    
    .content{
        flex:1;
        min-height:0;
        overflow:hidden
    }
    .content .card:first-child{
        flex-shrink:0;
        padding:4px 8px
    }
    .content .card:first-child .card-title{
        font-size:11px;
        margin-bottom:2px;
        padding-bottom:2px
    }
    .content .card:last-child{
        flex:1;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        min-height:0;
        padding:4px
    }
    
    /* 隐藏表格，显示卡片 */
    .task-table-container{display:none !important}
    .task-card-list{display:flex !important;flex-direction:column}
    
    /* 任务卡片 */
    .task-card-item{
        padding:10px 12px;
        margin-bottom:6px;
        border-radius:10px;
        border-left-width:4px
    }
    .task-card-item .task-title{
        font-size:13px;
        font-weight:600
    }
    .task-card-item .task-meta{
        font-size:11px;
        gap:4px 10px;
        margin-top:3px
    }
    .task-card-item .task-actions{
        margin-top:8px;
        gap:6px
    }
    .task-card-item .task-actions .btn-sm{
        font-size:11px;
        padding:4px 12px;
        min-height:30px
    }
    .task-card-item .status-badge{
        font-size:10px;
        padding:2px 8px
    }
    
    /* 按钮 */
    .btn-sm{
        padding:5px 12px;
        font-size:11px;
        border-radius:14px;
        min-height:30px
    }
    .btn-primary{
        padding:6px 14px;
        font-size:12px;
        border-radius:8px;
        min-height:34px
    }
    .btn-danger,.btn-success,.btn-warning{
        min-height:30px;
        font-size:11px;
        padding:5px 12px
    }
    
    /* 弹窗 */
    .modal-content{
        padding:14px;
        max-height:95%;
        width:95%;
        border-radius:14px
    }
    .modal-content h3{font-size:15px}
    .modal-content .form-group label{font-size:12px}
    .modal-content .form-group input,
    .modal-content .form-group select,
    .modal-content .form-group textarea{
        font-size:13px;
        padding:8px 10px;
        border-radius:8px
    }
    .modal-footer button{
        padding:8px 16px;
        font-size:13px;
        border-radius:8px;
        min-height:36px;
        min-width:50px
    }
    
    .date-range{flex-direction:column;gap:4px}
    .date-range .form-group input{font-size:13px}
    
    .status-badge{font-size:10px;padding:2px 8px}
    .toast{font-size:12px;padding:8px 16px;border-radius:20px;bottom:20px}
    
    .project-type-item{flex-wrap:wrap;gap:4px}
    .project-type-item label{font-size:12px}
    .project-type-item input[type=number]{width:70px;padding:4px 8px;font-size:12px}
    
    .form-group .btn-primary{padding:6px 12px;font-size:11px;min-height:30px}
}

/* ===== 超大屏适配 ===== */
@media(min-width:1200px){
    .sidebar{width:320px}
    .task-table{font-size:13px;min-width:1200px}
    .task-table th,.task-table td{padding:8px 10px}
}