/* 千柯工作台 · 界面设计优化层
 * 方向：Apple 的系统克制 + 编辑式信息层级（大标题、深色主叙事块、白色内容卡）。
 * 只覆盖视觉，不改任何业务结构和交互契约。
 */

:root {
  --canvas: #f3f5f8;
  --surface: #ffffff;
  --hairline: #e6e8ee;
  --hairline-soft: #eef0f4;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .035);
  --shadow-raised: 0 2px 4px rgba(16, 24, 40, .04), 0 18px 42px rgba(16, 24, 40, .07);
}

html.apple-skin body {
  background:
    radial-gradient(900px 520px at 8% -12%, rgba(0, 122, 255, .07), transparent 62%),
    radial-gradient(700px 460px at 96% 4%, rgba(52, 199, 89, .045), transparent 60%),
    #eef1f5;
}

.apple-skin.apple-light.apple-ui .main-shell {
  background: linear-gradient(180deg, #f7f8fa 0%, #f2f4f7 48%, #f5f6f8 100%);
  border-color: #e3e6eb;
}

.apple-skin.apple-light.apple-ui main {
  padding: 30px 34px 48px;
}

/* 页头：更大、更安静 */
.apple-skin.apple-light.apple-ui .page-head {
  align-items: flex-end;
  margin-bottom: 24px;
}
.apple-skin.apple-light.apple-ui .page-head h1 {
  font-size: 36px;
  letter-spacing: -.032em;
}
.apple-skin.apple-light.apple-ui .page-head p {
  max-width: 760px;
  margin-top: 8px;
  color: #6e7480;
  font-size: 13.5px;
  line-height: 1.7;
}
.apple-skin.apple-light.apple-ui .page-head > div:first-child::before {
  display: block;
  margin-bottom: 7px;
  color: #8a8f98;
  content: "千柯 · 内部工作台";
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.apple-skin.apple-light.apple-ui .page-head .actions { gap: 8px; }

/* 今日主叙事块 */
.pf-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 28px;
  margin-bottom: 18px;
  padding: 30px 32px 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background:
    radial-gradient(520px 280px at 88% 115%, rgba(0, 122, 255, .35), transparent 68%),
    radial-gradient(360px 240px at 8% -30%, rgba(52, 199, 89, .16), transparent 62%),
    linear-gradient(132deg, #0c1a2b 0%, #102a43 52%, #0d2f2a 100%);
  box-shadow: 0 20px 46px rgba(12, 26, 43, .22);
  color: #fff;
}
.pf-hero::after {
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.pf-hero-copy { position: relative; z-index: 1; min-width: 0; }
.pf-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .62);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pf-hero-kicker::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, .14);
  content: "";
}
.apple-skin.apple-light.apple-ui .pf-hero h1 {
  margin: 12px 0 10px;
  color: #fff;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.045em;
}
.pf-hero p {
  max-width: 560px;
  color: rgba(255, 255, 255, .7);
  font-size: 13.5px;
  line-height: 1.8;
}
.pf-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pf-hero-actions .btn {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .09);
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.pf-hero-actions .btn:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .16); color: #fff; }
.pf-hero-actions .btn.primary { border-color: #fff; background: #fff; color: #0c1a2b; }
.pf-hero-actions .btn.primary:hover { border-color: #fff; background: #f2f6fb; color: #0c1a2b; }
.pf-hero-side {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: end;
  gap: 8px;
}
.pf-hero-stat {
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
}
.pf-hero-stat:nth-child(3) {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pf-hero-stat span { display: block; color: rgba(255, 255, 255, .58); font-size: 10.5px; }
.pf-hero-stat b { display: block; margin-top: 4px; color: #fff; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.pf-hero-stat:nth-child(3) b { margin-top: 0; font-size: 19px; }
.pf-hero-stat small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .46); font-size: 10px; }
.pf-hero-stat:nth-child(3) small { margin-top: 0; }

/* 指标：从一条横带变成四张卡 */
.pf-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  overflow: visible;
  border: 0;
  background: transparent;
}
.pf-metrics .metric {
  padding: 15px 17px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 180ms var(--ease-standard, ease), box-shadow 180ms var(--ease-standard, ease), border-color 180ms var(--ease-standard, ease);
}
.pf-metrics .metric:hover {
  border-color: #d5dce8;
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}
.pf-metrics .metric:last-child { border-right: 1px solid var(--hairline); }
.pf-metrics .metric-label { color: #6e7480; font-size: 11.5px; }
.pf-metrics .metric-value { margin-top: 9px; color: #101828; font-size: 28px; }
.pf-metrics .metric-note { color: #8a8f98; font-size: 10.5px; }

/* 业务分页：整条分段控件 */
.pf-business-tabs {
  display: flex;
  width: 100%;
  gap: 3px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #eceff4;
}
.pf-business-tabs .tab {
  flex: 1;
  justify-content: center;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: #6e7480;
  font-size: 13px;
}
.pf-business-tabs .tab:hover { background: rgba(255, 255, 255, .6); color: #344054; }
.pf-business-tabs .tab.active {
  border: 0;
  background: #fff;
  color: #101828;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px rgba(16, 24, 40, .06);
}
.pf-business-tabs .pf-tab-icon { display: grid; width: 17px; height: 17px; place-items: center; }
.pf-business-tabs .pf-tab-icon .icon { width: 16px; height: 16px; }

/* 面板：更轻的边界 + 一层很浅的浮起 */
.apple-skin.apple-light.apple-ui .panel {
  border-color: var(--hairline);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.apple-skin.apple-light.apple-ui .panel-header { padding: 17px 20px; }
.apple-skin.apple-light.apple-ui .panel-body { padding: 19px 20px; }
.apple-skin.apple-light.apple-ui .panel-footer { padding: 12px 20px; }

/* 侧栏：白色选中卡 + 蓝色细指示条 */
.apple-skin.apple-light.apple-ui .nav-item { position: relative; border-radius: 10px; }
.apple-skin.apple-light.apple-ui .nav-item.active {
  border-color: transparent;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .045);
}
.apple-skin.apple-light.apple-ui .nav-item.active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--accent, #007aff);
  content: "";
}
.apple-skin.apple-light.apple-ui .nav-group .nav-label {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.apple-skin.apple-light.apple-ui .brand-mark {
  background: linear-gradient(145deg, #1d1d1f, #3b3b3f);
  box-shadow: 0 4px 12px rgba(16, 24, 40, .16);
}

/* 主从列表 */
.pf-list-panel .panel-header, .pf-detail-head { border-bottom-color: var(--hairline-soft); }
.pf-list-item { padding: 14px 18px; }
.pf-list-item.active {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--accent, #007aff), 0 1px 2px rgba(16, 24, 40, .04);
}
.pf-list-main b { color: #1d2939; font-size: 13.5px; }
.pf-list-main > span { color: #7a8089; }
.pf-detail-head { padding: 20px 22px 18px; }
.apple-skin.apple-light.apple-ui .pf-detail-head h2 { font-size: 22px; letter-spacing: -.025em; }
.pf-detail-body { padding: 18px 22px 22px; }
.pf-kpis { gap: 9px; }
.pf-kpis > div { padding: 12px 13px; border-color: var(--hairline); border-radius: 12px; background: #fafbfc; }
.pf-kpis b { font-size: 21px; }

/* 表格：更像数据表，而不是网页表格 */
.apple-skin.apple-light.apple-ui table thead th {
  color: #8a8f98;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.apple-skin.apple-light.apple-ui table tbody tr { transition: background-color 140ms ease; }
.apple-skin.apple-light.apple-ui table tbody tr:hover { background: #fafbfc; }
.pf-money-table th:nth-child(n+3), .pf-money-table td:nth-child(n+3) { text-align: right; }
.pf-money-table td { font-variant-numeric: tabular-nums; }

/* 需求流程：轨道、门禁和阶段卡更有结构 */
.progress-track { gap: 7px; padding: 16px 18px; }
.progress-step::before { height: 5px; background: #e9edf3; }
.progress-step.done::before { background: #c7d9f6; }
.progress-step.current::before { background: linear-gradient(90deg, #007aff, #69b7ff); }
.progress-step.current { color: #1d2939; font-weight: 600; }
.pf-gate { border-color: var(--hairline); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.pf-gate-head h3 { font-size: 14px; }
.pf-gate-list li { border-color: var(--hairline-soft); border-radius: 9px; }
.pf-process-card { border-top: 3px solid #e3e8f0; border-radius: 14px; }
.pf-process-card:nth-child(1) { border-top-color: #b8c0cc; }
.pf-process-card:nth-child(2) { border-top-color: #e0a21a; }
.pf-process-card:nth-child(3) { border-top-color: #6d8fd6; }
.pf-process-card:nth-child(4) { border-top-color: #007aff; }
.pf-process-card:nth-child(5) { border-top-color: #34a853; }
.pf-process-card:nth-child(6) { border-top-color: #102a43; }
.pf-process-no {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #f1f4f9;
  color: #4b5563;
  font-size: 10.5px;
  font-weight: 700;
}

/* 顶部栏：内容滚动时仍然稳定 */
.apple-skin.apple-light.apple-ui .topbar {
  background: rgba(255, 255, 255, .76);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 .5px 0 rgba(60, 60, 67, .08);
}

/* 空状态：不要像一块空白 */
.pf-empty {
  margin: 12px;
  border: 1px dashed #e1e5ec;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfe, #f8fafc);
}

@media (max-width: 1100px) {
  .apple-skin.apple-light.apple-ui main { padding: 26px 24px 42px; }
  .pf-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 26px 24px; }
  .pf-hero-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-hero-stat:nth-child(3) { display: block; grid-column: auto; }
  .pf-hero-stat:nth-child(3) b { margin-top: 4px; font-size: 22px; }
}
@media (max-width: 760px) {
  .apple-skin.apple-light.apple-ui main { padding: 22px 16px 36px; }
  .pf-hero { padding: 22px 20px; border-radius: 20px; }
  .apple-skin.apple-light.apple-ui .pf-hero h1 { font-size: 38px; }
  .pf-hero-side { grid-template-columns: 1fr 1fr; }
  .pf-hero-stat:nth-child(3) { display: block; grid-column: 1 / -1; }
  .pf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-business-tabs { overflow-x: auto; }
  .pf-business-tabs .tab { flex: 0 0 auto; min-width: 84px; }
}