:root { --primary:#409eff; --primary-dark:#337ecc; --sidebar:#17243b; --sidebar-text:#aebed5; --bg:#f4f6fa; --card:#fff; --text:#273449; --muted:#718096; --border:#e4e9f1; --success:#16a34a; --danger:#dc4545; --el-color-primary:#409eff; --el-font-size-base:14px; --el-border-radius-base:6px; }
* { box-sizing:border-box; }
body { margin:0; min-width:1180px; background:var(--bg); color:var(--text); font-family:Inter,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; font-size:14px; line-height:1.6; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
.app { display:flex; min-height:100vh; }
.sidebar { width:248px; min-width:248px; flex:0 0 248px; position:sticky; top:0; height:100vh; background:#fff; color:#33445c; display:flex; flex-direction:column; border-right:1px solid #e7ecf3; }
.brand { min-height:84px; padding:23px 22px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #edf1f6; flex:0 0 auto; }
.brand h2 { margin:0; font-size:18px; color:var(--el-color-primary); letter-spacing:.5px; font-weight:650; }
.admin-brand-logo { display:block; width:58px; height:22px; flex:0 0 58px; object-fit:contain; }
.admin-sidebar-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px 12px 20px; scrollbar-width:thin; scrollbar-color:#dce3ed transparent; }
.admin-sidebar-loading { padding:24px; color:#94a1b4; font-size:13px; }
.admin-navigation.el-menu { border:0; --el-menu-bg-color:#fff; --el-menu-text-color:#5d6d84; --el-menu-active-color:#409eff; --el-menu-hover-bg-color:#f5f8fc; --el-menu-item-height:44px; --el-menu-sub-item-height:40px; --el-menu-level-padding:20px; }
.admin-navigation>.el-menu-item,.admin-navigation>.el-sub-menu>.el-sub-menu__title { margin:3px 0; border-radius:6px; padding-left:14px!important; height:44px; font-size:14px; }
.admin-navigation .el-sub-menu__title { color:#52637b; }
.admin-navigation .el-sub-menu.is-opened>.el-sub-menu__title { color:#253d60; font-weight:500; }
.admin-navigation .el-menu-item { border-radius:6px; height:40px; line-height:40px; min-width:0; font-size:13px; padding-right:8px!important; }
.admin-navigation .el-sub-menu .el-menu-item { margin:3px 0; padding-left:42px!important; }
.admin-navigation .el-menu-item.is-active { color:#409eff; background:#edf3ff; font-weight:600; }
.admin-navigation .el-sub-menu.is-active>.el-sub-menu__title { color:#409eff; }
.admin-navigation .el-sub-menu__icon-arrow { right:13px; font-size:12px; color:#92a0b3; }
.admin-nav-icon { display:inline-flex; align-items:center; width:20px; height:20px; margin-right:10px; flex:0 0 20px; }
.admin-nav-icon .menu-ico { display:inline-flex; width:18px; height:18px; }
.admin-nav-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.admin-nav-label { white-space:nowrap; }
.admin-sidebar-footer { flex:0 0 auto; padding:12px 14px; border-top:1px solid #edf1f6; background:#fff; }
.admin-sidebar-footer .el-button { width:100%; height:40px; justify-content:flex-start; padding:0 14px; color:#66768b; font-size:14px; }
.admin-sidebar-footer .el-button:hover { color:#dc4545; background:#fff3f3; }
.admin-logout-icon { width:18px; height:18px; margin-right:10px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.content { min-width:0; flex:1; padding:20px 24px 32px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.page-title { font-size:20px; font-weight:600; color:#1c2b42; line-height:1.4; }
.page-subtitle,.admin-page-description { color:var(--muted); font-size:13px; line-height:1.7; margin-top:7px; }
.toolbar,.form-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.card { border:1px solid var(--border); background:#fff; border-radius:8px; padding:16px 18px; margin-bottom:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; min-width:60px; flex-shrink:0; padding:5px 12px; line-height:20px; border:1px solid var(--primary); border-radius:6px; background:var(--primary); color:#fff; font-size:14px; white-space:nowrap; }
.btn-outline { color:#53647c; background:#fff; border-color:#dce3ed; }
.btn-danger { color:#fff; background:#dc4545; border-color:#dc4545; }
.btn:disabled { opacity:.5; }
.input,.select { min-height:32px; padding:5px 10px; border:1px solid #dce3ed; border-radius:6px; background:#fff; font-size:14px; color:var(--text); outline:none; }
.input:focus,.select:focus { border-color:var(--primary); box-shadow:0 0 0 2px #409eff0d; }
textarea.input { resize:vertical; min-height:96px; line-height:1.7; }
.text-muted { color:var(--muted); font-size:13px; }
.badge { display:inline-flex; align-items:center; min-height:22px; padding:1px 7px; font-size:12px; line-height:20px; white-space:nowrap; border-radius:4px; color:#64748b; background:#f1f4f8; }
.badge-success { background:#edf9f1; color:#1a9651; }
.badge-warning { background:#fff6e8; color:#b77c19; }
.table { width:100%; border-collapse:collapse; background:#fff; table-layout:auto; }
.table thead { background:#f6f8fb; }
.table th,.table td { padding:8px 12px; border-bottom:1px solid #edf0f5; font-size:13px; line-height:1.55; text-align:left; vertical-align:middle; }
.table th { height:40px; color:#64748b; font-size:13px; font-weight:500; white-space:nowrap; }
.table td { height:44px; color:#33445c; transition:background-color .12s; }
.table td>img { display:inline-block; vertical-align:middle; max-width:44px; max-height:44px; object-fit:contain; }
.table td .text-muted { font-size:12px; }
.admin-cell-summary { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; line-height:1.6; }
.table tr:hover td { background:#f9fbff; }
.table td .form-row { gap:6px; flex-wrap:wrap; }
.table td:last-child { min-width:100px; }
.table td:last-child .admin-element-host[data-admin-kind=button] { margin:1px 6px 1px 0; }
.admin-table-wrap,.admin-table-scroll { position:relative; width:100%; min-width:0; overflow-x:auto; border:1px solid #edf0f5; border-radius:7px; }
.admin-table-wrap .table,.admin-table-scroll .table { margin:0; }
.admin-action-table { border-collapse:separate; border-spacing:0; }
.admin-action-table>thead>tr>th:last-child,.admin-action-table>tbody>tr>td:last-child:not([colspan]) { position:sticky; right:0; z-index:2; background:#fff; box-shadow:-1px 0 #e4e9f1; }
.admin-action-table>thead>tr>th:last-child { background:#f6f8fb; z-index:3; }
.admin-action-table>tbody>tr:hover>td:last-child:not([colspan]) { background:#f9fbff; }
.admin-row-actions { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.admin-row-action-links,.admin-row-action-tools { display:flex; align-items:center; gap:14px; }
.admin-row-action-tools { gap:8px; }
.table td:last-child .admin-row-actions .admin-element-host[data-admin-kind=button] { margin:0; }
.admin-filter { margin-bottom:16px; padding:0 0 16px; border-bottom:1px solid #edf0f5; }
.admin-filter-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px 16px; align-items:start; max-width:1240px; }
.admin-filter-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:16px; }
.admin-page-actions,.admin-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 18px; }
.admin-list-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.admin-list-actions>.admin-create-action,.admin-list-actions>.admin-create-action+.admin-element-host { order:20; margin-left:auto!important; }
.admin-list-actions>.admin-create-action~.admin-create-action,.admin-list-actions>.admin-create-action~.admin-create-action+.admin-element-host { margin-left:0!important; }
.admin-form,.admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; align-items:start; }
.admin-field { min-width:0; display:flex; flex-direction:column; gap:8px; margin:0; align-items:stretch; }
.admin-field>label,.admin-field-label { display:block; color:#506077; font-size:14px; font-weight:500; min-width:0; line-height:1.5; }
.admin-field-control { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-width:0; }
.admin-field>.input,.admin-field>.select,.admin-field>.admin-element-host:not([data-admin-kind=button]),.admin-field-control>.input,.admin-field-control>.select,.admin-field-control>.admin-element-host:not([data-admin-kind=button]):not([data-admin-kind=checkbox]):not([data-admin-kind=radio]) { width:100%; min-width:0; }
.admin-field-wide { grid-column:1/-1; }
.admin-section { grid-column:1/-1; border:1px solid #e7ecf3; border-radius:8px; padding:16px 18px; background:#fff; margin-bottom:16px; }
.admin-section-title { font-size:15px; font-weight:600; color:#2c405d; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid #edf0f5; }
.admin-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-top:18px; }
.admin-page-footer { margin-top:24px; border:1px solid #e8edf4; border-radius:7px; background:#fff; }
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:28px; background:#15243d66; z-index:4000; }
.modal-content { display:flex; flex-direction:column; width:680px; max-width:calc(100vw - 80px)!important; max-height:calc(100vh - 64px)!important; padding:0!important; background:#fff; color:var(--text); border:1px solid #e5eaf2; border-radius:10px; box-shadow:0 24px 70px #0e1d3c33; overflow:hidden!important; }
.modal-header { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:18px; margin:0!important; padding:14px 20px!important; border-bottom:1px solid #edf0f5; background:#fff; min-height:58px; font-size:16px; font-weight:600; }
.modal-header strong { min-width:0; overflow-wrap:anywhere; }
.admin-dialog-body { flex:1 1 auto; min-height:0; padding:18px 20px; overflow:auto; overscroll-behavior:contain; }
.admin-dialog-footer { flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 20px!important; border-top:1px solid #e8edf4; background:#fafbfd; margin:0!important; }
.modal-content>.admin-dialog-body:last-child { padding-bottom:24px; }
.modal-content>.form-row:not(.admin-dialog-body):not(.modal-header) { flex-shrink:0; }
.admin-dialog-body>.card { box-shadow:none; }
.admin-source { position:absolute!important; opacity:0!important; pointer-events:none!important; width:1px!important; height:1px!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; border:0!important; clip-path:inset(50%)!important; overflow:hidden!important; }
.admin-element-host { display:inline-block; vertical-align:middle; width:220px; min-width:0; max-width:100%; line-height:normal; font-size:14px; }
.admin-element-host[data-admin-kind=button],.admin-element-host[data-admin-kind=checkbox],.admin-element-host[data-admin-kind=radio],.admin-element-host[data-admin-kind=switch] { width:auto; flex-shrink:0; }
.admin-element-host[data-admin-kind=textarea] { width:100%; }
.admin-element-host[data-admin-kind=pagination] { width:auto; }
.admin-element-host[data-admin-for=login-btn] { width:100%; }
.admin-element-host[hidden] { display:none!important; }
.admin-control-label { display:inline-flex!important; align-items:center!important; gap:8px!important; min-height:32px; margin-right:18px; font-size:14px; cursor:pointer; }
.admin-legacy-pagination { display:none!important; }
.admin-component-loading { opacity:.6; }
.el-message { z-index:50000!important; }
.el-overlay { z-index:40000!important; }
.el-message-box { border-radius:10px; padding:20px; }
.el-dialog.admin-feedback-dialog { padding:0; border-radius:10px; overflow:hidden; }
.admin-feedback-dialog .el-dialog__header { padding:20px 24px; margin:0; border-bottom:1px solid var(--border); }
.admin-feedback-dialog .el-dialog__body { padding:24px; font-size:14px; }
.admin-feedback-dialog .el-dialog__footer { padding:16px 24px; border-top:1px solid var(--border); background:#fafbfd; }
.admin-feedback-dialog .el-dialog__headerbtn { top:14px; }
.modal[data-admin-open=true]>.modal-content { animation:admin-dialog-enter .14s ease-out; }
@keyframes admin-dialog-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }