*{margin:0;padding:0;box-sizing:border-box} :root{ --primary:#4F46E5;--primary-lt:#EEF2FF;--primary-dk:#3730A3; --success:#059669;--success-lt:#ECFDF5; --danger:#DC2626;--danger-lt:#FEF2F2; --warning:#D97706;--warning-lt:#FFFBEB; --info:#2563EB;--info-lt:#EFF6FF; --bg:#F8FAFC;--bg2:#F1F5F9;--card:#fff; --text:#1E293B;--text2:#64748B;--text3:#94A3B8; --border:#E2E8F0;--border2:#CBD5E1; --shadow:0 1px 3px rgba(0,0,0,.08);--shadow-lg:0 4px 12px rgba(0,0,0,.1); --radius:8px;--radius-lg:12px; } body{font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);min-height:100vh} a{color:var(--primary);text-decoration:none} input,select,textarea{font:inherit;padding:8px 12px;border:1px solid var(--border);border-radius:6px;outline:none;transition:border-color .2s;width:100%} input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)} button{cursor:pointer;font:inherit;border:none;border-radius:6px;padding:8px 16px;transition:all .2s;display:inline-flex;align-items:center;gap:6px} .btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dk)} .btn-success{background:var(--success);color:#fff}.btn-success:hover{opacity:.9} .btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{opacity:.9} .btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}.btn-outline:hover{background:var(--bg2)} .btn-sm{padding:4px 10px;font-size:12px} .btn-xs{padding:2px 8px;font-size:11px} .tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:500} .tag-blue{background:var(--info-lt);color:var(--info)} .tag-green{background:var(--success-lt);color:var(--success)} .tag-red{background:var(--danger-lt);color:var(--danger)} .tag-yellow{background:var(--warning-lt);color:var(--warning)} .tag-gray{background:var(--bg2);color:var(--text2)} .tag-purple{background:#f3e8ff;color:#8b5cf6} .tag-cyan{background:#cffafe;color:#0891b2} .tag-indigo{background:#e0e7ff;color:#6366f1} .tag-teal{background:#ccfbf1;color:#0d9488} .tag-orange{background:#ffedd5;color:#ea580c} .tag-amber{background:#fef3c7;color:#d97706} .tag-slate{background:#e2e8f0;color:#64748b} .badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;font-size:11px;font-weight:600;padding:0 6px} .badge-red{background:var(--danger-lt);color:var(--danger)} .badge-green{background:var(--success-lt);color:var(--success)} .badge-blue{background:var(--info-lt);color:var(--info)} /* Layout */ .login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)} .login-card{background:var(--card);border-radius:var(--radius-lg);padding:40px;width:420px;box-shadow:var(--shadow-lg)} .login-card h1{font-size:24px;margin-bottom:8px;text-align:center} .login-card .sub{color:var(--text2);text-align:center;margin-bottom:24px;font-size:13px} .form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:4px;font-weight:500;font-size:13px;color:var(--text2)} .tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--bg2);border-radius:8px;padding:4px} .tab{flex:1;text-align:center;padding:8px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s} .tab.active{background:var(--card);box-shadow:var(--shadow);font-weight:600} /* App Layout */ .app{display:flex;min-height:100vh} .sidebar{width:220px;background:var(--text);color:#fff;padding:16px 0;display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none} .sidebar::-webkit-scrollbar{display:none} .sidebar-logo{padding:0 16px 16px;font-size:16px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px;text-align:center} .sidebar-logo small{display:block;font-size:12px;opacity:.55;font-weight:400;margin-top:4px} .logo-text{font-size:16px;font-weight:700;line-height:1.3} .logo-wrap{text-align:center;margin-bottom:4px} .tenant-logo-img{max-width:140px;max-height:50px;border-radius:6px;display:block;margin:0 auto 6px} .logo-name{font-size:14px;font-weight:600;line-height:1.3} .nav-item{padding:8px 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;transition:background .2s;color:rgba(255,255,255,.7);border-left:3px solid transparent;border-radius:4px;margin:2px 6px} .nav-item:hover{background:rgba(255,255,255,.08);color:#fff} .nav-item.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--primary)} .sidebar-actions{display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.1);margin-top:8px;padding-top:4px} .sidebar-actions .nav-item{margin:0;white-space:nowrap} .sidebar-actions .sep-v{border-left:1px solid rgba(255,255,255,.15);height:20px;flex:none} .nav-group{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)} .nav-group-label{padding:6px 16px;font-size:10px;text-transform:uppercase;color:rgba(255,255,255,.4);letter-spacing:.5px} .nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0 4px} .main{flex:1;display:flex;flex-direction:column;overflow:hidden} .header{background:var(--card);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);box-shadow:var(--shadow)} .header-left{font-weight:600;font-size:15px} .header-right{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text2)} .tenant-user-meta{display:inline} .content{flex:1;overflow-y:auto;padding:24px} .page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px} .page-title{font-size:20px;font-weight:700;margin:0} /* Card */ .card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px} .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .card-title{font-size:16px;font-weight:600} /* Stats row */ .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px} .stat-card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)} .stat-label{font-size:12px;color:var(--text2);margin-bottom:4px} .stat-value{font-size:28px;font-weight:700} .stat-sub{font-size:12px;color:var(--text3);margin-top:2px} /* Tables */ table{width:100%;border-collapse:collapse} th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px} th{background:var(--bg2);font-weight:600;color:var(--text2);white-space:nowrap} tr:hover{background:var(--bg2)} /* Modal */ .modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .15s ease} .modal{background:var(--card);border-radius:16px;width:90%;max-width:600px;max-height:85vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;animation:slideUp .2s ease} .modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .modal-header h3{font-size:17px;font-weight:700} .modal-close{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);background:transparent;border:none;font-size:18px;transition:all .15s} .modal-close:hover{background:var(--bg2);color:var(--text)} .modal-body{padding:24px;overflow-y:auto;flex:1} .modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;background:var(--bg)} .modal.wide{max-width:720px} .modal-narrow{max-width:480px} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}} /* Form sections */ .form-section{margin-bottom:20px} .form-section-label{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} /* Region cascader */ .rc-container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .rc-container select{padding:8px 28px 8px 10px;font-size:13px;border:1px solid var(--border2);border-radius:6px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 8px center;cursor:pointer;height:36px;appearance:none;-webkit-appearance:none;-moz-appearance:none} .rc-container select:disabled{background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 8px center;color:var(--text3);cursor:not-allowed;border-color:var(--border)} .rc-container select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)} @media(max-width:768px){.rc-container{grid-template-columns:1fr}} /* Grid */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} /* Utils */ .mt16{margin-top:16px}.mb16{margin-bottom:16px}.text-center{text-align:center}.text-right{text-align:right} .text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)} .flex{display:flex}.flex-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.gap8{gap:8px}.gap16{gap:16px} .w-full{width:100%}.inline{display:inline} .empty{padding:40px;text-align:center;color:var(--text3)}.empty:not(.edu-cal-day){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 16px}.empty:not(.edu-cal-day)::before{content:'';width:120px;height:120px;background-color:var(--text3);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%2024l8-12h32l8%2012'/%3E%3Cpath%20d='M8%2024v28a2%202%200%200%200%202%202h44a2%202%200%200%200%202-2V24'/%3E%3Cpath%20d='M8%2024l24%2014%2024-14'/%3E%3Cpath%20d='M32%2038v10'/%3E%3Cpath%20d='M27%2043h10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%2024l8-12h32l8%2012'/%3E%3Cpath%20d='M8%2024v28a2%202%200%200%200%202%202h44a2%202%200%200%200%202-2V24'/%3E%3Cpath%20d='M8%2024l24%2014%2024-14'/%3E%3Cpath%20d='M32%2038v10'/%3E%3Cpath%20d='M27%2043h10'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.35}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 16px;color:var(--text3);text-align:center}.empty-state::before{content:'';width:120px;height:120px;background-color:var(--text3);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%2024l8-12h32l8%2012'/%3E%3Cpath%20d='M8%2024v28a2%202%200%200%200%202%202h44a2%202%200%200%200%202-2V24'/%3E%3Cpath%20d='M8%2024l24%2014%2024-14'/%3E%3Cpath%20d='M32%2038v10'/%3E%3Cpath%20d='M27%2043h10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%2024l8-12h32l8%2012'/%3E%3Cpath%20d='M8%2024v28a2%202%200%200%200%202%202h44a2%202%200%200%200%202-2V24'/%3E%3Cpath%20d='M8%2024l24%2014%2024-14'/%3E%3Cpath%20d='M32%2038v10'/%3E%3Cpath%20d='M27%2043h10'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.35} .loading{text-align:center;padding:40px;color:var(--text2)} .toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:8px;color:#fff;z-index:9999;animation:slideIn .3s ease} .toast-success{background:var(--success)}.toast-error{background:var(--danger)} @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}} .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .detail-item label{font-size:11px;color:var(--text3);display:block}.detail-item span{font-size:14px} .chart-placeholder{background:var(--bg2);border-radius:var(--radius);padding:24px;text-align:center;color:var(--text3);min-height:200px;display:flex;align-items:center;justify-content:center} /* Hamburger menu button */ .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--text);flex-shrink:0} .menu-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;border-radius:1px;transition:all .25s} .menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .menu-toggle.open span:nth-child(2){opacity:0} .menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} /* Sidebar overlay backdrop */ .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:998;animation:fadeIn .25s ease} /* 移动端底部导航栏：桌面端隐藏 */ .mobile-nav{display:none} @media(max-width:768px){ .menu-toggle{display:block} .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:998} .sidebar{position:fixed;left:-280px;top:0;bottom:0;z-index:999;width:260px;transition:left .3s ease;overflow-y:auto;scrollbar-width:none} .sidebar::-webkit-scrollbar{display:none} .sidebar.open{left:0;box-shadow:4px 0 20px rgba(0,0,0,.25)} .grid2,.grid3{grid-template-columns:1fr} .stats-row{grid-template-columns:1fr 1fr} .main{flex:1;overflow:hidden;margin-left:0 !important} /* 移动端底部预留空间给底部导航栏 */ .main.has-mobile-nav{padding-bottom:64px} .header{padding:10px 14px;position:sticky;top:0;z-index:100} .header-left{flex:1;font-size:14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .header-right{font-size:11px;gap:6px;white-space:nowrap} .tenant-user-meta{display:none} .content{padding:14px 10px;overflow-x:hidden} /* 表格：水平滚动 + 滚动指示器 */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -10px;padding:0 10px} .table-wrap table{min-width:600px} .table-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:20px;background:linear-gradient(to right,transparent,rgba(0,0,0,.05));pointer-events:none} /* 卡片内容区表格不设最小宽度 */ .card table{min-width:auto} .form-row,.form-row-3{grid-template-columns:1fr} .modal{width:100%;max-width:100%;max-height:100vh;border-radius:0;margin:0} .modal.wide{max-width:100%} .modal-header{padding:14px 16px} .modal-body{padding:14px 16px} .modal-footer{padding:10px 16px;flex-wrap:wrap} .modal-footer button{flex:1;min-width:80px;font-size:13px;padding:10px 8px} .detail-grid{grid-template-columns:1fr} /* 更大触控目标 */ button{padding:10px 16px;min-height:40px} .btn-sm{padding:6px 12px;min-height:32px;font-size:13px} .btn-xs{padding:4px 10px;min-height:28px;font-size:12px} input,select,textarea{padding:10px 12px;font-size:16px} .form-group label{font-size:14px} /* 移动端侧边栏背景遮罩 */ .sidebar-backdrop{display:none} .sidebar.open + .sidebar-backdrop, .sidebar-backdrop.show{display:block} /* 底部导航栏 */ .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:997;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -2px 10px rgba(0,0,0,.06);padding:6px 0 env(safe-area-inset-bottom,6px)} .mobile-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;color:var(--text3);font-size:10px;cursor:pointer;transition:color .15s;border:none;background:none;border-radius:0;min-height:48px} .mobile-nav-item svg{width:22px;height:22px;opacity:.6;transition:opacity .15s} .mobile-nav-item.active{color:var(--primary)} .mobile-nav-item.active svg{opacity:1} .mobile-nav-item:active{background:var(--bg2)} /* 通知中心全屏 */ .notify-panel{width:100vw !important;max-width:100vw !important;right:0 !important;left:0 !important;border-radius:0 !important;max-height:70vh !important} /* 统计卡片 */ .stat-card{padding:12px} .stat-value{font-size:22px} /* Chart 网格 */ .chart-grid{grid-template-columns:1fr} .chart-card canvas{max-height:220px} /* 选择面板 */ .sl-toolbar{flex-wrap:wrap} .sl-toolbar .sl-search{min-width:100px} .sl-list{max-height:220px} .sl-item{padding:12px 14px} .sl-item input[type=checkbox]{width:20px;height:20px} } .nav-badge{background:var(--danger);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;margin-left:auto} .section-title{font-size:14px;font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--primary);display:inline-block} /* Plan cards */ .plan-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px} .plan-card{background:var(--card);border-radius:var(--radius-lg);padding:24px 20px;box-shadow:var(--shadow);border:2px solid var(--border);position:relative;transition:all .2s} .plan-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .plan-card.featured{border-color:var(--primary);background:linear-gradient(180deg,var(--primary-lt) 0%,var(--card) 30%)} .plan-card.featured::before{content:'推荐';position:absolute;top:-1px;right:16px;background:var(--primary);color:#fff;font-size:10px;padding:2px 10px;border-radius:0 0 6px 6px} .plan-name{font-size:16px;font-weight:700;margin-bottom:4px} .plan-en{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px} .plan-price{font-size:28px;font-weight:700;color:var(--primary);margin-bottom:2px} .plan-price small{font-size:13px;font-weight:400;color:var(--text2)} .plan-period{font-size:12px;color:var(--text3);margin-bottom:16px} .plan-features{list-style:none;margin-bottom:16px} .plan-features li{font-size:12px;color:var(--text2);padding:4px 0;display:flex;align-items:center;gap:6px} .plan-features li::before{content:'';display:inline-block;width:1em;height:1em;background:var(--success);-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;font-weight:400} .plan-features li.no::before{content:'—';color:var(--text3);font-weight:400} .plan-count{background:var(--bg2);border-radius:6px;padding:8px 12px;text-align:center;font-size:12px;color:var(--text2)} .plan-count b{font-size:18px;color:var(--text);display:block} @media(max-width:768px){.plan-cards{grid-template-columns:1fr 1fr}} /* ====== EDU Calendar ====== */ .edu-cal-header{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:4px} .edu-cal-dow{text-align:center;font-size:12px;font-weight:600;color:var(--text2);padding:6px 0} .edu-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden} .edu-cal-day{background:var(--card);min-height:90px;padding:4px 6px;cursor:pointer;transition:background .15s} .edu-cal-day:hover{background:var(--bg2)} .edu-cal-day.empty{background:var(--bg);cursor:default} .edu-cal-day.today{box-shadow:inset 0 0 0 2px var(--primary)} .edu-cal-date{font-size:12px;font-weight:600;margin-bottom:2px;color:var(--text)} .edu-cal-day.today .edu-cal-date{color:var(--primary)} .edu-cal-items{display:flex;flex-direction:column;gap:2px} .edu-cal-item{padding:1px 5px;border-radius:3px;color:#fff;font-size:10px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .edu-cal-more{font-size:10px;color:var(--text3);padding-left:5px} /* Switch Toggle */ .switch-wrap{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:8px} .switch-wrap input{display:none} .switch-wrap .slider{width:56px;height:28px;background:#64748B;border:1px solid #475569;border-radius:14px;position:relative;transition:background .2s,border-color .2s;flex-shrink:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)} .switch-wrap .slider::before{content:'OFF';position:absolute;left:30px;top:50%;transform:translateY(-50%);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;opacity:1;transition:opacity .2s} .switch-wrap input:checked + .slider::before{content:'ON';left:7px} .switch-wrap .slider::after{content:'';position:absolute;width:22px;height:22px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.35)} .switch-wrap input:checked + .slider{background:#16A34A;border-color:#15803D} .switch-wrap input:checked + .slider::after{transform:translateX(30px)} .tright{text-align:right} /* Topbar Icon Buttons (unified) */ .notify-bell,.cache-clear,.fullscreen-toggle{ position:relative;width:34px;height:34px;border-radius:10px; background:var(--bg2);color:var(--text2); display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:background .2s,color .2s,transform .1s } .notify-bell:hover,.cache-clear:hover,.fullscreen-toggle:hover{background:var(--primary-lt);color:var(--primary)} .notify-bell:active,.cache-clear:active,.fullscreen-toggle:active{transform:scale(.92)} .notify-bell svg,.cache-clear svg,.fullscreen-toggle svg{width:18px;height:18px;stroke-width:1.8} .notify-badge{position:absolute;top:-3px;right:-3px;background:var(--danger);color:#fff;border-radius:10px;padding:1px 5px;font-size:10px;font-weight:700;min-width:16px;text-align:center;line-height:16px;box-shadow:0 0 0 2px var(--card)} .mobile-nav-item{position:relative} .notify-dot{position:absolute;top:2px;right:50%;transform:translateX(13px);width:9px;height:9px;background:var(--danger);border-radius:50%;box-shadow:0 0 0 2px var(--card);display:none;z-index:2} @media(max-width:768px){.notify-bell{width:30px;height:30px;border-radius:8px}.cache-clear,.fullscreen-toggle{display:none}} /* Notify List */ .notify-item:hover{background:var(--bg2) !important} .notify-item.unread{background:var(--primary-lt)} /* Chart Containers */ .chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;margin-bottom:16px} .chart-card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)} .chart-card .chart-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px} .chart-card canvas{max-height:280px} .chart-full{grid-column:1/-1} .chart-full canvas{max-height:320px} .chart-wide{grid-column:1/-1} .source-charts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px} @media(max-width:768px){.chart-wide{grid-column:auto}} @media(max-width:768px){.source-charts-row{grid-template-columns:1fr}} /* ====== Dashboard KPIs ====== */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px} .kpi-row-sm{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px} .kpi-card{background:var(--card);border-radius:12px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:box-shadow .2s} .kpi-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)} .kpi-label{font-size:13px;color:var(--text3);margin-bottom:6px;font-weight:500} .kpi-value{font-size:28px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:4px} .kpi-value svg{flex-shrink:0} .kpi-sub{font-size:12px;color:var(--text3);margin-top:4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap} .kpi-card-sm{background:var(--card);border-radius:10px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.04);text-align:center} .kpi-card-sm .kpi-label{font-size:11px;margin-bottom:4px} .kpi-value-sm{font-size:20px;font-weight:700;color:var(--text)} /* KPI trend arrows */ .kpi-trend{font-size:12px;font-weight:600;padding:1px 6px;border-radius:4px;white-space:nowrap} .kpi-up{color:#059669;background:rgba(5,150,105,.1)} .kpi-down{color:#DC2626;background:rgba(220,38,38,.1)} .kpi-flat{color:var(--text3);background:var(--bg)} /* Mini lists (source, course, sales) */ .mini-list{padding:2px 0} .mini-title{font-size:13px;font-weight:600;color:var(--text);padding:4px 0 10px} .mini-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px} .mini-row:last-child{border-bottom:none} .mini-label{flex:0 0 auto;min-width:70px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mini-bar-wrap{flex:1;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden} .mini-bar{height:100%;border-radius:3px;transition:width .5s ease} .mini-val{flex:0 0 auto;color:var(--text2);font-weight:500;white-space:nowrap;font-size:11px} /* Alert card */ .alert-card{border-left:4px solid var(--warning);margin-bottom:16px} .alert-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warning);margin-right:6px} .alert-list{display:flex;gap:10px;padding:10px 16px;flex-wrap:wrap} .alert-tag{padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500} .alert-danger{color:#DC2626;background:rgba(220,38,38,.08)} .alert-warn{color:#D97706;background:rgba(217,119,6,.08)} /* Todo card */ .todo-card{border-left:4px solid var(--primary);margin-bottom:16px} .todo-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--primary);margin-right:6px} .todo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;padding:12px} .todo-block{padding:8px} .todo-title{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border)} .todo-item{font-size:12px;padding:5px 0;border-bottom:1px dashed var(--border);display:flex;justify-content:space-between;align-items:center} .todo-item:last-child{border-bottom:none} .todo-item small{color:var(--text3);font-size:11px} .todo-item small.danger{color:var(--danger)} /* 3-column dash grid */ .dash-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px} @media(max-width:768px){.dash-grid-3{grid-template-columns:1fr}} /* Table wrap for overflow */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Ensure chart-wide responsive */ @media(max-width:768px){ .kpi-row{grid-template-columns:1fr 1fr;gap:8px} .kpi-row-sm{grid-template-columns:1fr 1fr 1fr;gap:8px} .kpi-value{font-size:22px} .kpi-value-sm{font-size:17px} .kpi-card{padding:14px} .kpi-card-sm{padding:10px 8px} .kpi-card-sm .kpi-label{font-size:10px} } @media(max-width:380px){ .kpi-row{grid-template-columns:1fr} .kpi-row-sm{grid-template-columns:1fr 1fr} } /* App Footer */ .app-footer{padding:12px 24px;text-align:center;font-size:12px;color:var(--text3);background:var(--bg2);border-top:1px solid var(--border)} @media (max-width:768px){.app-footer{margin-left:0}} /* ====== Selection Panel ====== */ .sl-panel{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card)} .sl-toolbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg)} .sl-toolbar .sl-search{flex:1;min-width:120px;padding:6px 10px 6px 30px;font-size:12px;border:1px solid var(--border2);border-radius:6px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 8px center;outline:none;color:var(--text);transition:border-color .15s} .sl-toolbar .sl-search:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(79,70,229,.1)} .sl-toolbar .sl-search::placeholder{color:var(--text3)} .sl-count{font-size:11px;font-weight:500;color:var(--primary);background:var(--primary-lt);padding:2px 8px;border-radius:10px;margin-left:6px;white-space:nowrap} .sl-list{max-height:280px;overflow-y:auto} .sl-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;font-size:13px;color:var(--text);user-select:none} .sl-item:last-child{border-bottom:none} .sl-item:hover{background:var(--bg2)} .sl-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;margin:0} .sl-item-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .sl-item-name{font-weight:500;font-size:13px;line-height:1.3} .sl-item-meta{font-size:11px;color:var(--text3);line-height:1.3} .sl-group{margin:0} .sl-group-title{font-size:11px;font-weight:600;color:var(--text2);padding:8px 14px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1} .sl-group .sl-item{padding-left:28px} .sl-group .sl-item:last-child{border-bottom:1px solid var(--border)} .sl-empty{padding:32px;text-align:center;color:var(--text3);font-size:13px} .sl-empty svg{margin-bottom:8px;opacity:.4} /* 拨打电话链接 */ .phone-link{display:inline-flex;align-items:center;gap:4px;color:var(--primary);text-decoration:none;font-weight:500;padding:2px 6px;border-radius:4px;transition:all .15s;white-space:nowrap} .phone-link:hover{background:var(--primary-lt);color:var(--primary-dark)} .phone-link svg{flex-shrink:0;opacity:.7} /* ====== CRM 线索管理移动端优化 ====== */ /* Icon button */ .btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text2);cursor:pointer;transition:all .15s} .btn-icon:hover{background:var(--bg2);color:var(--primary);border-color:var(--primary)} /* Lead tabs */ .lead-tabs{display:flex;gap:4px;padding:0 20px 12px;background:var(--bg);border-bottom:1px solid var(--border)} .lead-tab{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap} .lead-tab:hover{background:var(--bg2);color:var(--text)} .lead-tab.active{background:var(--primary);color:#fff} /* Filter chips */ .lead-chips{display:flex;gap:8px;padding:12px 20px;flex-wrap:wrap} .lead-chip{padding:6px 14px;border-radius:16px;font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap} .lead-chip:hover{border-color:var(--primary);color:var(--primary)} .lead-chip.active{background:var(--primary-lt);border-color:var(--primary);color:var(--primary)} .lead-chip-pool.active{background:var(--warning);color:#fff;border-color:var(--warning)} /* Actions row */ /* Search bar */ .lead-search-bar{display:flex;align-items:center;gap:8px;margin:12px 20px;padding:8px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;transition:border-color .15s} .lead-search-bar:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px rgba(79,70,229,.1)} .lead-search-icon{flex-shrink:0;color:var(--text3)} .lead-search-bar input{flex:1;border:none;outline:none;font-size:14px;background:transparent;color:var(--text)} .lead-search-bar input::placeholder{color:var(--text3)} /* PC/Mobile split containers */ .lead-pc{display:block} .lead-mobile{display:none} .stu-pc{display:block} .stu-mobile{display:none} /* ── Mobile: Title bar ── */ .lm-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px} .lm-bar-l{display:flex;align-items:baseline;gap:8px} .lm-title{font-size:19px;font-weight:700;color:var(--text)} .lm-count{font-size:13px;color:var(--text3)} /* ── Mobile: Filter chips ── */ .lm-chips{display:flex;gap:8px;padding:10px 16px 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .lm-chips::-webkit-scrollbar{display:none} .lm-chip{flex-shrink:0;padding:7px 14px;font-size:13px;font-weight:500;color:var(--text2);background:var(--bg);border-radius:20px;cursor:pointer;transition:all .15s;white-space:nowrap;user-select:none} .lm-chip:active{transform:scale(.96)} .lm-chip.on{background:var(--primary);color:#fff} .lm-chip.lm-chip-pool.on{background:#f59e0b;color:#fff} /* ── Mobile: Search ── */ .lm-search{display:flex;align-items:center;gap:8px;margin:0 16px 12px;padding:10px 14px;background:#f1f5f9;border-radius:10px} .lm-search input{flex:1;border:none;background:none;outline:none;font-size:14px;color:var(--text)} .lm-search input::placeholder{color:var(--text3)} /* ── Mobile: Card list ── */ .lm-list{display:flex;flex-direction:column;gap:10px;padding:0 16px 120px} .lm-empty{padding:60px 0;text-align:center;color:var(--text3);font-size:14px} /* Card */ .lm-card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);cursor:pointer;transition:box-shadow .15s} .lm-card:active{box-shadow:0 2px 8px rgba(0,0,0,.08)} /* 2026-08-10 移动端线索卡片新格式 */ .lm-card-body2{padding:14px 14px 0;display:flex;flex-direction:column;gap:6px} .lm-row1,.lm-row2,.lm-row3{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;line-height:1.5} .lm-name2{font-size:15px;font-weight:700;color:var(--text);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lm-parent{color:var(--text2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px} .lm-grade{color:var(--text3);font-size:12px} .lm-info{color:var(--text2);font-size:12px} .lm-sep{color:var(--border);font-size:11px} .lm-tag2{font-size:11px;padding:2px 7px;border-radius:4px;font-weight:500;white-space:nowrap;display:inline-block} .lm-tag2.tag-blue{background:rgba(59,130,246,.1);color:#3b82f6} .lm-tag2.tag-green{background:rgba(5,150,105,.1);color:#059669} .lm-tag2.tag-yellow{background:rgba(245,158,11,.1);color:#d97706} .lm-tag2.tag-red{background:rgba(239,68,68,.1);color:#ef4444} .lm-tag2.tag-purple{background:rgba(139,92,246,.1);color:#8b5cf6} .lm-tag2.tag-cyan{background:rgba(8,145,178,.1);color:#0891b2} .lm-tag2.tag-indigo{background:rgba(99,102,241,.1);color:#6366f1} .lm-tag2.tag-teal{background:rgba(13,148,136,.1);color:#0d9488} .lm-tag2.tag-orange{background:rgba(234,88,12,.1);color:#ea580c} .lm-tag2.tag-amber{background:rgba(217,119,6,.1);color:#d97706} .lm-tag2.tag-slate{background:rgba(100,116,139,.1);color:#64748b} .lm-tag2.tag-gray{background:rgba(148,163,184,.1);color:#94a3b8} .lm-tag2.gray{background:rgba(148,163,184,.1);color:#94a3b8} .lm-urgent{color:#ef4444;font-size:12px;font-weight:500} .lm-next{color:#f59e0b;font-size:12px;font-weight:500} .lm-last{color:var(--text4);font-size:11px} .lm-row-result{font-size:11px;color:var(--text4);line-height:1.5;padding:2px 0 10px;word-break:break-all} .lm-card-body{display:flex;gap:12px;padding:14px 14px 0;align-items:flex-start} .lm-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;flex-shrink:0} .lm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .lm-head{display:flex;align-items:center;gap:8px} .lm-name{font-size:15px;font-weight:600;color:var(--text);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lm-st{font-size:11px;padding:2px 7px;border-radius:4px;font-weight:500;white-space:nowrap;background:var(--bg);color:var(--text3)} .lm-st.tag-blue{background:rgba(59,130,246,.1);color:#3b82f6} .lm-st.tag-green{background:rgba(5,150,105,.1);color:#059669} .lm-st.tag-yellow{background:rgba(245,158,11,.1);color:#d97706} .lm-st.tag-red{background:rgba(239,68,68,.1);color:#ef4444} .lm-st.gray{background:rgba(148,163,184,.1);color:#94a3b8} .lm-phone{font-size:13px} .lm-phone a{color:var(--primary);text-decoration:none;font-weight:500} .lm-course{font-size:12px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Card right side */ .lm-side{text-align:right;flex-shrink:0;display:flex;flex-direction:column;gap:4px;min-width:44px} .lm-side-item{font-size:12px;color:var(--text2);white-space:nowrap} .lm-side-time{font-size:11px;color:var(--text3);white-space:nowrap} .lm-side-owner{font-size:11px;color:var(--text4);white-space:nowrap} /* Card actions - colored buttons */ .lm-actions{display:flex;margin-top:10px;border-top:1px solid var(--border)} .lm-btn{flex:1;padding:11px 0;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;text-align:center;border:none;cursor:pointer;transition:filter .15s} .lm-btn:active{filter:brightness(.88)} .lm-btn+.lm-btn{border-left:1px solid var(--border)} .lm-btn-claim{color:#fff;background:var(--primary)} .lm-btn-follow{color:#fff;background:#3b82f6} .lm-btn-trial{color:#fff;background:#f59e0b} .lm-btn-deal{color:#fff;background:#059669} .lm-btn-edit{color:#fff;background:#f59e0b} /* Pagination */ .lm-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 16px 20px;margin:0} .lm-pager button{padding:8px 16px;font-size:13px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer} .lm-pager button:disabled{opacity:.4;cursor:default} .lm-pager span{font-size:13px;color:var(--text3)} /* FAB */ .lead-fab{display:none;position:fixed;bottom:84px;right:20px;width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:28px;cursor:pointer;box-shadow:0 4px 14px rgba(99,102,241,.4);z-index:990;transition:transform .15s;align-items:center;justify-content:center} .lead-fab:active{transform:scale(.94)} /* ── Mobile breakpoint ── */ @media(max-width:768px){ .lead-pc{display:none !important} .lead-mobile{display:block} .lead-fab{display:flex} .stu-pc{display:none !important} .stu-mobile{display:block} .lm-bar{padding:10px 12px 4px} .lm-title{font-size:17px} .lm-chips{padding:8px 12px 4px} .lm-search{margin:0 12px 10px} .lm-list{padding:0 12px 120px} .lm-pager{padding:8px 12px 20px} } /* ========== 员工手机打卡 ========== */ .att-page{max-width:420px;margin:0 auto;padding:16px 12px 100px} @media(min-width:769px){ .att-page{max-width:100%;padding:16px 20px 40px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start} .att-page>.att-card{flex:1 1 400px;margin-bottom:0} .att-page>.att-records-card{flex:1 1 360px} .att-page>.att-history-card{flex:1 1 360px} .att-clock{font-size:56px} } .att-card{background:var(--card);border-radius:16px;padding:24px 20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)} .att-header{text-align:center;margin-bottom:8px} .att-org{font-size:13px;color:var(--text2)} .att-user{font-size:20px;font-weight:700;color:var(--text);margin-top:4px} .att-date{text-align:center;font-size:14px;color:var(--text2);margin-bottom:4px} .att-clock{text-align:center;font-size:42px;font-weight:300;color:var(--text);letter-spacing:4px;margin:12px 0;font-variant-numeric:tabular-nums} .att-status{text-align:center;font-size:15px;color:var(--text);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:6px} .att-status-done{flex-direction:column} .att-done-icon{width:48px;height:48px;border-radius:50%;background:var(--success);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:4px} .att-btn{display:block;width:100%;padding:20px;border:none;border-radius:50px;font-size:22px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px} .att-btn:active{transform:scale(.97)} .att-btn-in{background:linear-gradient(135deg,#4F46E5,#7C3AED);color:#fff;box-shadow:0 4px 20px rgba(79,70,229,.35)} .att-btn-out{background:linear-gradient(135deg,#F59E0B,#EF4444);color:#fff;box-shadow:0 4px 20px rgba(245,158,11,.35)} .att-btn:disabled{opacity:.6;transform:none} .att-btn-icon{font-size:20px} .att-hint{text-align:center;font-size:12px;color:var(--text3);margin-top:10px} .att-gps{margin-top:12px;text-align:center;font-size:12px;padding:8px 12px;border-radius:8px} .att-gps-ok{background:#ECFDF5;color:#059669} .att-gps-err{background:#FEF2F2;color:#DC2626} .att-records-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:12px} .att-timeline{position:relative;padding-left:0} .att-empty{text-align:center;font-size:13px;color:var(--text3);padding:20px 0} .att-tl-item{display:flex;align-items:flex-start;gap:12px;padding:8px 0;position:relative} .att-tl-item+.att-tl-item{border-top:1px solid var(--border)} .att-tl-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0} .att-dot-in{background:var(--primary)} .att-dot-out{background:var(--warning)} .att-tl-content{flex:1} .att-tl-time{font-size:18px;font-weight:600;color:var(--text)} .att-tl-type{font-size:13px;color:var(--text2)} .att-tl-addr{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .att-history-day{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)} .att-history-date{font-size:14px;color:var(--text);font-weight:500} .att-history-summary{font-size:13px;color:var(--text2)} /* 打卡规则设置 */ .att-settings-card{margin-top:12px} .att-form{padding:12px 0} .att-form-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)} .att-form-row label{font-size:13px;color:var(--text);font-weight:500} .att-form-row input,.att-form-row select{padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;width:160px;background:var(--bg);color:var(--text)} .att-form-row input:focus,.att-form-row select:focus{outline:none;border-color:var(--primary)} /* ========== P2: 加载状态指示器 ========== */ .loading-spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .loading-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px 20px;color:var(--text2);font-size:14px} .loading-skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--border) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px} @keyframes shimmer{to{background-position:-200% 0}} .btn-loading{position:relative;pointer-events:none;opacity:.7} .btn-loading::after{content:'';position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite} /* v97 内联小 spinner（用于按钮内文字前的转圈图标） */ .btn-spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:4px} .btn-outline .btn-spinner,.btn-default .btn-spinner{border-color:rgba(0,0,0,.2);border-top-color:var(--primary)} /* v97 收尾：全局 mutation 进度条（任何 POST/PUT/DELETE 进行时顶部滑动） */ #api-loading-bar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:99999;pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(90deg,var(--primary),transparent);background-size:40% 100%;background-repeat:no-repeat} #api-loading-bar.active{opacity:1;animation:apiBarSlide .8s linear infinite} @keyframes apiBarSlide{0%{background-position:-40% 0}100%{background-position:140% 0}} /* ========== P2: 表单校验样式 ========== */ input.invalid,select.invalid,textarea.invalid{border-color:var(--danger);background:var(--danger-lt)} input.valid,select.valid,textarea.valid{border-color:var(--success)} .form-error{color:var(--danger);font-size:12px;margin-top:4px;display:none} .form-error.show{display:block} .form-group.has-error label{color:var(--danger)} /* ========== P1-3: CRM 移动端通用卡片样式 ========== */ /* 试听/订单/学员/收费 共用的移动端卡片 */ .cm-list{padding:0 12px 120px} .cm-card{background:var(--card);border-radius:12px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden} .cm-card-body{padding:14px} .cm-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;line-height:1.5;margin-bottom:4px} .cm-row:last-child{margin-bottom:0} .cm-name{font-size:16px;font-weight:700;color:var(--text)} .cm-sep{color:var(--text3);font-size:12px} .cm-info{color:var(--text2)} .cm-tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500} .cm-tag-blue{background:var(--info-lt);color:var(--info)} .cm-tag-green{background:var(--success-lt);color:var(--success)} .cm-tag-red{background:var(--danger-lt);color:var(--danger)} .cm-tag-yellow{background:var(--warning-lt);color:var(--warning)} .cm-tag-gray{background:var(--bg2);color:var(--text2)} .cm-tag-purple{background:#F3E8FF;color:#7C3AED} .cm-amount{font-size:18px;font-weight:700;color:var(--danger)} .cm-amount.paid{color:var(--success)} .cm-actions{display:flex;gap:6px;padding:0 14px 12px;flex-wrap:wrap} .cm-actions .btn-sm,.cm-actions .btn-xs{flex:1;min-width:60px;justify-content:center} .cm-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:14px} .cm-search{margin:0 12px 10px;position:relative;display:flex;align-items:center;background:var(--card);border-radius:10px;padding:8px 12px;gap:8px;box-shadow:0 1px 2px rgba(0,0,0,.04)} .cm-search input{border:none;background:transparent;font-size:14px;flex:1;outline:none;padding:0} .cm-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 4px} .cm-bar-title{font-size:17px;font-weight:700;color:var(--text)} .cm-bar-count{font-size:13px;color:var(--text3)} .cm-chips{display:flex;gap:6px;padding:8px 12px 4px;overflow-x:auto;scrollbar-width:none} .cm-chips::-webkit-scrollbar{display:none} .cm-chip{white-space:nowrap;padding:5px 14px;border-radius:16px;font-size:13px;background:var(--card);color:var(--text2);border:1px solid var(--border);cursor:pointer;transition:all .2s} .cm-chip.on{background:var(--primary);color:#fff;border-color:var(--primary)} .cm-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 12px 130px} .cm-pager button{padding:6px 16px;font-size:13px} .cm-pager span{font-size:13px;color:var(--text3)} /* 移动端 PC表格隐藏控制 */ .trial-pc,.deal-pc,.payment-pc,.refund-pc,.complaint-pc,.renewal-pc{display:block} .trial-mobile,.deal-mobile,.payment-mobile,.refund-mobile,.complaint-mobile,.renewal-mobile{display:none} /* ========== P2-4: 增强移动端适配 ========== */ @media(max-width:768px){ /* 通用表格优化 */ .card table{font-size:13px} .card th,.card td{padding:8px 6px} /* 统计卡片 */ .stats-row{grid-template-columns:1fr 1fr;gap:8px} .stat-card{padding:12px 10px} .stat-card .stat-value{font-size:22px} .stat-card .stat-label{font-size:12px} /* 搜索栏 */ .toolbar{flex-direction:column;gap:8px} .toolbar > *{width:100%} .toolbar input,.toolbar select{width:100%} /* 分页 */ .pagination{flex-wrap:wrap;gap:4px} .pagination button{padding:6px 10px;font-size:12px} /* 详情页 */ .detail-grid{grid-template-columns:1fr;gap:8px} .detail-item{padding:6px 0} .detail-item label{font-size:12px} /* 模态框优化 */ .modal-body{max-height:calc(100vh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch} /* 按钮组 */ .card-header{flex-direction:column;align-items:flex-start;gap:8px} .card-header .btn-primary,.card-header .btn-outline{width:100%;justify-content:center} /* 表单 */ .form-section{margin-bottom:12px} .form-section-label{font-size:13px} /* CRM 模块切换 */ .trial-mobile,.deal-mobile,.payment-mobile,.refund-mobile,.complaint-mobile,.renewal-mobile{display:block} .trial-pc,.deal-pc,.payment-pc,.refund-pc,.complaint-pc,.renewal-pc{display:none !important} /* 底部导航 */ .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);z-index:990;padding:6px 0;justify-content:space-around;box-shadow:0 -2px 10px rgba(0,0,0,.06)} .mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 12px;font-size:10px;color:var(--text3);cursor:pointer;transition:color .2s} .mobile-nav-item.active{color:var(--primary)} .mobile-nav-item svg{width:22px;height:22px} /* 看板卡片 */ .dashboard-grid{grid-template-columns:1fr;gap:10px} .chart-container{height:200px} /* KPI/财务/教务页面 */ .kpi-card,.finance-card,.edu-card{margin-bottom:10px} /* tab标签 */ .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .tab{white-space:nowrap} } /* 小屏幕(<=380px)进一步优化 */ @media(max-width:380px){ .stats-row{grid-template-columns:1fr} .lm-row1,.lm-row2,.lm-row3,.cm-row{font-size:12px} .lm-name2,.cm-name{font-size:15px} .content{padding:10px 6px} } /* ========== OA 审批中心 ========== */ .detail-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border2,#e2e8f0);font-size:14px} .detail-row span{color:#64748b;flex-shrink:0} .detail-row b{font-weight:500;text-align:right;word-break:break-all} .oa-item-row .form-control{padding:8px 10px} /* ========== 考核方案模板库 ========== */ .tpl-tabs{display:inline-flex;background:var(--bg2,#f1f5f9);border-radius:8px;padding:3px;gap:2px} .tpl-tab{border:none;background:transparent;padding:6px 14px;font-size:13px;color:var(--text2,#64748b);border-radius:6px;cursor:pointer;transition:all .2s;white-space:nowrap} .tpl-tab:hover{color:var(--text,#1e293b)} .tpl-tab.active{background:var(--card,#fff);color:var(--primary,#2563eb);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)} .tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:14px} .tpl-card{border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:16px;background:var(--card,#fff);display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s;min-height:180px} .tpl-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);border-color:var(--primary,#2563eb)} .tpl-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .tpl-group{display:inline-block;background:var(--primary-lt,rgba(37,99,235,.1));color:var(--primary,#2563eb);font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px} .tpl-count{font-size:12px;color:var(--text3,#94a3b8)} .tpl-title{font-size:16px;font-weight:700;color:var(--text,#1e293b);margin-bottom:8px} .tpl-desc{font-size:13px;line-height:1.6;color:var(--text2,#64748b);margin-bottom:10px;flex:1} .tpl-meta{margin-bottom:12px} .tpl-tag{display:inline-block;background:var(--bg2,#f1f5f9);color:var(--text2,#64748b);font-size:12px;padding:2px 8px;border-radius:4px;margin-right:6px;margin-bottom:4px} .tpl-card-foot{display:flex;gap:8px;justify-content:flex-end} /* ====== Lucide SVG icons (via mask-image) ====== Use: 或 颜色由 currentColor 控制，父元素 color:xxx 即可。 */ i.icon{display:inline-block;width:1em;height:1em;vertical-align:-0.125em; background-color:currentColor;mask-repeat:no-repeat;mask-position:center; mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center; -webkit-mask-size:contain;font-style:normal} i.icon-sm{font-size:14px}i.icon-md{font-size:16px}i.icon-lg{font-size:20px}i.icon-xl{font-size:24px} /* 39 业务图标 */ i.icon-check-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-x-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-circle-check-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-alert-triangle-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-map-pin-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-clipboard-list-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-lightbulb-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-moon-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-maximize-2-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-phone-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-camera-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-zap-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-calendar-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-lock-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-smartphone-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-dollar-sign-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-trophy-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-chart-bar-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-settings-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-building-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-key-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-paperclip-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-refresh-cw-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-monitor-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-hand-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-headphones-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-edit-3-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-rocket-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-package-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-tool-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-printer-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-file-text-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-circle-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} /* 颜色变体（trophy + 状态圆点） */ i.icon-trophy-gold{color:#d4a017} i.icon-trophy-silver{color:#9ca3af} i.icon-trophy-bronze{color:#b45309} i.icon-dot-blue{color:#3b82f6;font-size:.75em} i.icon-dot-yellow{color:#eab308;font-size:.75em} i.icon-dot-green{color:#22c55e;font-size:.75em} i.icon-dot-red{color:#ef4444;font-size:.75em} /* 审批/待办分类图标（v2026.08.29.3） */ i.icon-clock-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-undo-2-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-tag-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} /* ====== 通知列表用图标（v2026.08.24.55） ====== */ i.icon-bell-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-megaphone-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-user-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} /* ====== 我的打卡 PC 仪表盘（v2026.08.24.58） ====== */ .att-dash{display:flex;flex-direction:column;gap:16px} .att-dash-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .att-dash-title{font-size:20px;font-weight:700;color:var(--text)} .att-dash-sub{font-size:13px;color:var(--text3);margin-top:4px} .att-dash-clock{font-size:30px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:1px} .att-dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .att-stat{background:var(--card-bg,#fff);border:1px solid var(--border);border-radius:10px;padding:14px 18px} .att-stat-label{font-size:12px;color:var(--text3);margin-bottom:6px;display:flex;align-items:center;gap:5px} .att-stat-value{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1} .att-stat-unit{font-size:13px;font-weight:400;color:var(--text3);margin-left:2px} .att-dash-body{display:grid;grid-template-columns:minmax(300px,2fr) minmax(380px,3fr);gap:16px;align-items:start} @media (max-width:900px){.att-dash-body{grid-template-columns:1fr}} .att-dash-panel{background:var(--card-bg,#fff);border:1px solid var(--border);border-radius:10px;padding:16px 18px} .att-dash-panel-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center} .att-h-list{max-height:520px;overflow-y:auto;margin:-4px -6px 0 0;padding-right:4px} .att-h-day{display:flex;gap:14px;align-items:flex-start;padding:10px 6px;border-bottom:1px solid var(--border)} .att-h-day:last-child{border-bottom:none} .att-h-date{flex-shrink:0;width:56px;text-align:center} .att-h-daynum{font-size:20px;font-weight:700;color:var(--text);line-height:1.1} .att-h-sub{font-size:11px;color:var(--text3);margin-top:2px} .att-h-chips{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0} .att-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 10px;border-radius:12px;background:var(--bg-secondary,#f5f6f8);color:var(--text2);font-variant-numeric:tabular-nums} .att-chip b{font-weight:600} .att-chip-in b{color:var(--success)} .att-chip-out b{color:var(--warning)} .att-chip-ot b{color:#7c3aed} /* v2026.08.26.81：代理商后台 5 个新 mask（users/clock/trending-up/award/target） */ i.icon-users-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-clock-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-trending-up-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-award-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-target-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-percent-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} i.icon-wallet-mask{mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-image:url("data:image/svg+xml;utf8,")} /* v2026.08.27.89：跟进超期红条 + 表格/卡片行标红 */ .lead-overdue-banner{background:linear-gradient(90deg,#fef2f2 0%,#fee2e2 100%);border:1px solid #fecaca;border-left:4px solid #dc2626;border-radius:8px;padding:10px 16px;margin-bottom:12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s} .lead-overdue-banner:hover{background:linear-gradient(90deg,#fee2e2 0%,#fecaca 100%);box-shadow:0 2px 8px rgba(220,38,38,.12)} .lead-overdue-icon{font-size:18px;color:#dc2626;font-weight:700;flex-shrink:0} .lead-overdue-text{color:#991b1b;font-size:14px;font-weight:500} .lead-overdue-text b{color:#dc2626;font-weight:700;font-size:15px;margin:0 2px} table tbody tr.row-overdue{background:#fef2f2 !important} table tbody tr.row-overdue:hover{background:#fee2e2 !important} .lm-card.lm-card-overdue{border-left:3px solid #dc2626;background:#fef2f2} .lm-card.lm-card-overdue:hover{background:#fee2e2} /* v2026.08.27.92：学员已购课程 chip 多选展示 */ .course-chips{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;vertical-align:middle} .course-chip{display:inline-block;font-size:12px;padding:2px 10px;border-radius:11px;font-weight:500;line-height:1.6;white-space:nowrap} .chip-blue{background:#dbeafe;color:#1d4ed8} .chip-green{background:#d1fae5;color:#047857} .chip-amber{background:#fef3c7;color:#b45309} .chip-purple{background:#ede9fe;color:#6d28d9} .chip-pink{background:#fce7f3;color:#be185d} /* v92 多选 select 选中高亮 */ select[multiple] option:checked{background:var(--primary,#2563eb) linear-gradient(0deg,var(--primary,#2563eb) 0%,var(--primary,#2563eb) 100%);color:#fff;font-weight:600} /* ===== 内联 SVG 小图标（替代 emoji，跨设备渲染一致）===== */ .ico{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:4px;flex:0 0 auto}