:root {
  --font-display: 'Manrope', 'Noto Sans SC', sans-serif;
  --font-body: 'DM Sans', 'Noto Sans SC', sans-serif;
  --app-radius-sm: 4px;
  --app-radius-md: 6px;
  --app-radius-lg: 12px;
  --app-brand: #c4322a;
  --app-brand-pressed: #8e221c;
  --app-brand-soft: #ff8a72;
  --app-primary-strong: color-mix(in srgb, var(--el-color-primary) 72%, #000 28%);
  --brand-mark-size: 38px;
  --brand-mark-radius: var(--app-radius-lg);
  --el-border-radius-base: var(--app-radius-md);
  --el-border-radius-small: var(--app-radius-sm);
  font-family: var(--font-body);
  color: var(--el-text-color-primary);
  background: var(--el-bg-color-page);
  --el-color-primary: #c4322a;
  --el-color-primary-light-3: #d3615b;
  --el-color-primary-light-5: #e19995;
  --el-color-primary-light-7: #f0c2c0;
  --el-color-primary-light-8: #f5d9d8;
  --el-color-primary-light-9: #faeeed;
  --el-color-primary-dark-2: #9d2822;
  --purple: var(--el-color-primary);
  --muted: #909399;
  --line: #e4e7ed;
}
body {
  background: var(--el-bg-color-page);
  color: var(--el-text-color-primary);
}
.el-button--primary {
  --el-button-bg-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
  --el-button-hover-border-color: var(--el-color-primary-dark-2);
  --el-button-active-bg-color: var(--el-color-primary-dark-2);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
}
.el-button--danger {
  --el-button-text-color: #fff;
  --el-button-bg-color: var(--el-color-danger);
  --el-button-border-color: var(--el-color-danger);
  --el-button-hover-bg-color: var(--el-color-danger-dark-2);
  --el-button-hover-border-color: var(--el-color-danger-dark-2);
  color: #fff !important;
  background: var(--el-color-danger) !important;
  border-color: var(--el-color-danger) !important;
}
.el-button--danger:hover {
  background: var(--el-color-danger-dark-2) !important;
  border-color: var(--el-color-danger-dark-2) !important;
}
.el-message-box__btns .el-button--danger {
  color: #fff !important;
  background: var(--el-color-danger) !important;
  border-color: var(--el-color-danger) !important;
}
.eyebrow {
  letter-spacing: 0.7px;
  color: #9298a1;
}
.page-heading h1 {
  font:
    600 23px Arial,
    'Noto Sans SC',
    sans-serif;
  letter-spacing: 0;
  color: #2f343c;
}
.page-heading p {
  color: #818791;
}
.primary-button {
  background: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
  border-radius: var(--app-radius-sm) !important;
  box-shadow: none !important;
}
.primary-button:hover {
  background: var(--el-color-primary-dark-2) !important;
  border-color: var(--el-color-primary-dark-2) !important;
}
.stats-grid {
  gap: 12px;
}
.stat-card,
.panel {
  border-color: #e6e8eb;
  border-radius: var(--app-radius-md);
  box-shadow: none;
}
.stat-card {
  min-height: 116px;
  padding: 14px 16px;
}
.stat-top {
  color: #727983;
}
.stat-icon {
  border-radius: var(--app-radius-sm);
  background: var(--el-color-primary-light-9) !important;
  color: var(--el-color-primary) !important;
}
.stat-value {
  font-family: var(--font-display);
  color: #303640;
}
.stat-foot .positive {
  color: #4d866a;
  background: #eff5f1;
}
.sparkline {
  opacity: 0.42;
}
.positive {
  color: #4d866a;
  background: #eff5f1;
}
.review-count,
.muted-count {
  background: #eef1f4;
  color: #61738a;
}
.chart-svg path:first-of-type {
  fill: var(--el-color-primary-light-8);
}
.chart-svg path:last-of-type {
  stroke: var(--el-color-primary);
}
.view-all,
.row-action {
  color: var(--el-color-primary) !important;
}
.review-art {
  background: #f1f3f5 !important;
  border-radius: var(--app-radius-sm);
  font-size: 0;
}
.review-art:after {
  content: '—';
  font-size: 14px;
  color: #818a95;
}
.review-row .el-tag,
.drama-table .el-tag,
.episode-row .el-tag {
  border-radius: var(--app-radius-sm);
  background: #f0f2f4 !important;
  color: #606b78 !important;
}
.drama-cover {
  border-radius: var(--app-radius-sm);
  box-shadow: none;
  font-size: 14px;
  background: #eceff2 !important;
}
.drama-cover.rose,
.drama-cover.purple,
.drama-cover.peach,
.drama-cover.blue,
.drama-cover.gold {
  background: #eceff2 !important;
}
.drama-table th {
  background: #f7f8fa;
  color: #7d848e;
}
.drama-table td {
  color: #656c76;
}
.drama-cell b {
  color: #343a43;
}
.library-panel {
  padding-left: 18px;
  padding-right: 18px;
}
.library-toolbar .el-tabs__item,
.cover-toolbar .el-tabs__item {
  font-size: 11px;
}
.library-toolbar .el-tabs__item.is-active,
.cover-toolbar .el-tabs__item.is-active {
  color: var(--el-color-primary);
}
.library-toolbar .el-tabs__active-bar,
.cover-toolbar .el-tabs__active-bar {
  background: var(--el-color-primary);
}
.toolbar-filters .el-input__wrapper,
.toolbar-filters .el-select__wrapper,
.drama-select .el-input__wrapper {
  border-radius: var(--app-radius-sm);
}
.episode-panel {
  padding-left: 20px;
  padding-right: 20px;
}
.episode-row {
  border-color: #e7e9ec;
  border-radius: var(--app-radius-sm);
}
.episode-thumb {
  border-radius: var(--app-radius-sm);
  background: #e9ecef;
  color: #7d8792;
}
.episode-thumb .el-icon {
  color: #606a75;
}
.episode-actions .el-button {
  color: #767e88;
}
.cover-grid {
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
}
.cover-card,
.add-cover {
  border-color: #e6e8eb;
  border-radius: var(--app-radius-sm);
}
.poster-art {
  background: #e9ecef !important;
  filter: grayscale(0.72);
}
.poster-art.rose,
.poster-art.purple,
.poster-art.peach,
.poster-art.blue,
.poster-art.gold {
  background: #e9ecef !important;
}
.poster-glow,
.poster-stamp {
  display: none;
}
.poster-emoji {
  font-size: 48px;
  filter: grayscale(1);
  opacity: 0.55;
}
.poster-copy {
  text-shadow: none;
  color: #303640;
}
.poster-copy small,
.poster-copy span {
  color: #606873;
  opacity: 1;
}
.cover-card-info b {
  color: #383e46;
}
.add-cover {
  min-height: 276px;
  background: #fafbfc;
  color: #656d77;
}
.add-cover > span {
  border-radius: var(--app-radius-sm);
  background: #edf0f3;
  color: #68798d;
}
.role-card {
  border-radius: var(--app-radius-sm);
  border-color: #e7e9ec;
}
.role-active {
  border-color: var(--el-color-primary-light-5);
  background: var(--el-color-primary-light-9);
}
.role-icon {
  border-radius: var(--app-radius-sm);
  background: var(--el-color-primary-light-9) !important;
  color: var(--el-color-primary) !important;
}
.role-badge {
  border-radius: var(--app-radius-sm);
  background: #eef1f4;
  color: #65758a;
}
.permission-group h3 .el-icon {
  color: var(--el-color-primary);
}
.permission-group .el-checkbox__input.is-checked .el-checkbox__inner {
  background: var(--el-color-primary);
  border-color: var(--el-color-primary);
}
.permission-note {
  background: #f6f7f8;
  border-radius: var(--app-radius-sm);
}
.el-dialog {
  border-radius: var(--app-radius-md) !important;
}
.el-dialog__header,
.el-dialog__footer {
  border-color: #e8eaed;
}
.upload-area .el-upload-dragger {
  border-radius: var(--app-radius-sm);
  background: #fafbfc;
}
.upload-icon,
.upload-area .el-upload__text em {
  color: var(--el-color-primary);
}
.el-tabs__item,
.el-input__inner,
.el-select__placeholder {
  font-family: var(--font-body);
}
.el-tag.status-badge {
  border-radius: var(--app-radius-sm);
  font-weight: 500;
}
.el-tag.status-badge.is-online {
  --el-tag-bg-color: #e8f8ef;
  --el-tag-border-color: #b7ebc9;
  --el-tag-text-color: #178a4a;
  background: #e8f8ef !important;
  border-color: #b7ebc9 !important;
  color: #178a4a !important;
}
.el-tag.status-badge.is-reviewing {
  --el-tag-bg-color: #fff4e5;
  --el-tag-border-color: #f8d7a8;
  --el-tag-text-color: #d97706;
  background: #fff4e5 !important;
  border-color: #f8d7a8 !important;
  color: #d97706 !important;
}
.el-tag.status-badge.is-draft {
  --el-tag-bg-color: #f2f3f5;
  --el-tag-border-color: #e0e2e6;
  --el-tag-text-color: #6b7280;
  background: #f2f3f5 !important;
  border-color: #e0e2e6 !important;
  color: #6b7280 !important;
}
.el-tag.status-badge.is-pending {
  --el-tag-bg-color: var(--el-color-primary-light-9);
  --el-tag-border-color: var(--el-color-primary-light-7);
  --el-tag-text-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9) !important;
  border-color: var(--el-color-primary-light-7) !important;
  color: var(--el-color-primary) !important;
}
.el-tag.status-badge.is-offline {
  --el-tag-bg-color: #fdecec;
  --el-tag-border-color: #f8c9c9;
  --el-tag-text-color: #d45656;
  background: #fdecec !important;
  border-color: #f8c9c9 !important;
  color: #d45656 !important;
}