[v-cloak] { display: none; }
* { box-sizing: border-box; }
body { margin: 0; color: #172033; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; background: #f5f7fb; }
.login-page { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at 15% 15%, #dceaff, transparent 32%), radial-gradient(circle at 85% 85%, #d8f5ef, transparent 28%), #f7f9fc; }
.login-card { width: 400px; padding: 44px; border-radius: 18px; background: #fff; box-shadow: 0 22px 70px rgba(36, 72, 122, .13); }
.login-brand,.sidebar-brand { display: flex; align-items: center; gap: 10px; color: #172033; font-size: 20px; font-weight: 700; }
.brand-mark { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px; border-radius: 9px; background: linear-gradient(135deg, #3f82ff, #5a61d8); }
.login-card h1 { margin: 38px 0 8px; font-size: 26px; }.login-card p { margin: 0 0 28px; color:#8a94a6; font-size: 14px; }.login-button { width: 100%; height: 42px; margin-top: 4px; }.login-hint { margin-top: 20px; color:#a2abba; text-align:center; font-size:12px; }
.app-shell { min-height:100vh; }.sidebar { position:relative; transition:width .28s cubic-bezier(.4,0,.2,1); overflow:hidden; color:#c6d0df; background:#172033; }.sidebar-brand { height:72px; padding:0 25px; white-space:nowrap; color:#fff; transition:padding .28s cubic-bezier(.4,0,.2,1); }.side-menu { border-right:0; background:transparent; }.side-menu .el-menu-item { display:flex; align-items:center; margin:8px 12px; border-radius:7px; color:#acb9cc; transition:margin .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,0,.2,1),background .2s,color .2s; }.side-menu .el-menu-item i { color:#acb9cc; transition:margin .28s cubic-bezier(.4,0,.2,1),font-size .28s cubic-bezier(.4,0,.2,1); }.side-menu .el-menu-item span { display:inline-block; overflow:hidden; opacity:1; max-width:110px; transition:opacity .16s ease,max-width .28s cubic-bezier(.4,0,.2,1); }.side-menu .el-menu-item:hover { color:#fff; background:#26334a; }.side-menu .el-menu-item.is-active { color:#fff; background:linear-gradient(90deg,#397bf4,#5268dd); }.side-menu .el-menu-item.is-active i { color:#fff; }.sidebar.is-collapsed .sidebar-brand { padding:0; justify-content:center; }.sidebar.is-collapsed .brand-name,.sidebar.is-collapsed .sidebar-footer { opacity:0; max-width:0; overflow:hidden; }.sidebar.is-collapsed .side-menu .el-menu-item { justify-content:center; margin:8px; padding:0!important; }.sidebar.is-collapsed .side-menu .el-menu-item i { margin:0; font-size:19px; }.sidebar.is-collapsed .side-menu .el-menu-item span { opacity:0; max-width:0; }.sidebar-footer { position:absolute; bottom:25px; left:25px; white-space:nowrap; font-size:12px; color:#71819a; transition:opacity .16s ease; }
.topbar { display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 32px; background:#fff; border-bottom:1px solid #edf0f4; }.page-title { display:flex; align-items:center; gap:12px; font-weight:600; font-size:17px; }.menu-trigger { padding:0; width:32px; height:32px; border:0; color:#53647d; font-size:20px; }.menu-trigger:hover { color:#397bf4; background:#edf4ff; }.account { cursor:pointer; display:flex; align-items:center; gap:8px; font-size:14px; color:#526074; }.account-position { padding:2px 7px; border-radius:10px; color:#65738b; font-size:12px; background:#f1f4f8; }.avatar { display:inline-flex; justify-content:center; align-items:center; width:31px; height:31px; color:#4274de; border-radius:50%; background:#e9f0ff; font-weight:700; }
.content { padding:28px 32px; }.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }.toolbar h2 { margin:0 0 7px; font-size:23px; }.toolbar p { margin:0; color:#8893a5; font-size:13px; }.toolbar-actions { display:flex; gap:10px; }.el-card { border-color:#edf0f4; border-radius:10px; }.filter-card { margin-bottom:18px; box-shadow:0 4px 16px rgba(37,62,99,.04); }.filter-card .el-card__body { padding:22px 22px 5px; }.filter-form { display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; }.filter-form .el-input { width:280px; }.filter-form .el-cascader { width:225px; }.filter-form .course-filter { margin-left:18px; }.filter-form .el-date-editor { width:310px; }.filter-form .el-range-separator { width:25px; }.filter-form .el-input__inner { border-color:#dfe5ef; }.filter-form .el-button--primary { padding-left:20px; padding-right:20px; }.table-card .el-card__body { padding:0; }.table-header { height:60px; padding:0 22px; display:flex; align-items:center; justify-content:flex-end; color:#778297; font-size:14px; }.customer-table { width:100%; }.customer-table th { height:52px; background:#f4f7fb!important; color:#42516a; font-size:14px; font-weight:700; letter-spacing:.2px; }.customer-table td { height:50px; font-weight:600; color:#273449; font-size:14px; }.el-table th { background:#fafbfc!important; color:#68758b; font-size:13px; font-weight:600; }.el-table td { color:#3d485b; }.danger-link { color:#f05a63!important; }.table-pagination { display:flex; align-items:center; justify-content:flex-end; min-height:64px; padding:0 20px; }.selection-count { margin-right:auto; color:#397bf4; font-size:14px; font-weight:600; }.pagination { padding:18px 0; text-align:right; }
.drawer-body { padding:4px 24px 30px; }.profile-card { display:flex; align-items:center; padding:22px; margin-bottom:20px; border-radius:10px; background:linear-gradient(110deg,#edf4ff,#f9fbff); }.profile-avatar { width:50px; height:50px; display:flex; justify-content:center; align-items:center; margin-right:14px; border-radius:50%; color:#fff; font-size:20px; background:#5484e7; }.profile-card h3 { margin:0 0 7px; font-size:18px; }.profile-card p { margin:0; color:#78869a; font-size:13px; }.profile-card .el-button { margin-left:auto; }.gender { margin-left:9px; color:#8091aa; font-size:12px; font-weight:normal; }.info-grid { padding:0 7px; }.section-title { display:flex; align-items:center; justify-content:space-between; margin:28px 0 15px; font-weight:600; }.timeline { padding-left:8px; }.record-card { display:flex; justify-content:space-between; padding:13px 15px; border:1px solid #edf0f4; border-radius:7px; background:#fff; }.form-grid { display:grid; grid-template-columns:1fr 1fr; }.form-grid .el-select,.form-grid .el-cascader { width:100%; }.form-grid .wide-field { grid-column:span 2; }.import-dialog p { color:#6f7d92; line-height:1.7; }.import-dialog .el-upload { width:100%; margin-top:12px; }.import-dialog .el-upload-dragger { width:100%; }.strategy-form { margin-top:21px; }
.export-tip { margin-top:0; color:#7d899b; font-size:13px; }.export-scope { display:flex; flex-direction:column; gap:10px; margin:16px 0; }.export-fields { display:grid; grid-template-columns:repeat(3, 1fr); gap:15px 8px; padding:19px 0 4px; }.export-fields .el-checkbox { margin-right:0; }.training-progress { margin-left:12px; }
.column-settings { display:flex; flex-direction:column; gap:3px; }.column-setting { display:flex; align-items:center; min-height:29px; padding:3px 5px; border-radius:4px; cursor:grab; }.column-setting:hover { background:#f2f6ff; }.column-setting i { margin-right:7px; color:#9aa7ba; }.column-setting .el-checkbox { flex:1; margin-right:0; }
@media (max-width: 900px) { .sidebar { width:64px!important; }.sidebar-brand { padding-left:16px; }.sidebar-brand > span:last-child,.side-menu span,.sidebar-footer { display:none; }.content { padding:20px; }.toolbar { align-items:flex-start; flex-direction:column; gap:14px; }.filter-form .el-form-item { margin-bottom:12px; }.form-grid { grid-template-columns:1fr; } }