/* ==================== 酒店共享用工撮合平台 - 前端样式 ==================== */
/* 基于原型V5设计系统，扩展动态交互样式 */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","Segoe UI",sans-serif;background:#f0f2f5;color:#333}
:root{--primary:#1677ff;--primary-light:#e6f4ff;--success:#52c41a;--warning:#faad14;--danger:#ff4d4f;--text:#1f1f1f;--text-secondary:#8c8c8c;--border:#d9d9d9;--bg:#f0f2f5;--card-bg:#fff;--radius:8px;--sidebar-w:220px}

/* ==================== 登录页 ==================== */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#001529 0%,#003a70 50%,#1677ff 100%);position:relative;overflow:hidden}
.login-page::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(22,119,255,.1) 0%,transparent 60%);animation:loginBg 20s linear infinite}
@keyframes loginBg{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.login-box{background:rgba(255,255,255,.95);border-radius:16px;padding:40px;width:400px;max-width:90vw;box-shadow:0 16px 60px rgba(0,0,0,.3);position:relative;z-index:1}
.login-box .login-logo{text-align:center;margin-bottom:28px}
.login-box .login-logo .icon{font-size:48px}
.login-box .login-logo h1{font-size:20px;font-weight:700;margin-top:8px;color:#001529}
.login-box .login-logo p{font-size:13px;color:#999;margin-top:4px}
.login-box .login-tabs{display:flex;gap:0;border-bottom:2px solid #f0f0f0;margin-bottom:24px}
.login-box .login-tabs .tab{flex:1;padding:12px;text-align:center;font-size:14px;color:#999;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.2s}
.login-box .login-tabs .tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.login-box .form-group{margin-bottom:18px}
.login-box .form-group label{display:block;font-size:13px;color:#666;margin-bottom:6px;font-weight:500}
.login-box .form-group .input-wrap{position:relative}
.login-box .form-group .input-wrap .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:16px;color:#bbb}
.login-box .form-group input{width:100%;padding:10px 12px 10px 40px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;transition:.2s}
.login-box .form-group input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(22,119,255,.1)}
.login-box .login-btn{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:.2s;margin-top:8px}
.login-box .login-btn:hover{background:#4096ff}
.login-box .login-btn:active{transform:scale(.98)}
.login-box .login-hint{text-align:center;margin-top:16px;font-size:12px;color:#999}
.login-box .login-error{color:var(--danger);font-size:13px;text-align:center;margin-bottom:12px;display:none}
.login-box .login-error.show{display:block}
.login-box .demo-accounts{margin-top:20px;padding:12px;background:#f6f8fa;border-radius:8px;font-size:12px;color:#666;line-height:1.8}
.login-box .demo-accounts strong{color:#333}
.login-box .demo-accounts .account-item{cursor:pointer;padding:2px 0}
.login-box .demo-accounts .account-item:hover{color:var(--primary)}

/* ==================== PC端布局 ==================== */
.pc-sidebar{width:var(--sidebar-w);background:#001529;color:rgba(255,255,255,.85);position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:100;transition:width .2s}
.pc-sidebar::-webkit-scrollbar{width:4px}
.pc-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.pc-sidebar .logo{padding:20px 24px;font-size:16px;font-weight:700;color:#fff;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer}
.pc-sidebar .menu-item{padding:12px 24px;cursor:pointer;transition:.2s;font-size:14px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.pc-sidebar .menu-item:hover{background:rgba(255,255,255,.08)}
.pc-sidebar .menu-item.active{background:var(--primary);color:#fff}
.pc-sidebar .menu-item .icon{width:20px;text-align:center}
.pc-sidebar .menu-group-title{padding:16px 24px 8px;font-size:11px;color:rgba(255,255,255,.35);text-transform:uppercase}
.pc-main{margin-left:var(--sidebar-w);padding:20px 28px;min-height:100vh}
.pc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.pc-header h2{font-size:20px;font-weight:600}
.pc-header .user-info{display:flex;align-items:center;gap:8px;font-size:13px;color:#666;cursor:pointer}
.pc-header .avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.pc-header .logout-btn{border:1px solid var(--border);background:#fff;padding:4px 12px;border-radius:6px;font-size:12px;cursor:pointer;color:#666;transition:.2s;margin-left:8px}
.pc-header .logout-btn:hover{border-color:var(--danger);color:var(--danger)}

/* ==================== 右上角统一用户条 ==================== */
.user-bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.ub-avatar{width:38px;height:38px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.ub-meta{display:flex;flex-direction:column;justify-content:center;line-height:1.4;min-width:0}
.ub-name{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;white-space:nowrap}
.ub-badge{font-size:11px;font-weight:500;padding:1px 8px;border-radius:10px;color:#fff;white-space:nowrap;letter-spacing:.5px}
.ub-ent{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.ub-divider{width:1px;height:26px;background:var(--border)}
.ub-logout{display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;color:#666;transition:.2s;font-family:inherit}
.ub-logout:hover{border-color:var(--danger);color:var(--danger);background:#fff1f0}
.ub-exit-icon{font-size:14px;line-height:1}

/* 角色主题配色（头像与徽章统一色系） */
.role-sys{background:linear-gradient(135deg,#001529,#1677ff)}
.role-plat{background:linear-gradient(135deg,#722ed1,#9254de)}
.role-out{background:linear-gradient(135deg,#08979c,#36cfc9)}
.role-in{background:linear-gradient(135deg,#1677ff,#4096ff)}
.role-emp{background:linear-gradient(135deg,#d46b08,#ffc069)}

/* ==================== 数据卡片 ==================== */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:var(--card-bg);border-radius:var(--radius);padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:.2s}
.stat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.12)}
.stat-card .stat-label{font-size:13px;color:var(--text-secondary);margin-bottom:8px}
.stat-card .stat-value{font-size:28px;font-weight:700;color:var(--text)}
.stat-card .stat-trend{font-size:12px;margin-top:4px}
.stat-card .stat-trend.up{color:var(--success)}
.stat-card .stat-trend.down{color:var(--danger)}

/* ==================== 面板 ==================== */
.panel{background:var(--card-bg);border-radius:var(--radius);box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:20px}
.panel-header{padding:16px 20px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center}
.panel-header h3{font-size:15px;font-weight:600}
.panel-body{padding:16px 20px}

/* ==================== 表格 ==================== */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #f0f0f0}
th{background:#fafafa;font-weight:600;color:#666;font-size:12px}
tr:hover td{background:#fafafa}

/* ==================== 标签 ==================== */
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;line-height:20px}
.tag-blue{background:var(--primary-light);color:var(--primary)}
.tag-green{background:#f6ffed;color:var(--success)}
.tag-orange{background:#fff7e6;color:var(--warning)}
.tag-red{background:#fff1f0;color:var(--danger)}
.tag-gray{background:#f5f5f5;color:#8c8c8c}
.tag-purple{background:#f9f0ff;color:#722ed1}

/* ==================== 按钮 ==================== */
.btn{padding:6px 16px;border-radius:6px;border:1px solid var(--border);background:#fff;font-size:13px;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:#4096ff;color:#fff}
.btn-sm{padding:2px 8px;font-size:12px}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}

/* ==================== 待办列表 ==================== */
.todo-list{list-style:none}
.todo-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:13px}
.todo-item:last-child{border-bottom:none}
.todo-item .todo-tag{margin-left:8px}

/* ==================== 进度条 ==================== */
.progress{height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden}
.progress-bar{height:100%;border-radius:3px;transition:.3s}

/* ==================== 状态点 ==================== */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot-green{background:var(--success)}
.dot-orange{background:var(--warning)}
.dot-red{background:var(--danger)}
.dot-gray{background:#d9d9d9}

/* ==================== 双栏 ==================== */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ==================== 表单 ==================== */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;color:#666;margin-bottom:6px;font-weight:500}
.form-input,.form-select,.form-textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit;background:#fff;transition:.2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(22,119,255,.1)}
.form-textarea{min-height:80px;resize:vertical}
.form-row{display:flex;gap:16px}
.form-row .form-group{flex:1}

/* ==================== 信息提示框 ==================== */
.info-box{background:var(--primary-light);border:1px solid #91caff;border-radius:8px;padding:12px 16px;font-size:13px;color:#0958d9;margin-bottom:16px}
.info-box.warning{background:#fffbe6;border-color:#ffe58f;color:#d48806}
.info-box.danger{background:#fff1f0;border-color:#ffa39e;color:#cf1322}

/* ==================== 空状态 ==================== */
.empty-state{text-align:center;padding:40px 20px;color:#999}
.empty-state .icon{font-size:48px;margin-bottom:8px}

/* ==================== 标签页 ==================== */
.tabs{display:flex;gap:0;border-bottom:1px solid #f0f0f0;margin-bottom:20px}
.tab-item{padding:10px 20px;font-size:14px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:.2s}
.tab-item:hover{color:var(--primary)}
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* ==================== 弹窗 ==================== */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:10000;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:#fff;border-radius:12px;width:560px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.2)}
.modal-header{padding:16px 24px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:16px;font-weight:600}
.modal-close{font-size:20px;color:#999;cursor:pointer;border:none;background:none}
.modal-body{padding:24px}
.modal-footer{padding:12px 24px;border-top:1px solid #f0f0f0;display:flex;justify-content:flex-end;gap:8px}

/* ==================== 步骤条 ==================== */
.steps{display:flex;align-items:center;margin-bottom:24px;padding:16px 0}
.step{display:flex;align-items:center;flex:1}
.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0}
.step-circle.done{background:var(--success);color:#fff}
.step-circle.active{background:var(--primary);color:#fff}
.step-circle.pending{background:#f0f0f0;color:#999}
.step-label{font-size:13px;color:#666;margin-left:8px;white-space:nowrap}
.step-label.active{color:var(--primary);font-weight:600}
.step-line{flex:1;height:2px;background:#f0f0f0;margin:0 12px;min-width:20px}
.step-line.done{background:var(--success)}

/* ==================== 收费卡片 ==================== */
.fee-tier{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.fee-tier-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center;transition:.2s}
.fee-tier-card:hover{border-color:var(--primary);box-shadow:0 2px 12px rgba(22,119,255,.1)}
.fee-tier-card .tier-name{font-size:16px;font-weight:600;margin-bottom:8px}
.fee-tier-card .tier-price{font-size:28px;font-weight:700;color:var(--primary);margin-bottom:4px}
.fee-tier-card .tier-price .unit{font-size:13px;color:#999;font-weight:400}
.fee-tier-card .tier-features{font-size:12px;color:#999;margin-top:8px;text-align:left;padding-top:8px;border-top:1px solid #f5f5f5}
.fee-tier-card .tier-features li{margin:4px 0;list-style:none}
.fee-tier-card.recommended{border-color:var(--primary);border-width:2px;position:relative}
.fee-tier-card.recommended::after{content:"推荐";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:11px;padding:2px 12px;border-radius:12px}

/* ==================== 柱状图 ==================== */
.chart-placeholder{height:200px;background:#fafafa;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:13px;position:relative;overflow:hidden}
.bar-chart{display:flex;align-items:flex-end;justify-content:space-around;height:180px;padding:0 20px}
.bar{width:30px;background:var(--primary);border-radius:4px 4px 0 0;position:relative;opacity:.7;transition:.3s}
.bar:hover{opacity:1}
.bar-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:#999;white-space:nowrap}
.bar-val{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10px;color:#666}

/* ==================== 时间线 ==================== */
.timeline{padding:0 0 0 20px;border-left:2px solid #f0f0f0}
.timeline-item{position:relative;padding:0 0 20px 20px}
.timeline-item::before{content:"";position:absolute;left:-26px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--primary)}
.timeline-item.done::before{background:var(--success)}
.timeline-item .timeline-time{font-size:12px;color:#999;margin-bottom:4px}
.timeline-item .timeline-content{font-size:13px;color:#333}

/* ==================== 详情页 ==================== */
.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f0f0f0}
.detail-header h2{font-size:20px;font-weight:600}
.detail-header .detail-meta{font-size:13px;color:#999}
.detail-info{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-bottom:20px}
.detail-info-item{display:flex;padding:12px 0;border-bottom:1px solid #f5f5f5}
.detail-info-item .label{width:120px;font-size:13px;color:#999;flex-shrink:0}
.detail-info-item .value{font-size:13px;color:#333;flex:1;font-weight:500}

/* ==================== 加载状态 ==================== */
.loading{text-align:center;padding:40px;color:#999}
.loading .spinner{display:inline-block;width:32px;height:32px;border:3px solid #f0f0f0;border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==================== 通知 ==================== */
.toast{position:fixed;top:80px;right:28px;z-index:99999;background:#333;color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.2);animation:toastIn .3s ease;max-width:360px}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
.toast.warning{background:var(--warning)}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* ==================== 响应式 ==================== */
@media(max-width:1200px){.stat-cards{grid-template-columns:repeat(2,1fr)}.cols-2{grid-template-columns:1fr}.fee-tier{grid-template-columns:1fr}}
@media(max-width:768px){.pc-sidebar{width:60px}.pc-sidebar .logo{font-size:0;padding:20px 16px}.pc-sidebar .menu-item{padding:12px 16px;font-size:0}.pc-sidebar .menu-item .icon{font-size:16px}.pc-sidebar .menu-group-title{display:none}.pc-main{margin-left:60px}}

/* ==================== 弹窗/表单 ==================== */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:99998;display:flex;align-items:center;justify-content:center}
.modal-box{background:#fff;border-radius:12px;width:90%;max-width:720px;max-height:90vh;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.2);display:flex;flex-direction:column}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #e8e8e8}
.modal-header h3{font-size:16px;font-weight:600}
.modal-close{font-size:24px;cursor:pointer;color:#999;line-height:1}
.modal-close:hover{color:#333}
.modal-body{overflow-y:auto;flex:1}
.form-input{font-family:inherit;font-size:14px;outline:none}
.form-input:focus{border-color:var(--primary)!important;box-shadow:0 0 0 2px rgba(22,119,255,.1)}
.detail-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 0}
.detail-info-item{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:#f8f9fa;border-radius:6px}
.detail-info-item .label{font-size:12px;color:#8c8c8c}
.detail-info-item .value{font-size:14px;color:#1f1f1f;font-weight:500}
.todo-list{list-style:none;padding:0}
.todo-item{padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:14px;display:flex;justify-content:space-between;align-items:center}