/* ===============================================
   Component Styles — 风屿智航运营部
   =============================================== */

/* ===============================================
   Sidebar Navigation
   =============================================== */

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
}

.sidebar .logo {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding: var(--logo-pad);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: var(--header-h);
  box-sizing: border-box;
}

.sidebar .logo-icon {
  width: var(--logo-icon-size);
  height: var(--logo-icon-size);
  background: var(--primary);
  border-radius: var(--logo-icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar .logo-icon svg {
  width: var(--icon-logo);
  height: var(--icon-logo);
}

.sidebar .logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sidebar .logo-cn {
  font-size: var(--fs-logo-cn);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  letter-spacing: 0.5px;
}

.sidebar .logo-en {
  font-size: var(--fs-logo-en);
  color: var(--text-4);
  letter-spacing: var(--logo-en-ls);
  margin-top: 2px;
}

.sidebar .menu {
  flex: 1;
  padding: 8px 8px;
  overflow-y: auto;
}

.sidebar .menu-section {
  margin-bottom: 2px;
}

.sidebar .menu-section-title {
  font-size: var(--fs-section-title);
  color: var(--text-4);
  font-weight: var(--fw-medium);
  padding: var(--section-title-pad);
  letter-spacing: 0.3px;
}

.sidebar .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--menu-item-h);
  padding: 0 var(--menu-item-px);
  border-radius: 0;
  cursor: pointer;
  color: var(--text-2);
  font-size: var(--fs-menu);
  letter-spacing: 1px;
  transition: background var(--transition-fast),
              color var(--transition-fast);
  position: relative;
  margin-bottom: 1px;
  text-decoration: none;
}

.sidebar .menu-item:hover {
  background: #E8E9EB;
  color: var(--text-1);
}

.sidebar .menu-item:active {
  opacity: 0.85;
}

.sidebar .menu-item.active {
  background: var(--bg-selected);
  color: var(--text-1);
  font-weight: var(--fw-medium);
}

.sidebar .menu-item svg {
  width: var(--icon-menu);
  height: var(--icon-menu);
  flex-shrink: 0;
  stroke-width: 1.5;
}

.sidebar .menu-item > span {
  flex: 1;
}

.sidebar .menu-item .count {
  font-size: var(--fs-count);
  color: var(--text-4);
  background: var(--bg-count);
  padding: var(--count-pad);
  border-radius: var(--radius-badge);
  min-width: var(--count-min-w);
  text-align: center;
}

.sidebar .menu-item.active .count {
  color: var(--text-3);
  background: var(--bg-count-active);
}

.sidebar .user-area {
  border-top: 1px solid var(--border);
  height: var(--user-area-h);
  padding: var(--user-area-pad);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.sidebar .avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: linear-gradient(135deg, #2b2b2f, #0d0d0f);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--avatar-fs);
  font-weight: var(--fw-medium);
  flex-shrink: 0;
}

.sidebar .user-info {
  flex: 1;
  min-width: 0;
}

.sidebar .user-name {
  font-size: var(--fs-table-cell);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  line-height: 1.3;
}

.sidebar .user-role {
  font-size: var(--fs-count);
  color: var(--text-4);
  margin-top: 2px;
}

.sidebar .user-caret {
  color: var(--text-4);
  font-size: var(--fs-micro);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.sidebar .user-area:hover {
  cursor: pointer;
  background: var(--bg-hover);
}

.sidebar .user-area:hover .user-caret {
  transform: rotate(180deg);
}

.sidebar .user-dropdown {
  display: none;
  position: absolute;
  bottom: calc(var(--user-area-h) + 8px);
  left: 12px;
  right: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 6px;
  z-index: 100;
}

.sidebar .user-dropdown.show {
  display: block;
}

.sidebar .user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--radius-btn);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar .user-dropdown .dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

.sidebar .user-dropdown .dropdown-item svg {
  width: 15px;
  height: 15px;
  stroke: var(--text-3);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar .user-dropdown .dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

html[data-theme="dark"] .sidebar .user-area:hover {
  background: var(--bg-hover);
}

html[data-theme="dark"] .sidebar .user-dropdown {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .sidebar .user-dropdown .dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

html[data-theme="dark"] .sidebar .user-dropdown .dropdown-item svg {
  stroke: var(--text-3);
}

html[data-theme="dark"] .sidebar .user-dropdown .dropdown-divider {
  background: var(--border);
}

/* ===============================================
   Header
   =============================================== */

.header {
  height: var(--header-h);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--content-px);
  flex-shrink: 0;
}

.header-left h1 {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  line-height: var(--lh-page-title);
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              font-weight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-left p {
  font-size: var(--fs-page-sub);
  color: var(--text-4);
  margin-top: 6px;
  line-height: var(--lh-page-sub);
}

/* ===============================================
   Buttons
   =============================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--meta-icon-gap);
  height: var(--control-h);
  line-height: 1;
  padding: 0 var(--control-px);
  border-radius: var(--radius-btn);
  font-size: var(--fs-btn);
  font-weight: var(--fw-normal);
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform 0.1s ease;
  font-family: var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
}
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus {
  text-decoration: none;
  outline: none;
}

.btn svg {
  width: var(--icon-toggle);
  height: var(--icon-toggle);
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background: #2A2D35;
}

.btn-primary:active {
  transform: scale(0.97);
  background: #2A2D35;
}

.btn-default {
  background: #FEFFFE;
  color: var(--text-2);
  border: 1px solid var(--border);
}

.btn-default:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
  color: var(--text-1);
}

.btn-default:active {
  transform: scale(0.97);
  border-color: #B8BEC7;
  background: #F3F4F6;
}

/* ---- 通用表格列筛选 + 消费排序（report-compare / summary / week-detail / monthly-summary 复用） ---- */
.rc-colpicker-wrap {
  position: relative;
  display: inline-flex;
  margin-left: 12px;
}
.rc-colpicker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  position: relative;
}
.rc-colpicker-btn.open {
  border-color: var(--primary);
  color: var(--primary);
}
.rc-colpicker-btn svg.col-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.rc-sortcost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  margin-left: 12px;
}
.rc-sortcost-btn svg.col-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.rc-sortcost-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
}
.rc-colpicker-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rc-colpicker-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  max-height: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: rcColPop 140ms cubic-bezier(0.2, 0.9, 0.3, 1);
  transform-origin: top right;
}
.rc-colpicker-pop.open { display: flex; }
@keyframes rcColPop {
  0% { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.rc-colpicker-arrow {
  position: absolute;
  top: -6px;
  right: 40px;
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
  z-index: 1;
}
.rc-colpicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-hover);
}
.rc-colpicker-ops {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}
.rc-colpicker-link {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 12px;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 3px;
  font-family: var(--font-sans);
}
.rc-colpicker-link:hover { background: rgba(var(--primary-rgb), 0.08); }
.rc-colpicker-sep { color: var(--text-4); font-size: 11px; }
.rc-colpicker-list {
  padding: 6px;
  overflow-y: auto;
}
.rc-colpicker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-2);
  user-select: none;
}
.rc-colpicker-item:hover { background: var(--bg-hover); }
.rc-colpicker-check {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.rc-colpicker-check svg {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.15s;
}
.rc-colpicker-item.checked .rc-colpicker-check {
  background: var(--primary);
  border-color: var(--primary);
}
.rc-colpicker-item.checked .rc-colpicker-check svg {
  opacity: 1;
  transform: scale(1);
}
.rc-colpicker-item.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
html[data-theme="dark"] .rc-colpicker-pop {
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
}

.btn-danger {
  background: #FEFFFE;
  color: #E45A5A;
  border: 1px solid #E45A5A;
}

.btn-danger:hover {
  background: #E45A5A;
  color: var(--white);
}

.btn-danger:active {
  transform: scale(0.97);
  background: #C94848;
  border-color: #C94848;
}

/* ============================================================
   导出拆分按钮（split button）— 周报对比页
   组成：主按钮（默认全部导出）+ 下拉箭头（选择单项）+ 弹出菜单
   ============================================================ */
.btn-split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.btn-split > .btn {
  border-radius: 0;
}
.btn-split > .btn:first-child {
  border-top-left-radius: var(--radius-btn);
  border-bottom-left-radius: var(--radius-btn);
}
.btn-split-toggle {
  margin-left: -1px;
  padding: 0 var(--sp-3);
  border-top-right-radius: var(--radius-btn);
  border-bottom-right-radius: var(--radius-btn);
  border-left: 1px solid var(--border);
}
.btn-split-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}
.btn-split-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.btn-split-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 176px;
  background: var(--bg-card, var(--white));
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 6px;
  z-index: 60;
  display: none;
  animation: splitMenuIn var(--transition-fast);
}
.btn-split-menu.show {
  display: block;
}
@keyframes splitMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.btn-split-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-split-item:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
.btn-split-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.btn-split-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}
html[data-theme="dark"] .btn-split-menu {
  background: var(--bg-card, #1E1E1E);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .btn-split-item:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

/* ---- Theme Toggle ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--meta-icon-gap);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-2);
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast),
              transform 0.1s ease;
  font-family: var(--font-sans);
}

.theme-toggle:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
  color: var(--text-1);
}

.theme-toggle:active {
  transform: scale(0.97);
  background: #F3F4F6;
}

.theme-toggle svg {
  width: var(--icon-toggle);
  height: var(--icon-toggle);
}

/* ===============================================
   Form Controls (Select)
   =============================================== */

.select-wrap {
  position: relative;
  display: inline-block;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  height: var(--control-h);
  line-height: 1;
  padding: 0 30px 0 var(--select-px);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-size: var(--fs-select);
  color: var(--text-1);
  cursor: pointer;
  min-width: 130px;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}

.select-wrap select:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
}

.select-wrap select:focus {
  outline: none;
  border-color: #B8BEC7;
}

.select-wrap select:active {
  border-color: #B8BEC7;
  background: #F3F4F6;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-35%);
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--text-4);
  pointer-events: none;
}

/* ===============================================
   Custom Select Dropdown
   =============================================== */

.custom-select {
  position: relative;
  display: inline-block;
  min-width: 130px;
}

.custom-select select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--control-h);
  padding: 0 30px 0 var(--select-px);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-size: var(--fs-select);
  color: var(--text-1);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform 0.1s ease;
  user-select: none;
}

.custom-select-trigger:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
}

.custom-select-trigger:active {
  transform: scale(0.98);
  background: #F3F4F6;
}

.custom-select.open .custom-select-trigger {
  border-color: var(--primary);
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  background: var(--white);
}

.custom-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  stroke: var(--text-4);
  transition: transform var(--transition-fast),
              stroke var(--transition-fast);
  pointer-events: none;
}

.custom-select.open .custom-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  stroke: var(--primary);
}

.custom-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -1px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.custom-select.open .custom-select-dropdown {
  display: block;
  animation: csDropdownIn 0.15s ease-out;
}

@keyframes csDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-select-option {
  padding: 8px 12px;
  font-size: var(--fs-select);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-option:hover {
  background: #F3F4F6;
  color: var(--text-1);
}

.custom-select-option.selected {
  color: var(--primary);
  font-weight: var(--fw-medium);
  background: #F3F4F6;
  position: relative;
  padding-left: 12px;
}

.custom-select-option.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--primary);
  border-radius: 0 1px 1px 0;
}

.custom-select-option.selected::after {
  display: none;
}

.custom-select-option.disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.custom-select-option.disabled:hover {
  background: transparent;
  color: var(--text-disabled);
}

/* ---- Page-size variant ---- */

.custom-select.page-size {
  min-width: auto;
}

.custom-select.page-size .custom-select-trigger {
  height: var(--page-btn-h);
  padding: 0 26px 0 var(--select-px);
  font-size: var(--fs-pagination);
  color: var(--text-3);
}

/* ---- Dark theme ---- */

html[data-theme="dark"] .custom-select-trigger {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-1);
}

html[data-theme="dark"] .custom-select-trigger:hover {
  border-color: #4A4D55;
  background: #23262D;
}

html[data-theme="dark"] .custom-select.open .custom-select-trigger {
  border-color: #E5E7EB;
}

html[data-theme="dark"] .custom-select-arrow {
  stroke: var(--text-4);
}

html[data-theme="dark"] .custom-select.open .custom-select-arrow {
  stroke: var(--text-1);
}

html[data-theme="dark"] .custom-select-dropdown {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .custom-select-option {
  color: var(--text-2);
}

html[data-theme="dark"] .custom-select-option:hover {
  background: #23262D;
  color: var(--text-1);
}

html[data-theme="dark"] .custom-select-option.selected {
  color: var(--text-1);
  background: #23262D;
  position: relative;
  padding-left: 12px;
}

html[data-theme="dark"] .custom-select-option.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--text-1);
  border-radius: 0 1px 1px 0;
}

html[data-theme="dark"] .custom-select-option.selected::after {
  display: none;
}

html[data-theme="dark"] .custom-select.page-size .custom-select-trigger {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-3);
}

/* ===============================================
   Filter Bar
   =============================================== */

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

.filter-left {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
}

.filter-label {
  font-size: var(--fs-filter-label);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-filter-label);
}

.count-badge {
  background: var(--bg-hover);
  color: var(--text-2);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-badge);
  font-weight: var(--fw-medium);
}

/* ===============================================
   Breadcrumb
   =============================================== */

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-page-sub);
  color: var(--text-4);
  margin-left: 16px;
}

.breadcrumb-separator {
  color: var(--text-disabled);
  font-size: 14px;
  margin: 0 8px;
}

.breadcrumb-current {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-page-title);
  line-height: var(--lh-page-title);
}

.header-left h1.is-breadcrumb {
  color: var(--text-4);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color 0.15s ease;
}

.header-left h1.is-breadcrumb:hover {
  color: var(--primary);
}

@keyframes breadcrumbSlideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.breadcrumb-enter {
  animation: breadcrumbSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes listSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.list-view-enter {
  animation: listSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-view-enter {
  animation: listSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--control-h);
}

.form-status-row .status-label {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1;
}

.breadcrumb-link {
  color: var(--text-4);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--primary);
}

/* ===============================================
   User Form
   =============================================== */

.user-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-top: var(--module-gap);
  max-width: 640px;
}

.user-form-card h3 {
  font-size: var(--fs-table-title);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  margin: 0 0 20px 0;
}

.user-form-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
  margin-bottom: 20px;
}

.user-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-form-field.full-width {
  grid-column: 1 / -1;
}

.user-form-field label {
  font-size: var(--fs-footer);
  color: var(--text-3);
  font-weight: var(--fw-medium);
}

.user-form-field label .required {
  color: var(--status-bad);
  margin-left: 2px;
}

.user-form-field input,
.user-form-field select,
.user-form-field textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-size: var(--fs-select);
  color: var(--text-1);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}

.user-form-field textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}

.user-form-field input:focus,
.user-form-field select:focus,
.user-form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.user-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Dark theme for user form */
html[data-theme="dark"] .user-form-card {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .user-form-field input,
html[data-theme="dark"] .user-form-field select,
html[data-theme="dark"] .user-form-field textarea {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-1);
}

html[data-theme="dark"] .user-form-field input:hover,
html[data-theme="dark"] .user-form-field select:hover,
html[data-theme="dark"] .user-form-field textarea:hover {
  border-color: #4A4D55;
}

/* ===============================================
   Summary Cards (Grid)
   =============================================== */

.grid-summary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--card-gap);
  margin-top: var(--filter-gap);
}

/* 概览页：核心数据区域与下方图表的间距收窄（仅作用于首页，不污染汇总页） */
.overview-metrics {
  margin-top: var(--sp-3);
}

/* 概览页：12 卡区域与下方趋势图/分布图区域的间距（仅作用于首页） */
.overview-charts {
  margin-top: var(--sp-6);
}

/* 周报详情页 12 卡锁定为 2×6 布局：桌面/笔记本宽度强制 6 列，避免被全局断点降成 3 列 */
@media (min-width: 1025px) {
  .week-detail-summary {
    grid-template-columns: repeat(6, 1fr);
  }
}

.summary-sub {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 4px;
  line-height: 1.3;
}

.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform 0.15s ease;
}

.summary-card:hover {
  border-color: #B8BEC7;
  transform: translateY(-1px);
}

.summary-label {
  font-size: var(--fs-card-title);
  color: var(--text-4);
  line-height: var(--lh-card-title);
}

.summary-value {
  font-size: var(--fs-card-value);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-card-value);
  margin-top: var(--card-label-mt);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.summary-change {
  font-size: var(--fs-card-change);
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: var(--card-change-mt);
  line-height: var(--lh-card-change);
}

.summary-change .prefix {
  color: var(--text-4);
}

.summary-change .num-up {
  color: var(--trend-up);   /* 数值增加 = 红 */
}

.summary-change .num-down {
  color: var(--trend-down); /* 数值降低 = 绿 */
}

.summary-change .num-flat {
  color: var(--delta-flat);
}

.summary-label .label-icon {
  vertical-align: -2px;
  margin-right: 4px;
}

.summary-value .unit {
  font-size: var(--fs-micro);
  font-weight: var(--fw-normal);
  color: var(--text-3);
}

.table-card-no-bg {
  background: transparent;
  border: none;
  padding: 0;
}

.table-header-no-pad {
  padding: 0;
  margin-bottom: 16px;
}

.summary-change svg {
  width: var(--icon-badge-arrow);
  height: var(--icon-badge-arrow);
}

/* ===============================================
   概览页 · 核心数据区域（两层视觉权重）
   =============================================== */
.metrics-layer {
  display: grid;
  gap: var(--card-gap);
}
/* 核心指标：高视觉权重（3 列，大号数值） */
.metrics-core {
  grid-template-columns: repeat(3, 1fr);
}
/* 辅助指标：低视觉权重（6 列，紧凑、弱化） */
.metrics-aux {
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--sp-4);
}

/* 核心指标卡：数值更大、标签更清晰 */
.summary-card.is-core .summary-value {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
}
.summary-card.is-core .summary-label {
  color: var(--text-2);
  font-weight: var(--fw-medium);
}

/* 辅助指标卡：视觉权重降低（数值更小、标签更弱、隐藏副说明） */
.summary-card.is-aux {
  padding: 14px 16px;
}
.summary-card.is-aux .summary-value {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.2;
}
.summary-card.is-aux .summary-label {
  color: var(--text-4);
}
.summary-card.is-aux .summary-sub {
  display: none;
}

/* ===============================================
   概览页 · 本周表现（简洁列表，无图表）
   =============================================== */
.perf-list {
  display: flex;
  flex-direction: column;
}
.perf-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--border);
}
.perf-item:last-child {
  border-bottom: none;
}
.perf-label {
  font-size: 14px;
  color: var(--text-2);
}
.perf-value {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.perf-delta {
  font-size: 13px;
  white-space: nowrap;
}
.perf-delta.num-up   { color: var(--trend-up); }   /* 增加 = 红 */
.perf-delta.num-down { color: var(--trend-down); } /* 降低 = 绿 */
.perf-delta.num-flat { color: var(--delta-flat); }

/* 概览页：窄屏下两层指标降列，避免拥挤 */
@media (max-width: 1100px) {
  .metrics-core { grid-template-columns: repeat(2, 1fr); }
  .metrics-aux  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .metrics-core { grid-template-columns: 1fr; }
  .metrics-aux  { grid-template-columns: repeat(2, 1fr); }
  .perf-item { grid-template-columns: 1fr auto; row-gap: 4px; }
  .perf-delta { grid-column: 2; }
}

/* ===============================================
   Table Card
   =============================================== */

.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-top: var(--module-gap);
  overflow: hidden;
  transition: border-color var(--transition-fast),
              transform 0.15s ease;
}

.table-card:hover {
  border-color: #B8BEC7;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--table-header-pad);
}

/* ===============================================
   Table Title —— 全站唯一表格标题规范
   ===============================================
   用法：<div class="table-title">标题 <span class="count">（共8条）</span></div>
   - 字号：var(--fs-table-title) = var(--fs-h2) （18px / H2）
   - 重量：var(--fw-semibold) (600) —— 与 Typography 规范 H2 对齐
   - 主色：var(--text-1)
   - 行高：var(--lh-table-title) = var(--lh-h2) （1.4）
   - count / section-meta：13px 浅灰 (var(--text-4)) normal 重量
   - 当需要嵌入搜索框、右侧操作时，inline-flex + baseline 对齐 + gap 自动布局

   ⚠️ 不要再创造 .*-title、.*-section-title 等其他变体，
     一律复用 .table-title。下面是配套的副元素/工具类：
   =============================================== */
.table-title {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-table-title);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-table-title);
  margin: 0;
}

.table-title .count {
  font-weight: var(--fw-normal);
  color: var(--text-4);
  font-size: var(--fs-table-head);
}

/* 副标 / 元信息：用于标题右侧或左侧的简短说明（如 '12 项指标 · ...'）。
   与 .count 同 13px / 浅灰，但允许更长的描述性文本。*/
.table-title .section-meta {
  font-weight: var(--fw-normal);
  color: var(--text-4);
  font-size: var(--fs-table-head);
}

/* 副标右对齐：在 flex 标题行中把该副标推到最右侧（标题/工具仍左对齐） */
.section-meta.align-right {
  margin-left: auto;
}

/* 表格头容器（如需右侧操作/搜索框时使用） */
.table-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--table-header-pad);
  gap: 12px;
}

/* 标题 + 工具栏的轻量布局：当标题不在 .table-card / .table-header 内，
   而是在独立的 block（如 .rc-acc-wrap 等自定义容器内）需要左右分栏时使用。 */
.title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.title-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  /* 与 .title-row 的 gap:12px 协同：标题与工具组的间距由父级 gap 统一提供，
     此处不再叠加 margin，保证与全局汇总页（徽章↔搜索框 12px）一致 */
  margin-left: 0;
}

.table-meta {
  font-size: var(--fs-footer);
  color: var(--text-4);
}

.table-wrap {
  overflow-x: auto;
}

/* ---- Table ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-table-cell);
}

thead th {
  background: var(--bg-table-header);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  text-align: center;
  padding: 0 var(--table-cell-px);
  height: var(--table-row-h);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: var(--fs-table-head);
  line-height: var(--lh-table-head);
}

thead th.num-col {
  text-align: center;
}

tbody td {
  padding: 0 var(--table-cell-px);
  height: var(--table-row-h);
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  white-space: nowrap;
  line-height: var(--lh-table-cell);
  text-align: center;
}

tbody td.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  font-size: var(--fs-data-num);
  line-height: var(--lh-data-num);
}

/* ---- Status Switch ---- */
.status-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
  cursor: pointer;
}

.status-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.status-switch .switch-slider {
  position: absolute;
  inset: 0;
  background: #D1D5DB;
  border-radius: 9999px;
  transition: background var(--transition-fast);
}

.status-switch .switch-slider::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast);
}

.status-switch input:checked + .switch-slider {
  background: var(--primary);
}

.status-switch input:checked + .switch-slider::before {
  transform: translateX(14px);
}

.status-switch input:focus-visible + .switch-slider {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- Toast ---- */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  font-size: 14px;
  color: var(--text-1);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: auto;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-good);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-good) 18%, transparent);
}

.toast.error .toast-dot {
  background: var(--status-bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-bad) 18%, transparent);
}

.toast.info .toast-dot {
  background: #3B82F6;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3B82F6 18%, transparent);
}

.toast.warning .toast-dot {
  background: #F59E0B;
  box-shadow: 0 0 0 3px color-mix(in srgb, #F59E0B 18%, transparent);
}

html[data-theme="dark"] .toast {
  background: #23262D;
  border-color: #3A3F48;
  color: #E5E7EB;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--bg-hover);
}

/* ---- Platform Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 25px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: var(--fs-table-cell, 14px);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--text-1);
  background: #F3F4F6;
  border: 1px solid var(--border);
  white-space: nowrap;
  box-sizing: border-box;
}

.badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-disabled);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}

.badge-douyin::before      { background: var(--badge-dot-douyin); }
.badge-xiaohongshu::before { background: var(--badge-dot-xiaohongshu); }
.badge-shipinhao::before   { background: var(--badge-dot-shipinhao); }
.badge-bilibili::before    { background: var(--text-disabled); }
.badge-gongzhonghao::before{ background: var(--text-disabled); }
.badge-kuaishou::before   { background: var(--text-disabled); }

/* Badge color variants：统一浅灰底 + 深色文字，只保留彩色圆点 */
.badge-color-custom {
  background: #F3F4F6;
  color: var(--text-1);
}
.badge-color-custom::before {
  background: var(--badge-dot, var(--badge-text, var(--text-disabled)));
}

.bg-blue-50 { background-color: #F3F4F6; }
.text-blue-600 { color: var(--text-1); }
.bg-blue-50.text-blue-600::before { background: #2563EB; }

.bg-pink-50 { background-color: #F3F4F6; }
.text-pink-600 { color: var(--text-1); }
.bg-pink-50.text-pink-600::before { background: #DB2777; }

.bg-green-50 { background-color: #F3F4F6; }
.text-green-600 { color: var(--text-1); }
.bg-green-50.text-green-600::before { background: #16A34A; }

.bg-yellow-50 { background-color: #F3F4F6; }
.text-yellow-600 { color: var(--text-1); }
.bg-yellow-50.text-yellow-600::before { background: #CA8A04; }

.bg-purple-50 { background-color: #F3F4F6; }
.text-purple-600 { color: var(--text-1); }
.bg-purple-50.text-purple-600::before { background: #9333EA; }

.bg-orange-50 { background-color: #F3F4F6; }
.text-orange-600 { color: var(--text-1); }
.bg-orange-50.text-orange-600::before { background: #EA580C; }

.bg-gray-50 { background-color: #F3F4F6; }
.text-gray-600 { color: var(--text-1); }
.bg-gray-50.text-gray-600::before { background: #4B5563; }

.bg-red-50 { background-color: #F3F4F6; }
.text-red-600 { color: var(--text-1); }
.bg-red-50.text-red-600::before { background: #DC2626; }

.bg-cyan-50 { background-color: #F3F4F6; }
.text-cyan-600 { color: var(--text-1); }
.bg-cyan-50.text-cyan-600::before { background: #0891B2; }

.bg-indigo-50 { background-color: #F3F4F6; }
.text-indigo-600 { color: var(--text-1); }
.bg-indigo-50.text-indigo-600::before { background: #4F46E5; }

/* Dark theme */
html[data-theme="dark"] .badge {
  background: var(--bg-card);
  color: var(--text-1);
  border-color: var(--border);
}
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-pink-50,
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-orange-50,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-cyan-50,
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .badge-color-custom {
  background-color: var(--bg-card) !important;
  color: var(--text-1) !important;
}

/* ---- Table Cell Helpers ---- */
.account-name {
  color: var(--text-1);
  font-weight: var(--fw-medium);
}

.person-name {
  color: var(--text-3);
}

.text-left {
  text-align: left !important;
}

/* ===============================================
   Pagination
   =============================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pagination-pad);
}

.page-info {
  font-size: var(--fs-pagination);
  color: var(--text-4);
  line-height: var(--lh-pagination);
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  min-width: var(--page-btn-min-w);
  height: var(--page-btn-h);
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-btn);
  font-size: var(--fs-pagination);
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast),
              transform 0.1s ease;
  font-family: var(--font-sans);
}

.page-btn:hover:not(:disabled) {
  border-color: #B8BEC7;
  background: #FFFFFF;
  color: var(--text-1);
}

.page-btn:active:not(:disabled) {
  transform: scale(0.97);
  background: #F3F4F6;
}

.page-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.page-btn:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
  background: var(--bg-disabled);
}

.page-size {
  height: var(--page-btn-h);
  padding: 0 26px 0 var(--select-px);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-size: var(--fs-pagination);
  color: var(--text-3);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}

.page-size:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
}

.page-size:active {
  border-color: #B8BEC7;
  background: #F3F4F6;
}

.page-size:focus {
  outline: none;
  border-color: #B8BEC7;
}

/* ===============================================
   Footer Note
   =============================================== */

.footer-note {
  margin-top: var(--footer-note-mt);
  font-size: var(--fs-footer);
  color: var(--text-4);
  line-height: var(--lh-footer);
}

/* ===============================================
   Welcome Section
   =============================================== */

.welcome-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--module-gap);
}

.welcome-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.welcome-title {
  font-size: var(--fs-greeting);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-greeting);
}

.welcome-title .emoji {
  font-size: var(--greeting-emoji-fs);
  margin-left: 4px;
}

.welcome-sub {
  font-size: var(--fs-greeting-sub);
  color: var(--text-2);
  line-height: var(--lh-greeting-sub);
  background: rgba(0, 0, 0, 0.04);
  padding: 8px 12px;
  border-radius: var(--radius-badge);
}

.welcome-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===============================================
   Week Pills
   =============================================== */

.week-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.week-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  font-size: var(--fs-table-head);
  color: var(--text-3);
  background: var(--bg-hover);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform 0.1s ease;
}

.week-pill:hover {
  background: #FFFFFF;
  color: var(--text-1);
}

.week-pill:active {
  transform: scale(0.97);
}

.week-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-disabled);
}

.week-pill.active {
  background: var(--primary);
  color: var(--white);
}

.week-pill.active .dot {
  background: var(--white);
}

/* ===============================================
   Overview Cards (KPI + Sparkline)
   =============================================== */

.grid-overview {
  display: grid;
  grid-template-columns: repeat(var(--overview-grid-cols), 1fr);
  gap: var(--card-gap);
}

.overview-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform 0.15s ease;
}

.overview-card:hover {
  border-color: #B8BEC7;
  transform: translateY(-1px);
}

.overview-card .summary-value {
  font-size: var(--overview-card-value);
  line-height: var(--overview-card-lh);
}

.overview-card .summary-meta {
  font-size: var(--fs-card-change);
  color: var(--text-4);
  margin-top: var(--card-change-mt);
}

.overview-card .summary-meta .sep {
  color: var(--text-disabled);
  margin: 0 2px;
}

/* ---- Sparkline ---- */
.sparkline {
  position: absolute;
  top: var(--card-pad);
  right: var(--card-pad);
  display: flex;
  align-items: flex-end;
  gap: var(--sparkline-bar-gap);
  height: 28px;
}

.sparkline-bar {
  width: var(--sparkline-bar-w);
  background: var(--sparkline-bar-bg);
  border-radius: var(--radius-badge);
  background: var(--sparkline-bar-bg);
}

.sparkline-bar.active {
  background: var(--sparkline-bar-active);
}

/* ---- Neutral/Flat indicator ---- */
.num-flat {
  color: var(--text-4);
}

/* ===============================================
   History Week Cards
   =============================================== */

.history-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--card-gap);
}

.history-title {
  font-size: var(--fs-table-title);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  line-height: var(--lh-table-title);
}

.history-title .sub {
  font-size: var(--fs-table-head);
  color: var(--text-4);
  font-weight: var(--fw-normal);
  margin-left: 6px;
}

.history-subtitle {
  font-size: var(--fs-footer);
  color: var(--text-4);
  margin-bottom: 16px;
}

.history-subtitle .tip {
  color: #3B82F6;
}

.history-tags {
  display: flex;
  gap: 8px;
  align-items: center;
}

.history-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  font-size: var(--fs-table-head);
  color: var(--text-3);
  background: var(--bg-hover);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform 0.1s ease;
}

.history-tag:hover {
  background: #FFFFFF;
  color: var(--text-1);
}

.history-tag:active {
  transform: scale(0.97);
}

.history-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-disabled);
}

.history-tag.active {
  background: var(--primary);
  color: var(--white);
}

.history-tag.active .dot {
  background: var(--white);
}

/* ---- Toolbar ---- */
.history-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--module-gap);
  flex-wrap: wrap;
}

/* ===============================================
   Search Field —— 全局搜索框（复用 .form-input 基准）
   图标在输入框内部通过 padding-left 让位，文字从图标右侧开始，
   故图标永远不可能被输入文字遮挡；状态继承全局输入框规范。
   用法：
     <div class="search-field">
       <svg class="search-field-icon">…</svg>
       <input type="text" class="search-field-input">
     </div>
   =============================================== */
.search-field {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: min(440px, 100%);
  max-width: 100%;
}
.search-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-4);
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
}
.search-field-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  outline: none;
  box-sizing: border-box;
  font-family: var(--font-sans);
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-field-input::placeholder {
  color: var(--text-4);
}
.search-field-input:hover {
  border-color: var(--border-strong);
}
.search-field-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
}
html[data-theme="dark"] .search-field-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

/* ===============================================
   Table row drag-to-sort（账号管理列表等可拖拽排序表）
   行级 draggable，首列放置拖拽手柄；落点行高亮、拖拽行半透明。
   =============================================== */
#accountTableBody tr[draggable] { cursor: grab; }
#accountTableBody tr[draggable]:active { cursor: grabbing; }
#accountTableBody tr.dragging { opacity: 0.4; }
#accountTableBody tr.drag-over > td:first-child { box-shadow: inset 0 2px 0 0 var(--primary); }
#accountTableBody tr.drag-over { background: var(--bg-soft); }
#accountTableBody .col-drag {
  width: 34px;
  text-align: center;
  color: var(--text-4);
  user-select: none;
  cursor: grab;
}
#accountTableBody .drag-handle {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-4);
}
#accountTableBody .drag-handle:hover { color: var(--text-2); }

.search-input {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-page);
  font-size: 13px;
  color: var(--text-3);
  min-width: min(260px, 100%);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast);
}

.search-input:hover {
  border-color: var(--border-strong);
}

.search-input:focus-within {
  border-color: var(--primary);
  background: var(--bg-page);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
}

.search-input svg {
  width: 14px;
  height: 14px;
  color: var(--text-4);
  flex-shrink: 0;
}

.search-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  color: var(--text-1);
  font-family: var(--font-sans);
}

.search-input input::placeholder {
  color: var(--text-4);
}

.sort-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-card);
  font-size: var(--fs-select);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast),
              transform 0.1s ease;
  font-family: var(--font-sans);
}

.sort-toggle-btn:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
  color: var(--text-1);
}

.sort-toggle-btn:active {
  transform: scale(0.97);
  background: #F3F4F6;
}

.sort-toggle-btn svg {
  width: 13px;
  height: 13px;
  transition: transform var(--transition-fast);
}

.sort-toggle-btn .sort-label {
  font-size: var(--fs-select);
}

.back-this-week {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-card);
  font-size: var(--fs-select);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast),
              transform 0.1s ease;
  font-family: var(--font-sans);
}

.back-this-week:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
  color: var(--text-1);
}

.back-this-week:active {
  transform: scale(0.97);
  background: #F3F4F6;
}

.back-this-week svg {
  width: 13px;
  height: 13px;
}

.history-summary {
  font-size: var(--fs-table-head);
  color: var(--text-4);
  margin-left: auto;
}

/* ---- Week Card Grid ---- */
.grid-week-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
}

.week-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.week-card:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
  transform: translateY(-1px);
}

.week-card:active {
  transform: scale(0.98);
}

.week-card.current {
  /* 默认边框，不做特殊处理 */
}

.week-card.expanded {
  border-color: var(--primary);
  border-width: 1.5px;
}

.week-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.week-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-table-head);
  font-weight: var(--fw-medium);
}

.week-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.week-status.current {
  color: #3B82F6;
}
.week-status.current .dot {
  background: #3B82F6;
}

.week-status.filled {
  color: var(--status-good);
}
.week-status.filled .dot {
  background: var(--status-good);
}

.week-status.empty {
  color: var(--text-4);
}
.week-status.empty .dot {
  background: var(--text-disabled);
}

.week-card-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-4);
  transition: transform var(--transition-fast);
}

.week-card.expanded .week-card-chevron {
  transform: rotate(180deg);
}

.week-card-number {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-h2);
}

.week-card-date {
  font-size: var(--fs-card-change);
  color: var(--text-4);
  line-height: var(--lh-card-change);
}

.week-card-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-card-change);
  color: var(--text-4);
  display: flex;
  align-items: center;
  gap: 4px;
}

.week-card-foot svg {
  width: 12px;
  height: 12px;
}

.week-card-body {
  display: none;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.week-card.expanded .week-card-body {
  display: block;
}

.week-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-card-change);
  padding: 4px 0;
}

.week-card-row .label {
  color: var(--text-4);
}

.week-card-row .value {
  color: var(--text-1);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.week-card-empty-tip {
  text-align: center;
  color: var(--text-4);
  font-size: var(--fs-table-head);
  padding: 8px 0;
}

.week-card-expanded {
  grid-column: 1 / -1;
  margin-top: -8px;
  padding: 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
}

.week-card-detail-table {
  overflow-x: auto;
}

.week-card-detail-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.week-card-detail-table thead {
  background: var(--bg-header);
}

.week-card-detail-table th {
  padding: 10px 12px;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.week-card-detail-table th.text-left,
.week-card-detail-table td.text-left {
  text-align: left;
}

.week-card-detail-table td {
  padding: 10px 12px;
  text-align: center;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.week-card-detail-table tbody tr:last-child td {
  border-bottom: none;
}

.week-card-detail-table tbody tr:hover {
  background: var(--bg-header);
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-badge);
  font-size: 12px;
  font-weight: 400;
}

.status-tag.completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.status-tag.draft {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

@media (max-width: 1280px) {
  .grid-week-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .grid-week-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-week-cards {
    grid-template-columns: 1fr;
  }
  .search-input {
    min-width: auto;
    flex: 1;
  }
}

/* ===============================================
   Dark Theme Overrides
   =============================================== */

html[data-theme="dark"] {
  --bg-page:             #0F1115;
  --bg-sidebar:         #16181D;
  --bg-card:             #1C1F26;
  --bg-soft:             #16181D;
  --bg-header:           #181B20;
  --bg-table-header:     #191C22;
  --bg-hover:            #191C22;
  --bg-selected:         #23262D;
  --bg-disabled:         #191C22;
  --bg-count:            #2A2D35;
  --bg-count-active:     #2A2D35;
  --bg-muted:            #191C22;
  --border:              #2A2D35;
  --border-strong:       #3A3D45;
  --text-1:              #E5E7EB;
  --text-2:              #9CA3AF;
  --text-3:              #6B7280;
  --text-4:              #4B5563;
  --text-disabled:       #4B5563;
  --primary:             #3A3D45;
  --primary-hover:       #4A4D55;
  --sparkline-bar-bg:    #3A3D45;
  --sparkline-bar-active: #3A3D45;
}

html[data-theme="dark"] .sidebar .menu-item:hover {
  background: #23262D;
}

html[data-theme="dark"] .table-card,
html[data-theme="dark"] .summary-card {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] tbody tr:hover {
  background: #23262D;
}

html[data-theme="dark"] .sidebar .menu-item.active {
  background: var(--bg-selected);
  color: var(--text-1);
}

html[data-theme="dark"] .header-left h1,
html[data-theme="dark"] .sidebar .logo-cn {
  color: var(--text-1);
}

html[data-theme="dark"] .theme-toggle {
  background: var(--bg-card);
  color: var(--text-2);
  border-color: var(--border);
}

html[data-theme="dark"] .theme-toggle:hover {
  border-color: #4A4D55;
  background: #23262D;
  color: var(--text-1);
}

html[data-theme="dark"] .btn-default {
  background: var(--bg-card);
  color: var(--text-3);
  border-color: var(--border);
}

html[data-theme="dark"] .btn-default:hover {
  border-color: #4A4D55;
  background: #23262D;
  color: var(--text-1);
}

html[data-theme="dark"] .btn-primary:hover {
  background: #2A2D35;
}

html[data-theme="dark"] .btn-danger {
  background: var(--bg-card);
  color: #E45A5A;
  border-color: #E45A5A;
}

html[data-theme="dark"] .btn-danger:hover {
  background: #E45A5A;
  color: var(--white);
}

html[data-theme="dark"] .page-btn {
  background: var(--bg-card);
  color: var(--text-3);
  border-color: var(--border);
}

html[data-theme="dark"] .page-btn:hover:not(:disabled) {
  border-color: #4A4D55;
  background: #23262D;
  color: var(--text-1);
}

html[data-theme="dark"] .page-btn.active {
  background: #E5E7EB;
  color: var(--text-1);
  border-color: #E5E7EB;
}

html[data-theme="dark"] .page-size,
html[data-theme="dark"] .select-wrap select {
  background: var(--bg-card);
  color: var(--text-1);
  border-color: var(--border);
}

html[data-theme="dark"] .page-size:hover,
html[data-theme="dark"] .select-wrap select:hover {
  border-color: #4A4D55;
  background: #23262D;
}

html[data-theme="dark"] .overview-card {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .overview-card:hover {
  border-color: #4A4D55;
}

html[data-theme="dark"] .table-card:hover,
html[data-theme="dark"] .summary-card:hover {
  border-color: #4A4D55;
}

html[data-theme="dark"] .search-input:hover {
  border-color: #4A4D55;
}

html[data-theme="dark"] .sort-toggle:hover {
  border-color: #4A4D55;
  background: #23262D;
  color: var(--text-1);
}

html[data-theme="dark"] .back-this-week:hover {
  border-color: #4A4D55;
  background: #23262D;
  color: var(--text-1);
}

html[data-theme="dark"] .week-card:hover {
  border-color: #4A4D55;
  background: #23262D;
}

html[data-theme="dark"] .history-tag:hover {
  background: #23262D;
  color: var(--text-1);
}

html[data-theme="dark"] .sparkline-bar {
  background: #3A3D45;
}

html[data-theme="dark"] .sparkline-bar.active {
  background: #E5E7EB;
}

html[data-theme="dark"] .week-pill:hover {
  background: #23262D;
  color: var(--text-1);
}

html[data-theme="dark"] .week-pill {
  background: #3A3D45;
  color: var(--text-3);
}

html[data-theme="dark"] .week-pill .dot {
  background: var(--text-disabled);
}

html[data-theme="dark"] .week-pill.active {
  background: var(--primary);
  color: var(--white);
}

html[data-theme="dark"] .week-pill.active .dot {
  background: var(--white);
}

html[data-theme="dark"] .welcome-sub {
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3A3D45;
}

html[data-theme="dark"] .week-card {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .week-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

html[data-theme="dark"] .week-card.expanded {
  border-color: #E5E7EB;
}

html[data-theme="dark"] .search-field,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .sort-toggle-btn,
html[data-theme="dark"] .back-this-week {
  background: var(--bg-card);
  color: var(--text-2);
  border-color: var(--border);
}

html[data-theme="dark"] .search-input:hover {
  border-color: var(--border-strong);
}

html[data-theme="dark"] .search-input:focus-within {
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .sort-toggle-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
  color: var(--text-1);
}

html[data-theme="dark"] .back-this-week:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
  color: var(--text-1);
}

html[data-theme="dark"] .sort-toggle-btn {
  border-color: var(--border);
}

html[data-theme="dark"] .search-field-input,
html[data-theme="dark"] .search-input input {
  color: var(--text-1);
}

/* ===============================================
   Confirm Dialog
   =============================================== */

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.confirm-overlay.show {
  opacity: 1;
  visibility: visible;
}

.confirm-dialog {
  background: var(--bg-card);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  min-width: min(320px, calc(100vw - 32px));
  max-width: 400px;
  padding: 24px;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.2s ease;
}

.confirm-overlay.show .confirm-dialog {
  transform: scale(1) translateY(0);
}

.confirm-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  margin: 0 0 8px 0;
}

.confirm-message {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirm-actions .btn {
  min-width: 80px;
}

html[data-theme="dark"] .confirm-overlay {
  background: rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .confirm-dialog {
  background: var(--bg-card);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .history-tag {
  background: #1F2229;
  color: var(--text-3);
}

html[data-theme="dark"] .history-tag:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

html[data-theme="dark"] .week-card-foot {
  border-top-color: var(--border);
}

html[data-theme="dark"] .week-card-body {
  border-top-color: var(--border);
}

/* ===============================================
   New Overview - KPI Cards
   =============================================== */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  gap: 16px;
  transition: border-color 0.15s ease;
}

.kpi-card:hover {
  border-color: #B8BEC7;
}

.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon svg {
  width: 22px;
  height: 22px;
}

.kpi-icon-cost {
  background: rgba(79, 70, 229, 0.1);
  color: #4F46E5;
}

.kpi-icon-conv {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.kpi-icon-fans {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.kpi-icon-article {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.kpi-icon-transform {
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
}

.kpi-content {
  flex: 1;
  min-width: 0;
}

.kpi-label {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 8px;
}

.kpi-value {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  line-height: var(--lh-display);
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.kpi-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-4);
}

.kpi-change-arrow {
  font-weight: 500;
}

.kpi-change-arrow.kpi-up {
  color: var(--trend-up);   /* 数值增加 = 红 */
}

.kpi-change-arrow.kpi-down {
  color: var(--trend-down); /* 数值降低 = 绿 */
}

.kpi-change-arrow.kpi-flat {
  color: var(--delta-flat);
}

@media (max-width: 1280px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===============================================
   Charts Row
   =============================================== */

.chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chart-legend {
  display: flex;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.legend-green { background: #10B981; }
.legend-blue { background: #3B82F6; }
.legend-purple { background: #8B5CF6; }
.legend-orange { background: #F59E0B; }

/* 概览页：图例可点击切换系列显隐 */
.chart-legend .legend-item {
  cursor: pointer;
  user-select: none;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.chart-legend .legend-item:hover {
  background: var(--bg-hover, rgba(0,0,0,0.04));
}
/* 选中态：实色文字 + 浅底 + 描边，明确「已选」 */
.chart-legend .legend-item.is-on {
  color: var(--text-1);
  background: var(--bg-hover, rgba(0,0,0,0.05));
  border-color: var(--border);
}
/* 未选态：灰字 + 删除线 + 灰点 + 降透明，明确「未选」 */
.chart-legend .legend-item.is-off {
  opacity: 0.55;
  color: var(--text-4);
  text-decoration: line-through;
}
.chart-legend .legend-item.is-off .legend-dot {
  background: var(--text-4) !important;
}

.chart-body {
  position: relative;
}

/* 图例点击时的全局缩放反馈：先缩小再放大 */
.chart-body.chart-pop #trendChart {
  animation: chart-pop 280ms ease;
  transform-origin: center center;
}
@keyframes chart-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.trend-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid .grid-line {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3, 3;
}

.chart-y-labels text,
.chart-y-labels-left text,
.chart-y-labels-right text,
.chart-x-labels text {
  font-size: 11px;
  fill: var(--text-4);
  font-family: var(--font-sans);
}
.chart-y-labels-right text { text-anchor: start; }

.trend-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-green { stroke: #10B981; }
.trend-blue { stroke: #3B82F6; }
.trend-purple { stroke: #8B5CF6; }
.trend-orange { stroke: #F59E0B; }

.dot {
  fill: var(--bg-card);
  stroke-width: 2;
}

.dot-green { stroke: #10B981; }
.dot-blue { stroke: #3B82F6; }
.dot-purple { stroke: #8B5CF6; }
.dot-orange { stroke: #F59E0B; }

/* 未填报周：空心缺口点（浅描边 + 透明填充），明确区别于「已填但为 0」的实心点 */
.dot-empty {
  fill: transparent;
  stroke: var(--text-4);
  stroke-width: 1.5;
  stroke-dasharray: 2, 2;
}

/* 概览折线图：鼠标吸附层（垂直参考线 + 最近节点高亮） */
.hover-guide {
  stroke: var(--text-4);
  stroke-width: 1;
  stroke-dasharray: 4, 3;
  opacity: 0.55;
  pointer-events: none;
}
.hover-dot {
  fill: var(--bg-card);
  stroke-width: 2.5;
  pointer-events: none;
}
.hover-dot-likes  { stroke: #10B981; }
.hover-dot-conv   { stroke: #3B82F6; }
.hover-dot-cost   { stroke: #F59E0B; }
.hover-dot-unit   { stroke: #8B5CF6; }

/* 概览折线图：气泡提示（列出已开启指标具体数值） */
.trend-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 132px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* 阴影调轻，避免压过图表内容 */
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.06);
  pointer-events: none;
  font-family: var(--font-sans);
  /* 进出双向过渡：默认隐藏；加 .is-visible 后淡入 + 轻微上浮，消失时淡出回落，更柔和避免突兀 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(0.98);
  transform-origin: top left;
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              left 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
              top 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s linear 220ms;
  will-change: opacity, transform, left, top;
}
.trend-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              left 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
              top 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s;
}
/* 未填报周提示 */
.trend-tooltip .tt-empty {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 2px 0;
}
.trend-tooltip .tt-date {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.trend-tooltip .tt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.9;
}
.trend-tooltip .tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.trend-tooltip .tt-label {
  color: var(--text-3);
  margin-right: auto;
}
.trend-tooltip .tt-val {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

@media (max-width: 1024px) {
  .chart-row {
    grid-template-columns: 1fr;
  }
}

/* ===============================================
   Ring Chart
   =============================================== */

.chart-body-ring {
  display: flex;
  gap: 24px;
  align-items: center;
}

.ring-chart {
  flex-shrink: 0;
}

.ring-svg {
  width: 180px;
  height: 180px;
}

.ring-center-value {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  fill: var(--text-1);
  font-family: var(--font-mono);
}

.ring-center-label {
  font-size: 12px;
  fill: var(--text-4);
  font-family: var(--font-sans);
}

.ring-segment {
  transition: opacity 0.15s;
}

.ring-segment:hover {
  opacity: 0.8;
}

.ring-legend {
  flex: 1;
  min-width: 0;
}

.ring-legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.ring-legend-item:last-child {
  border-bottom: none;
}

.ring-legend-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ring-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.ring-legend-name {
  font-size: 13px;
  color: var(--text-2);
}

.ring-legend-values {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ring-legend-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.ring-legend-pct {
  font-size: 12px;
  color: var(--text-4);
  min-width: 42px;
  text-align: right;
}

@media (max-width: 1280px) {
  .chart-body-ring {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===============================================
   Account Table
   =============================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  background: var(--bg-header);
}

.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 12px 14px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-1);
  background: #F3F4F6;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* 平台分色圆点（复用全站 --badge-dot-* 变量） */
.platform-badge::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-disabled);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.04);
}
.platform-badge.badge-douyin::before      { background: var(--badge-dot-douyin); }
.platform-badge.badge-xhs::before         { background: var(--badge-dot-xiaohongshu); }
.platform-badge.badge-shipinhao::before   { background: var(--badge-dot-shipinhao); }
.platform-badge.badge-bilibili::before    { background: var(--text-disabled); }
.platform-badge.badge-kuaishou::before    { background: var(--text-disabled); }
.platform-badge.badge-weibo::before       { background: var(--text-disabled); }
.platform-badge.badge-default::before     { background: var(--text-disabled); }

/* ---- 全局表格对齐设定（与 summary / report-compare 一致）---- */
.data-table th.num-col {
  text-align: right;
}
.data-table th.center-col,
.data-table td.center-col {
  text-align: center;
}
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  font-size: var(--fs-data-num);
  line-height: var(--lh-data-num);
}

/* 表格数字列（monthly-summary / overview 等页用 td.num-col 标记数字字段）
   —— 全选 td.num-col，覆盖 .data-table + .table-wrap 两种结构 */
td.num-col {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: var(--text-1);
  font-size: var(--fs-data-num);
  line-height: var(--lh-data-num);
}

.account-name {
  font-weight: 500;
  color: var(--text-1);
}

.status-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
}

.status-tag.status-done {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.status-tag.status-draft {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.action-link {
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
}

.action-link:link,
.action-link:visited,
.action-link:hover,
.action-link:active,
.action-link:focus {
  text-decoration: none;
  outline: none;
}

/* ---- Generic link-style buttons in tables / list rows ---- */
.edit-link,
.device-edit-link,
.sim-edit-link,
.ra-edit-link,
.delete-link,
a[href="#"]:not(.btn),
td a:not(.btn) {
  text-decoration: none;
  color: var(--text-1);
}
.edit-link:hover,
.device-edit-link:hover,
.sim-edit-link:hover,
.ra-edit-link:hover,
td a:not(.btn):hover {
  text-decoration: underline;
}
.delete-link {
  color: var(--danger);
}
.delete-link:hover {
  color: var(--danger);
  opacity: 0.8;
}
.edit-link:link,
.edit-link:visited,
.edit-link:hover,
.edit-link:active,
.edit-link:focus,
.device-edit-link:link,
.device-edit-link:visited,
.device-edit-link:hover,
.device-edit-link:active,
.device-edit-link:focus,
.sim-edit-link:link,
.sim-edit-link:visited,
.sim-edit-link:hover,
.sim-edit-link:active,
.sim-edit-link:focus,
.ra-edit-link:link,
.ra-edit-link:visited,
.ra-edit-link:hover,
.ra-edit-link:active,
.ra-edit-link:focus,
.delete-link:link,
.delete-link:visited,
.delete-link:hover,
.delete-link:active,
.delete-link:focus,
td a:not(.btn):link,
td a:not(.btn):visited,
td a:not(.btn):hover,
td a:not(.btn):active,
td a:not(.btn):focus {
  text-decoration: none;
  outline: none;
}

/* Dark theme new components */
html[data-theme="dark"] .kpi-card {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .kpi-card:hover {
  border-color: var(--border-strong);
}

/* ===== 平台徽章列表（admin/account.php）深色覆盖 =====
   内联样式 .platform-card / .platform-list-panel 用 var(--bg-card) / var(--bg-page)，
   但内联特异性 (0,1,0) 与全局深色 token 段的变量继承在某些渲染顺序下不稳。
   这里用 (0,2,1) 特异性显式覆盖背景，确保 deep mode 下与周围深色面板融为一体。 */
html[data-theme="dark"] .platform-list-panel {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .platform-card {
  background: var(--bg-page);
  border-color: var(--border);
}

html[data-theme="dark"] .chart-card {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .chart-card:hover {
  border-color: var(--border-strong);
}

/* 暗色：折线图吸附层 + 气泡提示 */
html[data-theme="dark"] .hover-guide {
  stroke: var(--text-4);
  opacity: 0.5;
}
html[data-theme="dark"] .trend-tooltip {
  background: var(--bg-card);
  border-color: var(--border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .ring-legend-item {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .data-table thead {
  background: var(--bg-table-header);
}

html[data-theme="dark"] .data-table td {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .data-table tbody tr:hover {
  background: var(--bg-hover);
}

html[data-theme="dark"] .kpi-icon-cost {
  background: rgba(79, 70, 229, 0.2);
}

html[data-theme="dark"] .kpi-icon-conv {
  background: rgba(16, 185, 129, 0.2);
}

html[data-theme="dark"] .kpi-icon-fans {
  background: rgba(245, 158, 11, 0.2);
}

html[data-theme="dark"] .kpi-icon-article {
  background: rgba(239, 68, 68, 0.2);
}

html[data-theme="dark"] .kpi-icon-transform {
  background: rgba(139, 92, 246, 0.2);
}

html[data-theme="dark"] .week-card-expanded {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .week-card-detail-table thead {
  background: var(--bg-header);
}

html[data-theme="dark"] .week-card-detail-table th {
  color: var(--text-3);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .week-card-detail-table td {
  color: var(--text-2);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .week-card-detail-table tbody tr:hover {
  background: var(--bg-header);
}

html[data-theme="dark"] .status-tag.completed {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
}

html[data-theme="dark"] .status-tag.draft {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
}

/* ===============================================
   Weekly Report — Two-Column Layout
   =============================================== */

.wr-summary-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 18px;
}

.wr-week-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wr-week-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform 0.1s ease;
  color: var(--text-2);
}

.wr-week-nav:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
}

.wr-week-nav:active {
  transform: scale(0.95);
}

.wr-week-nav svg {
  width: 14px;
  height: 14px;
}

.wr-week-selector .custom-select {
  min-width: 240px;
}

.wr-week-selector .custom-select-trigger {
  height: var(--control-h);
  font-size: var(--fs-filter-label);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  min-width: 220px;
  justify-content: center;
  padding: 0 30px 0 14px;
}

.wr-week-selector .custom-select-label {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wr-week-selector .custom-select-dropdown {
  min-width: 100%;
}

.wr-week-selector .custom-select-option {
  white-space: normal;
  line-height: 1.5;
}

.wr-week-selector .custom-select-arrow {
  right: 8px;
}

.wr-week-date {
  font-size: var(--fs-footer);
  color: var(--text-4);
}

.wr-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}

.wr-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  justify-content: flex-end;
}

.wr-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wr-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}

.wr-stat-icon svg {
  width: 16px;
  height: 16px;
}

.wr-stat-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.wr-stat-label {
  font-size: 11px;
  color: var(--text-4);
}

.wr-stat-value {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.wr-stat-value.completed { color: var(--status-good); }
.wr-stat-value.pending { color: #F59E0B; }

/* ---- Two-Column Layout ---- */

.wr-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--card-gap);
  height: calc(100vh - 72px - 24px - 60px - 40px);
  min-height: 520px;
}

.wr-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wr-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.wr-sidebar-title {
  font-size: var(--fs-filter-label);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  flex: 1;
}

.wr-scope-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  position: relative;
}
.wr-scope-toggle:hover {
  color: var(--text-1);
  border-color: var(--text-3);
}
.wr-scope-toggle .wr-scope-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  transition: opacity 0.15s, transform 0.15s;
}
.wr-scope-toggle .wr-scope-icon-single {
  opacity: 0;
  transform: scale(0.8);
}
.wr-scope-toggle .wr-scope-icon-multiple {
  opacity: 1;
  transform: scale(1);
}
.wr-scope-toggle.mine .wr-scope-icon-single {
  opacity: 1;
  transform: scale(1);
}
.wr-scope-toggle.mine .wr-scope-icon-multiple {
  opacity: 0;
  transform: scale(0.8);
}
.wr-scope-toggle:hover .wr-scope-icon {
  color: var(--text-1);
}

.wr-sidebar-actions {
  display: flex;
  gap: 6px;
}

.wr-sidebar-actions .wr-action-link {
  font-size: var(--fs-footer);
  color: var(--text-4);
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  padding: 0;
}

.wr-sidebar-actions .wr-action-link:hover {
  color: var(--primary);
}

.wr-account-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* ---- Account Card ---- */

.wr-account-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  cursor: pointer;
  margin-bottom: 6px;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform 0.12s ease;
}

.wr-account-card:hover {
  border-color: #B8BEC7;
  background: #FFFFFF;
}

.wr-account-card:active {
  transform: scale(0.98);
}

.wr-account-card.selected {
  border-color: var(--primary);
  border-width: 1.5px;
  background: #FAFAFB;
}

.wr-account-card.wr-completed .wr-status-tag {
  color: var(--status-good);
  background: #ECFDF5;
}

.wr-account-card.wr-draft .wr-status-tag {
  color: #F59E0B;
  background: #FFFBEB;
}

.wr-account-card.wr-pending .wr-status-tag {
  color: var(--text-4);
  background: #F3F4F6;
}

.wr-account-icon {
  width: 92px;
  height: 36px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 14px;
}

.wr-account-icon .badge {
  font-size: 13px;
}

.wr-account-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wr-account-name {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.wr-account-meta {
  font-size: var(--fs-footer);
  color: var(--text-4);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.wr-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-badge);
  font-size: var(--fs-footer);
  font-weight: var(--fw-medium);
  background: #F3F4F6;
  color: var(--text-4);
}

.wr-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-badge);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}

.wr-status-completed {
  background: rgba(16, 185, 129, 0.1);
  color: var(--status-good);
}

.wr-status-draft {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.wr-progress {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-badge);
  background: var(--border);
  overflow: hidden;
  flex-shrink: 0;
}

.wr-progress-bar {
  height: 100%;
  border-radius: var(--radius-badge);
  background: var(--primary);
  transition: width 0.3s ease;
}

.wr-account-card.wr-completed .wr-progress-bar {
  background: var(--status-good);
}

.wr-account-card.wr-draft .wr-progress-bar {
  background: #F59E0B;
}

/* ---- Right Panel: Form ---- */

.wr-form-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wr-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.wr-form-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wr-form-title-text {
  font-size: var(--fs-filter-label);
  font-weight: var(--fw-medium);
  color: var(--text-1);
}

.wr-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wr-form-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.wr-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 20px;
}

.wr-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wr-form-field-label {
  font-size: var(--fs-footer);
  color: var(--text-3);
  font-weight: var(--fw-medium);
}

.wr-form-field-label .required {
  color: var(--status-bad);
  margin-left: 2px;
}

.wr-form-field-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-page);
  font-size: 13px;
  color: var(--text-1);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast);
}

.wr-form-field-input:hover {
  border-color: var(--border-strong);
}

.wr-form-field-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
}

.content .wr-form-field-input:disabled {
  background: var(--bg-disabled);
  color: var(--text-4);
  cursor: not-allowed;
}

.content .wr-form-field-input.wr-completed {
  background: #F9FAFB;
  color: var(--text-3);
}

.content .wr-form-field-input.wr-computed {
  background: #F0F7FF;
  color: #1E40AF;
  border-color: #BFDBFE;
  font-weight: 500;
}

.content .wr-form-field-input.wr-computed:hover {
  border-color: #93C5FD;
}

.content .wr-form-field-input.wr-computed:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
}

.content .wr-form-field-input.wr-computed::placeholder {
  color: #93C5FD;
  font-style: italic;
}

.wr-computed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 14px;
  height: 14px;
  color: #111827;
  cursor: help;
  vertical-align: -2px;
}
.wr-computed-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.content .wr-form-field-unit .wr-form-field-input.wr-computed {
  padding-right: 44px;
}

.wr-form-field-unit {
  position: relative;
  overflow: visible;
}

.wr-form-field-unit .unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-footer);
  color: var(--text-4);
  pointer-events: none;
  white-space: nowrap;
}

.content .wr-form-field-unit .wr-form-field-input {
  padding-right: 44px;
}

.wr-form-remark {
  grid-column: 1 / -1;
  margin-top: 16px;
}

.wr-form-remark textarea {
  width: 100%;
  min-height: 120px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-page);
  font-size: 13px;
  color: var(--text-1);
  font-family: var(--font-sans);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast);
}

.wr-form-remark textarea:hover {
  border-color: var(--border-strong);
}

.wr-form-remark textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
}

.wr-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
}

.wr-form-hint {
  font-size: var(--fs-footer);
  color: var(--text-4);
}

.wr-form-foot-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wr-form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-footer);
  color: var(--text-3);
  line-height: 1.5;
}

.wr-form-tip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.wr-form-actions {
  display: flex;
  gap: 8px;
}

/* ---- Empty State ---- */

.wr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: var(--text-4);
}

.wr-empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.wr-empty-state-icon svg {
  width: 28px;
  height: 28px;
}

.wr-empty-state-text {
  font-size: var(--fs-card-title);
  color: var(--text-3);
  margin-bottom: 4px;
}

.wr-lock-countdown {
  margin-top: 16px;
  padding: 8px 16px;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--warning);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.5px;
}

.wr-empty-state-sub {
  font-size: var(--fs-footer);
  color: var(--text-4);
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
  .wr-form-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .wr-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .wr-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }

  .wr-sidebar {
    max-height: 320px;
  }

  .wr-summary-bar {
    flex-wrap: wrap;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .wr-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Dark Theme ---- */

html[data-theme="dark"] .wr-summary-bar {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .wr-week-nav {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-2);
}

html[data-theme="dark"] .wr-week-nav:hover {
  border-color: #4A4D55;
  background: #23262D;
}

html[data-theme="dark"] .wr-week-selector .custom-select-trigger {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-1);
}

html[data-theme="dark"] .wr-week-selector .custom-select-trigger:hover {
  border-color: #4A4D55;
  background: #23262D;
}

html[data-theme="dark"] .wr-stat-divider {
  background: var(--border);
}

html[data-theme="dark"] .wr-stat-icon {
  background: #23262D;
  color: var(--text-3);
}

html[data-theme="dark"] .wr-sidebar,
html[data-theme="dark"] .wr-form-panel {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .wr-sidebar-head,
html[data-theme="dark"] .wr-form-head,
html[data-theme="dark"] .wr-form-foot {
  border-color: var(--border);
}

html[data-theme="dark"] .wr-account-card {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="dark"] .wr-account-card:hover {
  border-color: #4A4D55;
  background: #23262D;
}

html[data-theme="dark"] .wr-account-card.selected {
  border-color: #E5E7EB;
  background: #23262D;
}

html[data-theme="dark"] .wr-account-icon {
  background: transparent;
}

html[data-theme="dark"] .wr-form-field-input {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-1);
}

html[data-theme="dark"] .wr-form-field-input:hover {
  border-color: var(--border-strong);
}

html[data-theme="dark"] .wr-form-field-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .wr-form-field-input:disabled {
  background: #23262D;
  color: var(--text-4);
}

html[data-theme="dark"] .content .wr-form-field-input.wr-computed {
  background: #1E293B;
  color: #93C5FD;
  border-color: #3B82F6;
}

html[data-theme="dark"] .content .wr-form-field-input.wr-computed:hover {
  border-color: #60A5FA;
}

html[data-theme="dark"] .content .wr-form-field-input.wr-computed::placeholder {
  color: #60A5FA;
}

html[data-theme="dark"] .wr-computed-icon {
  color: #E5E7EB;
}

html[data-theme="dark"] .wr-form-field-unit .unit {
  color: var(--text-4);
}

html[data-theme="dark"] .wr-form-remark textarea {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-1);
}

html[data-theme="dark"] .wr-form-remark textarea:hover {
  border-color: #4A4D55;
}

html[data-theme="dark"] .wr-progress {
  background: #3A3D45;
}

html[data-theme="dark"] .wr-empty-state {
  color: var(--text-4);
}

html[data-theme="dark"] .wr-empty-state-icon {
  background: #23262D;
}

/* Form scale-in animation（周报填写 / 账号管理 / 用户管理 通用） */
@keyframes wrFormIn {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#wrFormContent.animating,
.form-scale-target.animating {
  animation: wrFormIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
}

/* Remark eye icon with tooltip */
.remark-cell {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.remark-cell .eye-icon {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  transition: color 0.15s;
  flex-shrink: 0;
}

.remark-cell:hover .eye-icon {
  color: var(--primary);
}

.remark-empty {
  color: var(--text-4);
}

/* Fixed tooltip - appended to body via JS */
.remark-tooltip-fixed {
  position: fixed;
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  max-width: 220px;
  min-width: 80px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  pointer-events: none;
}

.remark-tooltip-fixed.visible {
  opacity: 1;
  visibility: visible;
}

.remark-tooltip-fixed::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--border);
}

.remark-tooltip-fixed.below::after {
  top: -8px;
  bottom: auto;
  border-top-color: transparent;
  border-bottom-color: var(--border);
}

/* ===============================================
   Delta 全局色标：数值增加=红，数值降低=绿
   =============================================== */

/* 纯文字色 */
.delta-up   { color: var(--trend-up); }
.delta-down { color: var(--trend-down); }
.delta-flat { color: var(--delta-flat); }

/* 胶囊样式（带淡底色） */
.delta-pill-up {
  background: rgba(239, 68, 68, 0.1);
  color: var(--trend-up);
}
.delta-pill-down {
  background: rgba(16, 185, 129, 0.1);
  color: var(--trend-down);
}
.delta-pill-flat {
  background: var(--bg-muted);
  color: var(--delta-flat);
}

/* ===============================================
   全局输入框基准样式（以个人资料"姓名"输入框为准）
   作用域：.form-input 类 + 内容区常见文本型控件；
   排除：搜索框(.rc-search-input)、checkbox/radio/range/file/color、
         submit/button/image/hidden，避免破坏特殊控件与登录页图标布局。
   =============================================== */
.form-input,
.content input[type="text"]:not(.rc-search-input):not(.search-field-input),
.content input[type="password"],
.content input[type="email"],
.content input[type="number"],
.content input[type="tel"],
.content input[type="url"],
.content input[type="date"],
.content textarea,
.content select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.form-input:hover,
.content input[type="text"]:not(.rc-search-input):not(.search-field-input):hover,
.content input[type="password"]:hover,
.content input[type="email"]:hover,
.content input[type="number"]:hover,
.content input[type="tel"]:hover,
.content input[type="url"]:hover,
.content input[type="date"]:hover,
.content textarea:hover,
.content select:hover {
  border-color: var(--border-strong);
}

.form-input:focus,
.content input[type="text"]:not(.rc-search-input):not(.search-field-input):focus,
.content input[type="password"]:focus,
.content input[type="email"]:focus,
.content input[type="number"]:focus,
.content input[type="tel"]:focus,
.content input[type="url"]:focus,
.content input[type="date"]:focus,
.content textarea:focus,
.content select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
}

html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .content input[type="text"]:not(.rc-search-input):not(.search-field-input):focus,
html[data-theme="dark"] .content input[type="password"]:focus,
html[data-theme="dark"] .content input[type="email"]:focus,
html[data-theme="dark"] .content input[type="number"]:focus,
html[data-theme="dark"] .content input[type="tel"]:focus,
html[data-theme="dark"] .content input[type="url"]:focus,
html[data-theme="dark"] .content input[type="date"]:focus,
html[data-theme="dark"] .content textarea:focus,
html[data-theme="dark"] .content select:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.form-input::placeholder,
.content input[type="text"]:not(.rc-search-input):not(.search-field-input)::placeholder,
.content input[type="password"]::placeholder,
.content input[type="email"]::placeholder,
.content input[type="number"]::placeholder,
.content input[type="tel"]::placeholder,
.content input[type="url"]::placeholder,
.content input[type="date"]::placeholder,
.content textarea::placeholder,
.content select::placeholder {
  color: var(--text-4);
}

.form-input[readonly],
.content input[type="text"]:not(.rc-search-input):not(.search-field-input)[readonly],
.content input[type="password"][readonly],
.content input[type="email"][readonly],
.content input[type="number"][readonly],
.content input[type="tel"][readonly],
.content input[type="url"][readonly],
.content input[type="date"][readonly],
.content textarea[readonly],
.content select[readonly] {
  color: var(--text-3);
  background: var(--bg-disabled);
  cursor: default;
}

/* 多行文本框：去掉固定高度，给最小高度，允许纵向拉伸 */
.content textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

/* 下拉框：右侧预留系统箭头空间 */
.content select {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* ===============================================
   OCR 截图识别模态框
   =============================================== */

.ocr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  padding: var(--sp-4);
}

.ocr-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.ocr-modal {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.2s ease;
  overflow: hidden;
}

.ocr-modal-overlay.show .ocr-modal {
  transform: scale(1) translateY(0);
}

.ocr-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.ocr-modal-title {
  font-size: var(--fs-table-title);
  line-height: var(--lh-table-title);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.ocr-modal-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--text-4);
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ocr-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

.ocr-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 240px;
}

/* ---- 投放平台选择 ---- */
.ocr-platform-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.ocr-platform-row > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.ocr-platform-hint {
  font-size: 12px;
  color: var(--text-3);
}

.ocr-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  gap: var(--sp-3);
}

.ocr-foot-right {
  display: flex;
  gap: var(--sp-2);
}

/* ---- Dropzone ---- */
.ocr-dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}

.ocr-dropzone:hover,
.ocr-dropzone.dragover {
  border-color: var(--primary);
  background: var(--bg-card);
}

.ocr-dropzone-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.ocr-dropzone-text {
  font-size: var(--fs-filter-label);
  color: var(--text-2);
  margin-bottom: var(--sp-1);
}

.ocr-dropzone-hint {
  font-size: var(--fs-card-change);
  color: var(--text-4);
}

/* ---- Preview ---- */
.ocr-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  padding: var(--sp-3);
  text-align: center;
  max-height: 240px;
  overflow: auto;
}

.ocr-preview img {
  max-width: 100%;
  max-height: 220px;
  display: inline-block;
  border-radius: 2px;
}

/* ---- Loading ---- */
.ocr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) 0;
  gap: var(--sp-3);
}

.ocr-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ocr-spin 0.8s linear infinite;
}

@keyframes ocr-spin {
  to { transform: rotate(360deg); }
}

.ocr-loading-text {
  font-size: var(--fs-card-title);
  color: var(--text-3);
}

/* ---- Error ---- */
.ocr-error {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #B91C1C;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-card);
  font-size: var(--fs-table-cell);
  line-height: 1.5;
}

html[data-theme="dark"] .ocr-error {
  background: rgba(229, 62, 62, 0.12);
  border-color: rgba(229, 62, 62, 0.4);
  color: #FCA5A5;
}

/* ---- Result ---- */
.ocr-result-hint {
  font-size: var(--fs-card-title);
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

.ocr-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.ocr-result-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--transition-fast);
}

.ocr-result-card:focus-within {
  border-color: var(--primary);
}

.ocr-result-card.ocr-miss {
  background: var(--bg-soft);
  border-style: dashed;
}

.ocr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.ocr-card-label {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.ocr-card-source {
  font-size: 11px;
  color: var(--text-4);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocr-card-input {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-card);
  color: var(--text-1);
  font-size: var(--fs-filter-label);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast);
}

.ocr-card-input:focus {
  outline: none;
  border-color: var(--primary);
}

.ocr-card-input::placeholder {
  color: var(--text-disabled);
}

/* ---- Toast ---- */
.ocr-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--primary);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-btn);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1100;
  pointer-events: none;
}

.ocr-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .ocr-result-grid {
    grid-template-columns: 1fr;
  }
  .ocr-modal {
    max-width: 100%;
  }
  .ocr-modal-body {
    padding: var(--sp-4);
  }
}

/* ===============================================
   Accessibility · 键盘焦点可见性（P0 修复）
   全站可聚焦元素提供统一可见焦点环，键盘 Tab 导航可辨（WCAG 2.4.7）。
   =============================================== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 已有自定义焦点样式的表单控件：去默认 outline，避免双重环 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.search-field-input:focus-visible {
  outline: none;
}

/* 控件类（按钮 / 药丸 / 标签）：用 box-shadow 环，不挤压布局 */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-default:focus-visible,
.btn-danger:focus-visible,
.theme-toggle:focus-visible,
.sort-toggle-btn:focus-visible,
.back-this-week:focus-visible,
.week-pill:focus-visible,
.history-tag:focus-visible,
.page-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.18);
}

.select-wrap select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}

.custom-select-trigger:focus-visible,
.custom-select:focus-within .custom-select-trigger {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}

.sidebar .menu-item:focus-visible {
  outline: none;
  background: var(--bg-hover);
  box-shadow: inset 2px 0 0 var(--primary);
}

/* 暗色主题：焦点环改用浅色描边 */
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .theme-toggle:focus-visible,
html[data-theme="dark"] .sort-toggle-btn:focus-visible,
html[data-theme="dark"] .back-this-week:focus-visible,
html[data-theme="dark"] .week-pill:focus-visible,
html[data-theme="dark"] .history-tag:focus-visible,
html[data-theme="dark"] .page-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
html[data-theme="dark"] .select-wrap select:focus-visible,
html[data-theme="dark"] .custom-select-trigger:focus-visible,
html[data-theme="dark"] .custom-select:focus-within .custom-select-trigger {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* ---- 表格空状态（P0 修复：原 .empty 无样式） ---- */
/* 限定为 td.empty —— 防止误伤 .week-status.empty 等其他带 .empty 修饰类的元素（这些类空状态语义不同，padding 会让历史查询页的"空闲"卡片撑到 84px 高度）*/
td.empty {
  color: var(--text-4);
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  font-size: var(--fs-table-cell);
  white-space: normal;
}

/* ---- 按钮禁用态（P0 修复：原 .btn:disabled 未定义） ---- */
.btn:disabled,
.btn-primary:disabled,
.btn-default:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ===============================================
   Sticky 表头 / 首列（P1-5 宽表体验）
   纵向滚动表头常驻；横向滚动首列（平台 / 账号名）常驻上下文。
   =============================================== */
.table-wrap table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-table-header);
}
.table-wrap table th:first-child,
.table-wrap table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
}
.table-wrap table thead th:first-child {
  z-index: 4;
  background: var(--bg-table-header);
}
.table-wrap table tbody tr:hover td:first-child {
  background: var(--bg-hover);
}
html[data-theme="dark"] .table-wrap table th:first-child,
html[data-theme="dark"] .table-wrap table td:first-child {
  background: var(--bg-card);
}
html[data-theme="dark"] .table-wrap table thead th:first-child {
  background: var(--bg-table-header);
}
html[data-theme="dark"] .table-wrap table tbody tr:hover td:first-child {
  background: var(--bg-hover);
}

/* ===============================================
   Info Pill & Progress（P1-4 从 summary.php 内联抽离为全局）
   周报汇总 / 月度汇总 / 周报等页面统一复用，消除内联重复样式。
   =============================================== */
.progress-info {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 4px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-2);
  font-weight: var(--fw-medium);
}
.progress-text {
  white-space: nowrap;
  line-height: 1;
}
.progress-text #submittedCount {
  color: var(--primary);
  font-weight: var(--fw-semibold);
}
.info-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-2);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.info-pill-label {
  color: var(--text-4);
  font-weight: var(--fw-normal);
}
.info-pill-value {
  color: var(--primary);
  font-weight: var(--fw-semibold);
}
.progress-bar {
  width: 100%;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 1px;
  transition: width 0.3s ease;
  width: 0%;
}
.table-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===============================================
   Skeleton 加载占位（P2-7 首屏 / 切换周次加载态）
   fetch 大表与卡片时显示微光骨架，避免首屏空白（仅 OCR 弹窗有 spinner 的历史缺口）。
   =============================================== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-hover);
  border-radius: var(--radius-card, 4px);
  color: transparent !important;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: skeleton-shine 1.25s ease-in-out infinite;
}
html[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}
@keyframes skeleton-shine {
  100% { transform: translateX(100%); }
}

/* 卡片骨架：复用 .summary-card 容器外形 */
.skeleton-card {
  height: 86px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 4px);
  background: var(--bg-card);
  padding: var(--card-pad, 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.skeleton-card .sk-line {
  height: 12px;
  border-radius: var(--radius-card, 4px);
}
.skeleton-card .sk-line.sk-line-lg {
  height: 20px;
  width: 56%;
}

/* 表格骨架行 */
.skeleton-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
}
.skeleton-block {
  margin: 12px;
  height: 22px;
  border-radius: var(--radius-card, 4px);
}

/* ===============================================
   汇总卡片网格响应式密度（P2-8）
   首页 / 月度汇总：原 .grid-summary 无任何断点（永远 6 列，窄屏挤压），
   现补 1280→4 列、1024→3 列、768→2 列、480→1 列的中间档。
   排除周报详情页 .week-detail-summary（保持 2×6 锁定，不降级）。
   =============================================== */
@media (max-width: 1280px) {
  .grid-summary:not(.week-detail-summary) {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1024px) {
  .grid-summary:not(.week-detail-summary) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .grid-summary:not(.week-detail-summary) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .grid-summary:not(.week-detail-summary) {
    grid-template-columns: 1fr;
  }
}