/* ========== CSS Variables / Design Tokens ========== */
:root {
    --admin-primary: #409EFF;
    --admin-primary-light: #66b1ff;
    --admin-primary-dark: #3a8ee6;
    --admin-primary-lighter: #ecf5ff;
    --admin-sidebar-bg: #304156;
    --admin-sidebar-hover: #263445;
    --admin-sidebar-active: #409EFF;
    --admin-sidebar-text: #bfcbd9;
    --admin-header-bg: #fff;
    --admin-header-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    --admin-content-bg: #f0f2f5;
    --admin-card-bg: #fff;
    --admin-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --admin-card-hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --admin-text-primary: #303133;
    --admin-text-regular: #606266;
    --admin-text-secondary: #909399;
    --admin-border: #e4e7ed;
    --admin-border-light: #ebeef5;
    --admin-radius: 4px;
    --admin-radius-lg: 8px;
    --admin-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    --admin-gradient: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
}

/* ========== Reset ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #909399;
}

/* ========== Header ========== */
.elc-header {
    background-color: var(--admin-header-bg);
    color: var(--admin-text-primary);
    line-height: 60px;
    box-shadow: var(--admin-header-shadow);
    position: relative;
    z-index: 10;
}

/* ========== Content ========== */
.elc-content {
    border-radius: var(--admin-radius);
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
}

/* ========== Navigation Breadcrumb ========== */
.elc-nav-breadcrumb {
    height: 40px !important;
    border-bottom: 1px solid var(--admin-border);
}

/* ========== Card ========== */
.elc-card {
    background: var(--admin-card-bg);
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-card-shadow);
    transition: var(--admin-transition);
}

.elc-card:hover {
    box-shadow: var(--admin-card-hover-shadow);
}

/* ========== Alignment ========== */
.elc-center {
    margin: 0 auto;
}

.elc-text-center {
    text-align: center;
}

.elc-text-left {
    text-align: left;
}

.elc-text-right {
    text-align: right;
}

/* ========== Margin Helpers ========== */
.elc-ml5 {
    margin-left: 5px;
}

.elc-ml10 {
    margin-left: 10px;
}

.elc-ml20 {
    margin-left: 20px;
}

.elc-ml30 {
    margin-left: 30px;
}

.elc-mb5 {
    margin-bottom: 5px;
}

.elc-mb10 {
    margin-bottom: 10px;
}

.elc-mb15 {
    margin-bottom: 15px;
}

.elc-mb20 {
    margin-bottom: 20px;
}

.elc-mt5 {
    margin-top: 5px;
}

.elc-mt10 {
    margin-top: 10px;
}

.elc-mt15 {
    margin-top: 15px;
}

.elc-mt20 {
    margin-top: 20px;
}

/* ========== Padding Helpers ========== */
.elc-pd5 {
    padding: 5px;
}

.elc-pd10 {
    padding: 10px;
}

.elc-pd15 {
    padding: 15px;
}

.elc-pd20 {
    padding: 20px;
}

/* ========== Display & Float ========== */
.elc-inline {
    float: left;
}

.elc-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ========== Cursor ========== */
.elc-hand {
    cursor: pointer;
}

/* ========== Checkbox & Button Margins ========== */
.elc-checkbox-margin {
    margin-top: 14px;
}

.elc-button-sm-margin {
    margin-top: 6px !important;
}

/* ========== Text Colors ========== */
.elc-color-success {
    color: #67C23A;
}

.elc-color-warning {
    color: #E6A23C;
}

.elc-color-danger {
    color: #F56C6C;
}

.elc-color-info {
    color: #909399;
}

.elc-color-primary {
    color: #409EFF;
}

/* ========== Flex Helpers ========== */
.elc-vertical-center {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.elc-flex {
    display: flex;
}

.elc-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.elc-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.elc-flex-column {
    display: flex;
    flex-direction: column;
}

/* ========== Width Helpers ========== */
.elc-w500 {
    width: 500px;
}

.elc-w800 {
    width: 800px;
}

.elc-w100 {
    width: 100%;
}

/* ========== Text Size Helpers ========== */
.elc-text-sm {
    font-size: 12px;
}

.elc-text-md {
    font-size: 14px;
}

.elc-text-lg {
    font-size: 16px;
}

.elc-text-xl {
    font-size: 18px;
}

.elc-text-bold {
    font-weight: 600;
}

/* ========== Rounded Corners ========== */
.elc-rounded {
    border-radius: var(--admin-radius);
}

.elc-rounded-lg {
    border-radius: var(--admin-radius-lg);
}

/* ========== Shadows ========== */
.elc-shadow {
    box-shadow: var(--admin-card-shadow);
}

/* ========== Transitions ========== */
.elc-transition {
    transition: var(--admin-transition);
}

/* ========== Gradient Backgrounds ========== */
.elc-gradient-primary {
    background: var(--admin-gradient);
}

/* ========== Tags & Badges ========== */
.elc-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 20px;
}

.elc-tag-success {
    background: #f0f9eb;
    color: #67C23A;
    border: 1px solid #e1f3d8;
}

.elc-tag-warning {
    background: #fdf6ec;
    color: #E6A23C;
    border: 1px solid #faecd8;
}

.elc-tag-danger {
    background: #fef0f0;
    color: #F56C6C;
    border: 1px solid #fde2e2;
}

.elc-tag-info {
    background: #f4f4f5;
    color: #909399;
    border: 1px solid #e9e9eb;
}

/* ========== Page Header (for content pages) ========== */
.elc-page-header {
    background: var(--admin-card-bg);
    padding: 16px 20px;
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-card-shadow);
    margin-bottom: 16px;
}

.elc-page-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--admin-text-primary);
}

/* ========== Search/Filter Bar ========== */
.elc-search-bar {
    background: var(--admin-card-bg);
    padding: 16px 20px;
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-card-shadow);
    margin-bottom: 16px;
}

/* ========== Table Container ========== */
.elc-table-container {
    background: var(--admin-card-bg);
    padding: 20px;
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-card-shadow);
}

/* ========== Stat Card ========== */
.elc-stat-card {
    background: var(--admin-card-bg);
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-card-shadow);
    padding: 20px;
    transition: var(--admin-transition);
}

.elc-stat-card:hover {
    box-shadow: var(--admin-card-hover-shadow);
    transform: translateY(-2px);
}

.elc-stat-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--admin-text-primary);
}

.elc-stat-card-label {
    font-size: 14px;
    color: var(--admin-text-secondary);
    margin-top: 4px;
}

/* ========== Fade Transition ========== */
.elc-fade-enter-active,
.elc-fade-leave-active {
    transition: opacity 0.3s ease;
}

.elc-fade-enter,
.elc-fade-leave-to {
    opacity: 0;
}

/* ========== wangEditor 视频上传进度条 ========== */
.video-upload-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-upload-dialog {
    width: 420px;
    max-width: 90vw;
    background: var(--admin-card-bg);
    border-radius: var(--admin-radius-lg);
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.video-upload-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--admin-text-primary);
    margin-bottom: 18px;
}

.video-upload-title i {
    color: var(--admin-primary);
    margin-right: 6px;
}

.video-upload-tip {
    margin-top: 14px;
    font-size: 12px;
    color: var(--admin-text-secondary);
}