.view-clue-flow-admin {
  background: #F2F2F7;
  overflow: hidden;
}
.view-clue-flow-admin.active { padding-top: 0 !important; }
.view-clue-flow-admin .cfa-toolbar { padding-top: calc(6px + var(--sat)) !important; padding-bottom: 6px; }

.cfa-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #E5E5EA;
  flex-shrink: 0;
}

.cfa-title {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1E;
}

.cfa-header {
  background: #FFF;
  padding: 8px 10px 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.cfa-time-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.cfa-quick-group { display: flex; flex-wrap: wrap; gap: 4px; }

.cfa-q-btn {
  background: #F2F2F7;
  color: #3A3A3C;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid #E5E5EA;
  cursor: pointer;
}

.cfa-date-picker { display: flex; align-items: center; gap: 4px; }

.cfa-p-box {
  background: #F2F2F7;
  color: #007AFF;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  border: none;
}

.cfa-p-sep { color: #AEAEB2; font-size: 12px; }

.cfa-section { margin-bottom: 4px; }

.cfa-s-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}

.cfa-s-label {
  font-size: 11px;
  color: #8E8E93;
  font-weight: 700;
  margin-bottom: 2px;
}

.cfa-tag-scroll {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.cfa-tag-group { display: inline-flex; gap: 6px; padding: 2px 0; }

.cfa-tag {
  background: #F2F2F7;
  color: #3A3A3C;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.cfa-tag.active { background: #007AFF; color: #FFF; }

.cfa-tag.f-tag { background: #F8F8FF; color: #5856D6; }
.cfa-tag.active-f { background: #5856D6; color: #FFF; }

.cfa-tag.follow { color: #a855f7; border-color: #a855f7; }
.cfa-tag.follow.active { background: #a855f7; color: #fff; border-color: #a855f7; }

.cfa-export-btn {
  background: #07c160;
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  border: none;
  cursor: pointer;
}

.cfa-follow-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
}

.cfa-sum-row {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  border-top: 1px solid #F2F2F7;
}

.cfa-sum-item { font-size: 14px; font-weight: 700; color: #1C1C1E; }

.cfa-c-in { color: #34C759; }
.cfa-c-out { color: #FF3B30; }
.cfa-c-all { color: #007AFF; }
.cfa-c-zero { color: #8E8E93; }

.cfa-sales-stats {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: #F8F9FA;
  border-radius: 10px;
  border: 1px solid #ECECF1;
}

.cfa-sales-stats.hidden { display: none !important; }

.cfa-stats-title {
  font-size: 12px;
  font-weight: 700;
  color: #5856D6;
  margin-bottom: 8px;
}

.cfa-stats-head,
.cfa-stats-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}

.cfa-stats-head {
  color: #8E8E93;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid #E5E5EA;
  margin-bottom: 4px;
}

.cfa-stats-row {
  padding: 5px 0;
  color: #1C1C1E;
}

.cfa-stats-col.name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfa-stats-col.in { color: #34C759; font-weight: 700; }
.cfa-stats-col.out { color: #FF3B30; font-weight: 700; }

.cfa-thead {
  display: flex;
  background: #E5E5EA;
  padding: 6px 4px;
  flex-shrink: 0;
  min-width: 820px;
}

.cfa-th {
  font-size: 11px;
  color: #8E8E93;
  text-align: center;
  font-weight: 700;
}

.cfa-list-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #FFF;
  -webkit-overflow-scrolling: touch;
}

.cfa-list-inner { min-width: 820px; }

.cfa-c-cost { color: #C17F3A; font-weight: 700; }
.cfa-cost-main { font-size: 12px; font-weight: 800; color: #C17F3A; }
.cfa-cost-sub {
  font-size: 9px;
  color: #8E8E93;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cfa-tr {
  display: flex;
  padding: 10px 4px;
  border-bottom: 1px solid #F2F2F7;
  align-items: center;
}

.cfa-td {
  font-size: 12px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfa-w1 { width: 7%; }
.cfa-w2 { width: 8%; }
.cfa-w3 { width: 8%; }
.cfa-w4 { width: 12%; text-align: left !important; padding-left: 4px; }
.cfa-w8 { width: 18%; text-align: left !important; padding-left: 4px; }
.cfa-w7 { width: 12%; }
.cfa-w5 { width: 9%; }
.cfa-w6 { width: 10%; font-weight: 800; }
.cfa-w9 { width: 16%; }

.cfa-st-tag {
  background: #F2F2F7;
  color: #1C1C1E;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
}

.cfa-st-tag.follow { background: #f3e8ff; color: #a855f7; }

.cfa-a-tag {
  background: #EBF5FF;
  color: #007AFF;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
}

.cfa-a-tag.follow { background: #f3e8ff; color: #a855f7; }

.cfa-t-m { font-size: 11px; color: #1C1C1E; font-weight: 500; }
.cfa-t-s { font-size: 10px; color: #8E8E93; }

.cfa-empty {
  padding: 60px 0;
  text-align: center;
  color: #C7C7CC;
  font-size: 14px;
}

.cfa-loading {
  padding: 40px;
  text-align: center;
  color: #8E8E93;
}

.cfa-month-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}