:root {
    --cl-primary: #087c98;
    --cl-primary-2: #2eb4ba;
    --cl-primary-light: #e7f5f6;
    --cl-success: #16a34a;
    --cl-danger: #ef4444;
    --cl-bg-page: #fff;
    --cl-bg-container: #fff;
    --cl-bg-sidebar: #fff;
    --cl-bg-popup: #fff;
    --cl-bg-fill: #fff;
    --cl-bg-hover: #f2f7f7;
    --cl-bg: var(--cl-bg-page);
    --cl-card: var(--cl-bg-container);
    --cl-text: #344054;
    --cl-muted: #7b8798;
    --cl-border: #dde5e7;
    --cl-shadow: 0 4px 14px rgba(38, 88, 99, .05);
    --cl-radius: 14px;
    --cl-header: 56px;
    --cl-tab: 44px;
    --el-color-primary: #087c98;
    --el-color-primary-light-3: #52a3b5;
    --el-color-primary-light-5: #83bbc7;
    --el-color-primary-light-7: #b5d7de;
    --el-color-primary-light-8: #d1e7eb;
    --el-color-primary-light-9: #e7f5f6;
    --el-color-primary-dark-2: #066d87;
    --el-text-color-primary: #344054;
    --el-text-color-regular: #475467;
    --el-text-color-secondary: #98a2b3;
    --el-text-color-placeholder: #b0bac2;
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    color: var(--cl-text);
    background: var(--cl-bg)
}

body {
    font-size: 14px
}

.el-button {
    border-radius: 6px !important;
    font-weight: 600
}

.el-input__wrapper, .el-select__wrapper, .el-textarea__inner {
    background: var(--cl-bg-container) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 1px var(--cl-border) inset !important
}

.el-input__wrapper:hover, .el-select__wrapper:hover {
    box-shadow: 0 0 0 1px #a8d5d9 inset !important
}

.el-input__wrapper.is-focus, .el-select__wrapper.is-focused {
    box-shadow: 0 0 0 1px var(--cl-primary) inset !important
}

.el-table {
    --el-table-border-color: #edf1f7 !important;
    --el-table-bg-color: var(--cl-bg-container) !important;
    --el-table-tr-bg-color: var(--cl-bg-container) !important;
    --el-table-header-bg-color: var(--cl-bg-fill) !important;
    --el-table-row-hover-bg-color: var(--cl-bg-hover) !important;
    border-radius: 12px !important;
    overflow: hidden;
    font-size: 14px !important
}

.el-table th.el-table__cell {
    font-weight: 700;
    color: #697386;
    background: var(--cl-bg-fill) !important
}

.el-table th.el-table__cell {
    font-size: 14px !important
}

.el-table td.el-table__cell {
    color: var(--el-text-color-regular)
}

.el-table .cell {
    line-height: 22px
}

.el-pagination {
    --el-pagination-button-border-radius: 8px !important
}

.el-loading-mask {
    background-color: rgba(255, 255, 255, .72) !important;
    backdrop-filter: blur(1px)
}

.el-loading-spinner .circular,
.el-loading-spinner .el-loading-text {
    display: none !important
}

.el-loading-spinner:after {
    display: inline-block;
    color: var(--cl-primary);
    content: "加载中";
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px
}

.el-drawer {
    background: var(--cl-bg-popup) !important;
    box-shadow: -18px 0 42px rgba(23, 35, 61, .16) !important
}

.el-drawer__header {
    height: 64px;
    margin: 0 !important;
    padding: 0 24px !important;
    border-bottom: 1px solid var(--cl-border);
    background: var(--cl-bg-container);
    font-weight: 800;
    color: var(--cl-text) !important
}

.el-drawer__body {
    padding: 22px 24px 86px !important;
    background: var(--cl-bg-popup)
}

.el-drawer__footer {
    padding: 14px 24px !important;
    border-top: 1px solid var(--cl-border);
    background: var(--cl-bg-container)
}

.el-dialog {
    background: var(--cl-bg-popup) !important
}

.el-dialog__header,
.el-dialog__footer {
    background: var(--cl-bg-container)
}

.el-dialog__body {
    background: var(--cl-bg-popup)
}

.el-overlay {
    background: rgba(17, 24, 39, .38) !important
}

.drawer-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 14px 24px !important;
    background: var(--cl-bg-container) !important;
    border-top: 1px solid var(--cl-border) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important
}

.drawer-body {
    padding-bottom: 78px !important
}

.drawer-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    margin: 4px 0 18px
}

.drawer-section-title:before {
    content: "";
    width: 3px;
    height: 16px;
    border-radius: 6px;
    background: var(--cl-primary)
}

.page {
    padding: 16px !important;
    max-height: 100vh;
    overflow: hidden;
    background: var(--cl-bg-page)
}

.toolbar, .panel, .filter-card, .table-card {
    background: var(--cl-bg-container) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--cl-shadow) !important
}

.toolbar {
    padding: 16px 18px !important;
    margin-bottom: 14px !important
}

.title {
    font-size: 18px !important;
    font-weight: 700 !important
}

.desc {
    font-size: 13px !important;
    color: var(--cl-muted) !important;
    margin-top: 4px !important
}

.search {
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important
}

.tag-enable, .status-enable {
    color: #16a34a !important;
    background: #dcfce7 !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-weight: 700
}

.tag-disable, .status-disable {
    color: #ef4444 !important;
    background: #fee2e2 !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-weight: 700
}

.link-btn {
    color: var(--cl-primary);
    cursor: pointer;
    font-weight: 600;
    margin-right: 14px
}

.link-btn:hover {
    text-decoration: underline
}

.el-form-item__label { font-size: 14px !important }

.drawer-form .el-form-item__label { font-size: 14px !important }

.cl-filter-card {
    background: var(--cl-bg-container);
    border: 1px solid var(--cl-border);
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: var(--cl-shadow);
    margin-bottom: 14px
}

.cl-filter-grid {
    display: grid;
    grid-template-columns:repeat(5, minmax(160px, 1fr));
    gap: 16px 20px
}
.cl-filter-item label {
    display: block;
    font-weight: 600;
    color: #29364d;
    margin-bottom: 8px
}

.cl-action-row {
    display: flex;
    gap: 10px;
    margin-top: 16px
}

.cl-table-card {
    background: var(--cl-bg-container);
    border: 1px solid var(--cl-border);
    border-radius: 14px;
    box-shadow: var(--cl-shadow);
    overflow: hidden
}

.cl-table-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 16px;
    border-top: 1px solid var(--cl-border);
    background: var(--cl-bg-container)
}

@media (max-width: 1280px) {
    .cl-filter-grid {
        grid-template-columns:repeat(3, minmax(160px, 1fr))
    }
}