:root {
  --yc-accent: #1769e0;
  --yc-accent-dark: #0e4eaf;
  --yc-accent-soft: #edf5ff;
  --yc-accent-line: #c9def4;
  --yc-ink: #12243d;
  --yc-muted: #61728a;
  --yc-sidebar: #ffffff;
  --yc-page: #f5f8fc;
}

html[data-yc-theme="cyan"] { --yc-accent: #087ca7; --yc-accent-dark: #066487; --yc-accent-soft: #e8f8fc; --yc-accent-line: #b9e1ed; }
html[data-yc-theme="indigo"] { --yc-accent: #4054c4; --yc-accent-dark: #2e3d9b; --yc-accent-soft: #eef0ff; --yc-accent-line: #cfd4f4; }
html[data-yc-theme="teal"] { --yc-accent: #128071; --yc-accent-dark: #0f6c60; --yc-accent-soft: #e8f8f5; --yc-accent-line: #b9e4dc; }

body {
  color: var(--yc-ink);
  background: var(--yc-page);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important;
}

#page-topbar {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--yc-accent-line);
  box-shadow: 0 8px 22px rgba(31, 77, 129, .08) !important;
  backdrop-filter: blur(12px);
}

.navbar-header { height: 72px; }
.navbar-brand-box { display: block !important; width: 250px; background: #fff !important; border-right: 1px solid #edf2f7; }
.logo { line-height: 72px; }
.logo-dark { display: block !important; }
.logo-light { display: none !important; }
.yc-client-brand__full { display: inline-flex; align-items: center; width: 164px; height: 65px; vertical-align: middle; line-height: 1; }
.yc-client-brand .yc-client-brand__image { width: 48px; height: 44px; object-fit: contain; vertical-align: middle; }
.yc-client-brand .yc-client-brand__wordmark { display: block; width: 164px; height: 65px; object-fit: contain; }
.yc-client-brand [hidden] { display: none !important; }
.yc-client-brand__fallback { color: var(--yc-accent-dark); font-size: 24px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.yc-client-brand__fallback--mini { font-size: 18px; letter-spacing: 0; }
.vertical-collpsed .navbar-brand-box { padding: 0 11px; }
.header-item { height: 72px; color: #50627a !important; }
.yc-header-link { display: inline-flex; align-items: center; justify-content: center; position: relative; padding-left: 16px; padding-right: 16px; }
.yc-header-link .bx { line-height: 1; }
#page-header-user-dropdown [key="t-henry"] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-item:hover, .navbar-header .dropdown.show .header-item { color: var(--yc-accent) !important; background: var(--yc-accent-soft) !important; }
.noti-icon i { color: currentColor !important; }
.user-center_header { color: #fff; background: var(--yc-accent); border-radius: 50%; box-shadow: 0 5px 12px rgba(23, 105, 224, .25); }
.yc-theme-picker { position: relative; }
.yc-theme-trigger i { font-size: 21px; line-height: 1; }
.yc-theme-panel[hidden] { display: none !important; }
.yc-theme-panel { position: absolute; top: calc(100% - 1px); right: 0; z-index: 1100; width: 178px; padding: 9px; border: 1px solid var(--yc-accent-line); border-radius: 10px; background: #fff; box-shadow: 0 16px 35px rgba(31, 77, 129, .16); }
.yc-theme-panel__title { padding: 5px 9px 8px; color: var(--yc-muted); font-size: 12px; font-weight: 600; }
.yc-theme-option { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 0; border-radius: 7px; color: var(--yc-ink); background: transparent; font-size: 13px; text-align: left; cursor: pointer; }
.yc-theme-option:hover, .yc-theme-option.is-selected { color: var(--yc-accent-dark); background: var(--yc-accent-soft); }
.yc-theme-option.is-selected { font-weight: 700; }
.yc-theme-option.is-selected::after { margin-left: auto; color: var(--yc-accent); content: "✓"; font-size: 13px; }
.yc-theme-trigger:focus-visible, .yc-theme-option:focus-visible { outline: 2px solid var(--yc-accent); outline-offset: -3px; }
.yc-theme-panel__hint { margin: 6px 4px 0; padding: 8px 5px 2px; border-top: 1px solid #edf2f7; color: #95a2b4; font-size: 10px; }
.yc-theme-swatch { width: 16px; height: 16px; display: inline-block; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 0 0 1px rgba(18,36,61,.1); }
.yc-theme-swatch--blue { background: #1769e0; }.yc-theme-swatch--cyan { background: #087ca7; }.yc-theme-swatch--indigo { background: #4054c4; }.yc-theme-swatch--teal { background: #128071; }

.vertical-menu { top: 72px; width: 250px; background: var(--yc-sidebar) !important; border-right: 1px solid #e7eef6; box-shadow: 7px 0 24px rgba(31, 77, 129, .05) !important; }
.main-content { margin-left: 250px; }
.page-content { padding-top: calc(72px + 26px); }
#sidebar-menu { padding: 17px 0 30px; }
#sidebar-menu::before { display: block; padding: 0 24px 11px; color: #9aabc0; content: "工作台导航"; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
#sidebar-menu ul li a { margin: 4px 12px; padding: .72rem 1rem; border-radius: 10px; color: #586b83 !important; font-size: 13px; transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; }
#sidebar-menu ul li a i { min-width: 1.9rem; color: #8da0b8 !important; font-size: 1.2rem; transition: color .2s ease, transform .2s ease; }
#sidebar-menu ul li a:hover { color: var(--yc-accent-dark) !important; background: var(--yc-accent-soft); transform: translateX(3px); }
#sidebar-menu ul li a:hover i { color: var(--yc-accent) !important; transform: scale(1.08); }
#sidebar-menu ul li.mm-active > a, #sidebar-menu ul li.mm-active > a.active, #sidebar-menu ul li.mm-active > a:hover { color: var(--yc-accent-dark) !important; background: var(--yc-accent-soft) !important; box-shadow: inset 3px 0 0 var(--yc-accent), 0 5px 14px rgba(23, 105, 224, .08); font-weight: 700; transform: translateX(3px); }
#sidebar-menu ul li.mm-active > a i, #sidebar-menu ul li.mm-active > a.active i { color: var(--yc-accent) !important; }
#sidebar-menu ul li ul.sub-menu { padding: 3px 0 4px; }
#sidebar-menu ul li ul.sub-menu li a { margin: 2px 12px 2px 29px; padding: .48rem .8rem .48rem 2.3rem; border-radius: 7px; color: #73849a !important; font-size: 12px; }
#sidebar-menu ul li ul.sub-menu li a:hover, #sidebar-menu ul li ul.sub-menu li.mm-active > a { color: var(--yc-accent-dark) !important; background: var(--yc-accent-soft) !important; }
#sidebar-menu .has-arrow:after { color: #9aacbf; }
.menu-title { padding-left: 24px !important; color: #9aabc0 !important; }

.page-title-box { padding-bottom: 20px; }
.page-title-box h4 { color: var(--yc-ink); font-size: 20px !important; text-transform: none; letter-spacing: 0; }
.breadcrumb { color: var(--yc-muted); }
.card { border: 1px solid #e2eaf3; border-radius: 10px; box-shadow: 0 7px 22px rgba(31, 77, 129, .05); }
.card-header { border-bottom-color: #e7eef6; background: #fff; }
.table thead th { color: #647790; background: #f7faff; border-top: 0; border-bottom-color: #e2eaf3; font-size: 12px; }
.table td { border-color: #edf2f7; color: #52657d; }
.btn-primary, .bg-primary { border-color: var(--yc-accent) !important; background-color: var(--yc-accent) !important; }
.btn-primary:hover, .btn-primary:focus { border-color: var(--yc-accent-dark) !important; background-color: var(--yc-accent-dark) !important; }
a { color: var(--yc-accent); }
.text-primary { color: var(--yc-accent) !important; }
a:hover { color: var(--yc-accent-dark); }
.badge-primary { background-color: var(--yc-accent); }
.progress-bar { background-color: var(--yc-accent); }
.btn-outline-primary { color: var(--yc-accent); border-color: var(--yc-accent); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link, .page-item.active .page-link, .custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: var(--yc-accent); background-color: var(--yc-accent); }
.btn-primary:focus, .btn-outline-primary:focus { box-shadow: 0 0 0 .2rem var(--yc-accent-line); }
.nav-tabs .nav-link.active { color: var(--yc-accent); }
.form-control:focus, .custom-select:focus { border-color: var(--yc-accent); box-shadow: 0 0 0 .18rem var(--yc-accent-soft); }
.dropdown-menu { border: 1px solid #e2eaf3; border-radius: 9px; box-shadow: 0 13px 32px rgba(31, 77, 129, .13); }
.dropdown-item:hover, .dropdown-item:focus { color: var(--yc-accent-dark); background: var(--yc-accent-soft); }
.footer { left: 250px; color: #788ba2; background: #fff; border-top: 1px solid #e7eef6; }

body[data-sidebar="light"].vertical-collpsed .vertical-menu { background: #fff !important; }
body[data-sidebar="light"].vertical-collpsed #sidebar-menu > ul > li:hover > a { color: var(--yc-accent-dark) !important; background: var(--yc-accent-soft) !important; }
body[data-sidebar="light"].vertical-collpsed #sidebar-menu > ul > li:hover > a i { color: var(--yc-accent) !important; }
body[data-sidebar="light"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a { margin: 4px 8px; padding: 15px 16px; }
@media (min-width: 992px) {
  .vertical-collpsed .navbar-brand-box { width: 70px; }
  .vertical-collpsed .main-content { margin-left: 70px; }
  .vertical-collpsed .footer { left: 70px; }
  .vertical-collpsed #sidebar-menu::before { content: ""; padding: 0; height: 10px; }
}

@media (max-width: 991.98px) {
  .navbar-brand-box { width: auto; min-width: 70px; padding: 0 11px; }
  .yc-client-brand .yc-client-brand__image.is-wordmark { width: 86px; }
  .logo-lg { display: none !important; }
  .logo-sm { display: inline-block !important; }
  .footer { left: 0; }
  .main-content { margin-left: 0 !important; }
  .page-content { padding-top: 94px; }
  .vertical-menu { z-index: 1002; }
}
@media (max-width: 600px) {
  .yc-theme-panel { position: fixed; top: 65px; right: 10px; }
  .navbar-header { padding-right: 4px; }
  .header-item { padding: 0 9px; }
  .navbar-header > .d-flex { min-width: 0; }
  .yc-theme-panel { width: 195px; }
}
@media (max-width: 380px) {
  .navbar-brand-box { min-width: 60px; padding: 0 7px; }
  #vertical-menu-btn { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar-menu ul li a, #sidebar-menu ul li a i { transition: none; }
}