/* ============ 旺诚在线培训平台 - 设计令牌与公共样式 ============ */
:root{
  --wc-green:#07C160; --wc-green-press:#06AD56;
  --wc-bg:#EDEDED; --wc-card:#fff;
  --wc-text:#191919; --wc-sub:#888; --wc-sub2:#B2B2B2;
  --wc-line:#E5E5E5; --wc-red:#FA5151; --wc-link:#576B95;
  --radius-card:12px; --radius-btn:999px; --radius-input:8px;
  --shadow:0 2px 8px rgba(0,0,0,.06);
  --space:8px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--wc-text); background:var(--wc-bg); font-size:14px; line-height:1.5;
}
a{color:var(--wc-link); text-decoration:none;}
img{max-width:100%;}
button{font-family:inherit;}

/* 按钮 */
.wc-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--wc-green); color:#fff; border:none; border-radius:var(--radius-btn);
  padding:9px 18px; font-size:14px; cursor:pointer; transition:.2s; min-height:40px;}
.wc-btn:hover{background:var(--wc-green-press);}
.wc-btn:active{transform:scale(.98);}
.wc-btn[disabled]{background:#b9e6c9; cursor:not-allowed;}
.wc-btn-ghost{background:#fff; color:var(--wc-green); border:1px solid var(--wc-green);}
.wc-btn-ghost:hover{background:#f2fbf5;}
.wc-btn-sm{padding:6px 12px; min-height:32px; font-size:13px;}
.wc-btn-danger{background:var(--wc-red);}
.wc-btn-danger:hover{background:#e23b3b;}
.wc-btn-grey{background:#f2f2f2; color:#555;}
.wc-link-btn{background:none; border:none; color:var(--wc-link); cursor:pointer; padding:4px 6px; font-size:13px;}
.wc-link-btn.danger{color:var(--wc-red);}

/* 卡片 */
.wc-card{background:var(--wc-card); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:16px; margin-bottom:12px;}
.wc-card-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.wc-card-title h3{margin:0; font-size:16px; font-weight:600;}
.wc-card-title .sub{color:var(--wc-sub); font-size:12px;}

/* 表单 */
.wc-form{display:flex; flex-direction:column; gap:14px;}
.wc-field{display:flex; flex-direction:column; gap:6px;}
.wc-field label{font-size:13px; color:var(--wc-sub);}
.wc-field label .req{color:var(--wc-red); margin-left:2px;}
.wc-input,.wc-select,.wc-textarea{width:100%; border:1px solid var(--wc-line); border-radius:var(--radius-input);
  padding:10px 12px; font-size:14px; background:#fff; color:var(--wc-text); outline:none; transition:.2s;}
.wc-input:focus,.wc-select:focus,.wc-textarea:focus{border-color:var(--wc-green);}
.wc-textarea{min-height:90px; resize:vertical;}

/* 标签页（胶囊） */
.wc-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.wc-tab{padding:7px 16px; border-radius:var(--radius-btn); background:#fff; color:var(--wc-sub);
  cursor:pointer; font-size:13px; border:1px solid var(--wc-line); transition:.2s; white-space:nowrap;}
.wc-tab.active{background:var(--wc-green); color:#fff; border-color:var(--wc-green);}

/* 表格 */
.wc-table{width:100%; border-collapse:collapse; background:#fff; font-size:13px;}
.wc-table th,.wc-table td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--wc-line);}
.wc-table th{background:#fafafa; color:var(--wc-sub); font-weight:600; white-space:nowrap;}
.wc-table tbody tr:hover{background:#fafdfb;}
.wc-table .row-actions{display:flex; gap:4px; flex-wrap:wrap;}

/* 徽标 */
.wc-badge{display:inline-block; padding:2px 9px; border-radius:var(--radius-btn); font-size:12px; background:#eee; color:#666;}
.wc-badge.green{background:rgba(7,193,96,.12); color:var(--wc-green);}
.wc-badge.red{background:rgba(250,81,81,.12); color:var(--wc-red);}
.wc-badge.grey{background:#eee; color:#999;}

/* 空状态 */
.wc-empty{text-align:center; color:var(--wc-sub2); padding:48px 0;}
.wc-empty svg{width:72px; height:72px; opacity:.5; margin-bottom:8px;}

/* 筛选区 */
.wc-filter{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;}
.wc-filter .wc-field{margin:0;}

/* 分页 */
.wc-pager{display:flex; gap:6px; align-items:center; justify-content:flex-end; padding:12px 0; color:var(--wc-sub);}
.wc-pager button{min-width:34px; height:34px; border:1px solid var(--wc-line); background:#fff; border-radius:8px; cursor:pointer;}
.wc-pager button.active{background:var(--wc-green); color:#fff; border-color:var(--wc-green);}
.wc-pager button:disabled{opacity:.5; cursor:not-allowed;}

/* 统计大数字卡片 */
.wc-stat{background:linear-gradient(135deg,rgba(7,193,96,.10),rgba(7,193,96,.04)); border-radius:var(--radius-card);
  padding:16px 18px; flex:1; min-width:130px;}
.wc-stat .num{font-size:26px; font-weight:700; color:var(--wc-text);}
.wc-stat .lab{font-size:12px; color:var(--wc-sub); margin-top:4px;}

/* 弹窗 */
.wc-mask{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:1000; padding:16px;}
.wc-mask.show{display:flex;}
.wc-modal{background:#fff; border-radius:var(--radius-card); width:100%; max-width:520px; max-height:86vh; overflow:auto; padding:20px; animation:pop .2s ease;}
.wc-modal h3{margin:0 0 16px; font-size:17px;}
.wc-modal .modal-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:18px;}
@keyframes pop{from{transform:translateY(12px) scale(.98); opacity:0;} to{transform:none; opacity:1;}}

/* Toast */
.wc-toast{position:fixed; left:50%; top:40%; transform:transl(-50%,-50%); background:rgba(0,0,0,.8); color:#fff;
  padding:10px 18px; border-radius:8px; z-index:2000; font-size:14px; display:none; max-width:80%; text-align:center;}
.wc-toast.show{display:block; animation:toastIn .2s ease;}
@keyframes toastIn{from{opacity:0;} to{opacity:1;}}

/* action sheet */
.wc-sheet-mask{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:1500;}
.wc-sheet-mask.show{display:block;}
.wc-sheet{position:fixed; left:0; right:0; bottom:0; background:#fff; border-radius:16px 16px 0 0; z-index:1501;
  transform:translateY(100%); transition:.25s; padding:8px 0 16px;}
.wc-sheet.show{transform:none;}
.wc-sheet .sheet-item{padding:15px 18px; text-align:center; border-bottom:1px solid var(--wc-line); font-size:15px; cursor:pointer;}
.wc-sheet .sheet-item:last-child{border-bottom:none;}
.wc-sheet .sheet-cancel{margin-top:8px; color:var(--wc-sub);}

/* 顶部进度条 */
.wc-progress-top{position:fixed; top:0; left:0; height:2px; background:var(--wc-green); width:0; z-index:3000; transition:width .2s;}

/* 隐藏元素 */
.hidden{display:none !important;}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.muted{color:var(--wc-sub);}
.nowrap{white-space:nowrap;}
.right{text-align:right;}
.center{text-align:center;}
.flex1{flex:1;}